Vue前端实现excel的导入、导出、打印功能_前端打印excel

在Vue项目中实现Excel的导入、导出和打印功能，可以使用第三方库如xlsx和print-js。以下是实现这些功能的示例代码：

1. 安装xlsx和print-js库：

npm install xlsx file-saver print-js

2. 导入和导出功能的实现：

// 导入
import { read } from 'xlsx';
 
methods: {
  importExcel(event) {
    const files = event.target.files;
    const fileReader = new FileReader();
    fileReader.onload = (e) => {
      const data = new Uint8Array(e.target.result);
      const workbook = read(data, { type: 'array' });
      const firstSheetName = workbook.SheetNames[0];
      const worksheet = workbook.Sheets[firstSheetName];
      const json = read(worksheet, { type: 'json' });
      // 处理json数据
      console.log(json);
    };
    fileReader.readAsArrayBuffer(files[0]);
  },
 
  exportExcel() {
    // 假设你有一个json数据
    const jsonData = [
      // ...
    ];
    const ws = XLSX.utils.json_to_sheet(jsonData);
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
    XLSX.writeFile(wb, 'filename.xlsx');
  }
}

3. 打印功能的实现：

// 导入print-js
import printJS from 'print-js';
 
methods: {
  printExcel() {
    // 假设你有一个表格的id
    printJS({
      printable: 'tableId',
      type: 'html',
      targetStyles: ['*']
    });
  }
}

在HTML模板中，你需要提供文件输入和表格元素的ID：

<input type="file" @change="importExcel" />
<button @click="exportExcel">导出</button>
<button @click="printExcel">打印</button>
<table id="tableId">
  <!-- 表格内容 -->
</table>

确保在Vue组件中正确地引入了所需的库，并且在methods中定义了相应的方法。这样就可以实现Excel的导入、导出和打印功能。