vue文件导出

### Vue 文件导出方法及实现 #### 使用 `exceljs` 库进行 Excel 导出 为了在 Vue 项目中实现出色的文件导出功能，可以借助于 `exceljs` 这一强大的第三方库[^1]。此库提供了丰富的 API 来创建、修改以及保存 Excel 文档。 安装 `exceljs` 可通过 npm 或 yarn 完成： ```bash npm install exceljs --save ``` 或者 ```bash yarn add exceljs ``` 下面是一个简单的例子来展示如何利用 `exceljs` 创建并导出一个 Excel 文件： ```javascript import { saveAs } from 'file-saver'; import * as ExcelJS from 'exceljs'; export function exportToExcel(data) { const workbook = new ExcelJS.Workbook(); const worksheet = workbook.addWorksheet('Sheet Name'); // 添加表头 worksheet.addRow(['ID', 'Name', 'Age']); // 填充数据 data.forEach(item => { worksheet.addRow([item.id, item.name, item.age]); }); // 将工作簿转换为二进制流 workbook.xlsx.writeBuffer().then(buffer => { const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }); saveAs(blob, 'data.xlsx'); }); } ``` 这段代码首先定义了一个函数 `exportToExcel` 接受一组数据作为参数，在其中构建一个新的 Excel 工作薄，并向其添加一行或多行记录。最后调用了 `writeBuffer()` 方法将整个文档序列化为缓冲区对象以便进一步处理或直接下载到客户端机器上。 #### 纯前端实现 CSV 文件导出 除了依赖外部库外，还可以采用纯 JavaScript 的方式快速生成简易版的数据表格——CSV 文件。这种方式不需要额外引入任何库，适合轻量级应用场景。 以下是基于 JSON 数据集生成 CSV 字符串并通过浏览器内置接口触发下载过程的一个实例： ```javascript function downloadCsv(filename, rows) { const processRow = (row) => row.join(','); const csvArray = [ Object.keys(rows[0]), // 表头 ...rows.map((row) => Object.values(row).map(String), // 转换数值型字段为字符串形式 ), ]; const csvString = csvArray.map(processRow).join('\n'); const link = document.createElement("a"); const blob = new Blob([csvString], {type: "text/csv;charset=utf-8;"}); const url = URL.createObjectURL(blob); link.setAttribute("href", url); link.setAttribute("download", filename); link.click(); } // 示例用法 const sampleData = [{id: 1,name:"张三",age:25},{id:2,name:"李四",age:30}]; downloadCsv('sample.csv', sampleData); ``` 上述脚本实现了从给定的对象数组构造出逗号分隔值（Comma-Separated Values），即标准格式化的 CSV 文件内容，并自动触发表单提交行为完成实际文件传输操作[^2]。