前端实现文件下载

目录

1.说明

2.示例--excel

3.示例--csv

---

1.说明

在开发中经常会出现下载csv或者excel文件，可以通过后端下载，也可以通过前端下载，如果在前端页面中可以直接获取到要下载的数据，可以通过前端下载的方式，更加高效便捷

2.示例--excel

①安装依赖

npm install xlsx
# 或者
yarn add xlsx

②在目标文件中引入依赖

import * as XLSX from 'xlsx';

③根据页面中的数据，生成excel文件

const exportToExcel = async () => {const orderedCheckedRecords = await getOrderSelData()if (!orderedCheckedRecords || orderedCheckedRecords.length === 0) {MessageBox.error('请选择要导出的数据');return;}// 获取有效列信息，删除敏感列信息const col: [] = await getNoSensitivityCol({colList: tableCol.value})// 获取表头并添加类型const headers: ColumnHeader[] = col.filter((col: any) => col.visible == 1).map((col: any) => ({title: col.title,dataIndex: col.dataIndex}));// 构建Excel数据const excelData = orderedCheckedRecords.map((record: any) => {const row: any = {};headers.forEach((header: ColumnHeader) => {row[header.dataIndex] = record[header.dataIndex];});return row;});// 创建工作簿const wb = XLSX.utils.book_new();// 创建工作表 - 使用类型定义const ws = XLSX.utils.json_to_sheet(excelData, {header: headers.map((h: ColumnHeader) => h.dataIndex)});// 添加表头标题行XLSX.utils.sheet_add_aoa(ws, [headers.map((h: ColumnHeader) => h.title)], {origin: 'A1'});// 设置列宽const colWidth = headers.map(() => ({wch: 10}));ws['!cols'] = colWidth;const fileName = prop.docName ?? '数据导出'// 将工作表添加到工作簿XLSX.utils.book_append_sheet(wb, ws, 'data');// 生成Excel文件并下载XLSX.writeFile(wb, `${fileName}.xlsx`);
};

在前端页面中获取要下载的数据信息及文件标题信息

构建导出数据信息，每条数据的对象中的的key我使用的是每列的唯一标识，即dataIndex，value为列标识，并对要导出的列信息进行了过滤处理，只导出必要的列信息

创建工作表，做好数据和表头的对应，

添加标题行，并设置列宽

设置导出的sheet名，注意名称有长度限制，不要超过30位，

3.示例--csv

const exportToCSV = async () => {const orderedCheckedRecords = await getOrderSelData();if (!orderedCheckedRecords || orderedCheckedRecords.length === 0) {MessageBox.error('请选择要导出的数据');return;}// 获取有效列信息，删除敏感列信息const col: [] = await getNoSensitivityCol({colList: tableCol.value})// 获取表头const headers = col.filter((col: any) => col.visible == 1).map((col: any) => ({title: col.title,dataIndex: col.dataIndex}));// 构建CSV数据let csvContent = '\ufeff'; // 添加BOM标记以支持中文// 添加表头csvContent += headers.map((h: ColumnHeader) => `"${h.title}"`).join(',') + '\n';// 添加数据行orderedCheckedRecords.forEach((record: any) => {const row = headers.map((header: ColumnHeader) => {const value = record[header.dataIndex];// 处理包含逗号、引号或换行符的值if (value === null || value === undefined) {return '""';}const stringValue = String(value);if (stringValue.includes(',') || stringValue.includes('"') || stringValue.includes('\n')) {return `"${stringValue.replace(/"/g, '""')}"`;}return `"${stringValue}"`;});csvContent += row.join(',') + '\n';});// 创建Blob对象const blob = new Blob([csvContent], {type: 'text/csv;charset=utf-8'});// 创建下载链接const fileName = prop.docName ?? '数据导出'const link = document.createElement('a');link.href = URL.createObjectURL(blob);link.download = `${fileName}.csv`;// 触发下载document.body.appendChild(link);link.click();document.body.removeChild(link);
};

生成csv文件时要注意对中文的处理以及对特殊字符的处理，因为csv是通过逗号进行区分的

CSV 文件有以下规则需要遵守：

• 包含逗号的值必须用引号包裹，否则会被解析为多个列

• 包含换行符的值必须用引号包裹

• 如果值本身包含引号，需要将引号转义为两个引号

• 统一用引号包裹所有值可以避免很多解析问题