方法一
/**
* 导出表格数据到 Excel 文件
* @param {Array} tableData - 表格数据
* @param {Array} fieldLabels - 表头组成的数组
* @param {Array} fieldKeys - 列属性名组成的数组
* @param {String} fileName - 导出的文件名
*/
function exportExcel(tableData, fieldLabels, fieldKeys, fileName) {
let dataStr = fieldLabels.toString() + '\r\n';
tableData.forEach(item => {
fieldKeys.forEach(key => {
// 加引号是为了使换行符在单元格内正常显示
dataStr += `"${item[key]}"\t,`;
});
dataStr += '\r\n';
});
// encodeURIComponent 解决中文乱码
const url = "data:text/xls;charset=utf-8,\ufeff" + encodeURIComponent(dataStr);
const link = document.createElement("a");
link.href = url;
link.download = fileName + ".xls";
link.style.display = 'none';
document.body.appendChild(link);
link.click();
document.body.removeChild(link); //释放标签
}
遇到的问题
- 为了让单元格中的数据不被转换格式(如 过大的数字会被转为科学技术法显示),需要在数据后面加多余的字符,如以上代码的
\t
。
示例
const tableData = [
{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
{ date: '2016-05-04', name: '张小星', address: '上海市普陀区金沙江路 1517 弄' },
{ date: '2016-05-01', name: '刘小备', address: '上海市普陀区金沙江路 1519 弄' },
{ date: '2016-05-03', name: '赵小云', address: '上海市普陀区金沙江路 1516 弄' }
],
fieldKeys = ['date', 'name', 'address'],
fieldLabels = ['日期', '姓名', '地址'],
fileName = '测试文件';
exportExcel(tableData, fieldLabels, fieldKeys, fileName);
方法二
通过 HTML 导出 EXCEL
function exportExcel(tableData, fieldKeys, fieldLabels, fileName){
// 用于替换数据中的换行符,是其可以在单元格内正常显示
const wrapMark = '<br style="mso-data-placement:same-cell;"/>';
// 设置单元格数据显示为文本格式,避免过大的数字以科学计数法的形式显示
const tdTagHeader = `<td style="mso-number-format:'\@'">`;
let dataStr = '<tr>'
fieldLabels.forEach(label => {
dataStr += `${tdTagHeader + label}</td>`;
})
dataStr += '</tr>';
tableData.forEach(item => {
dataStr += '<tr>'
fieldKeys.forEach(key => {
// 这种方式本质是导出 html 文件,html 中连续的空格符会被合并成一个显示
// replace(/ /g, ' ') 将空格符替换成 使其可以正常显示
dataStr += tdTagHeader + `${item[key]}`.replace(/ /g, ' ').replace(/\n/g, wrapMark) + '</td>';
});
dataStr += '</tr>'
})
//设置 Worksheet 名
const workSheet = 'Sheet1'
const template = `<html xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40">
<head><meta charset="UTF-8" />
<!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
<x:Name>${workSheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/>
</x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
</head><body><table>${dataStr}</table></body></html>`;
const url = 'data:application/vnd.ms-excel;base64,' + window.btoa(unescape(encodeURIComponent(template))) ;
const link = document.createElement("a");
link.href = url;
link.download = fileName + ".xls";
link.style.display = 'none';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
PS: 由于本质导出的是 HTML 文件,所以为 <td> 、<tr>
标签设置的内联样式也会在 Excel 中正确应用。
遇到的问题
- 导出的文件用 Office 打开时会提示文件格式与扩展名不匹配的提示,但并不影响文件的正常打开。