业务背景
直接查询数据库数据，并将其结果渲染在表格内，可导出为Excel。
知识储备
Blob、FilReader、FileSaver、a、csv、Content-type、\ufeff、转义字符
数据处理
直接从数据库查数据，结果是完全不固定的，所以只能根据结果动态生成表格。首先处理列，将所有列都显示出来，且不会重复。
getDynamicColumns = (arr) => {
let headerObj = {} // 存放所有行结果的集合体
const headerColumns = [] // 存放表格动态列
// 将数组中所有项的键集合到一起
arr.forEach(item => {
headerObj = {
...headerObj,
...item,
}
})
// 生成动态列 使用的是AntD，这里直接按ant的模板处理
Object.keys(headerObj).forEach(item => {
headerColumns.push({
dataIndex: item,
title: item,
align: 'center',
width: 120,
render: record => <Popover content={record}>{record || '-'}</Popover>,
})
})
return headerColumns
}
数据显示很简单，主要就是生成Excel了。
导出表格
在做的时候，尝试了不同的方法，这里会一一介绍。
方法一 Blob + FileSaver
思路：使用Blob生成FileSaver可以识别的文件流，然后调用FileSaver的saveAs方法下载。
实现：
首先安装 FileSaver 依赖。
yarn add file-saver
然后在文件中引入 FileSaver。
import FileSaver from 'file-saver'
然后将数据处理成cvs文件形式。
注意：此段代码及之后的代码应位于你的导出方法之内
const { columns, data } = this.state
let blobData = '\uFEFF' // 字节顺序标记 使用了BOM或者utf-16？
blobData += `${columns.map(item => item.dataIndex).join(',')} \n`
data.forEach(item => {
const itemData = []
columns.forEach(ele => {
itemData.push(item[ele.dataIndex] || '-')
})
blobData += `${itemData.join(',')}\n`
})
通过上面这段代码，已经将数据转换为逗号分隔类型数据，第一行为表头，其他行为数据。
然后使用Blob将上面这段生成的 blobData 转换为Blob类文件格式。
const blob = new Blob([blobData], {
// type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet’, // xlsx
type: 'application/vnd.ms-excel;charset=utf-8', // xls
});
// 使用xlsx时，导出的文件会提示文件扩展名或文件类型无效，手动将文件后缀改为xls后，可正常打开
最后使用FileSaver下载文件
FileSaver.saveAs(blob, `执行结果-${+new Date()}.xls`);
缺陷优化
打开生成的文件后，会发现长数字类型的字段全部变成了科学记数法，很尴尬是不是。
出现此问题是因为excel在处理数据时，将纯数字的字符串识别为数字类型，然后又因为长度太长转换为科学记数法了。
解决方法很简单，在第一步处理数据的时候额外处理一下纯数字就可以了。
data.forEach(item => {
const itemData = []
columns.forEach(ele => {
let val = item[ele.dataIndex] || '-'
if ((+val).toString() === val) { // 判断当前值是否为纯数字
val = `\t${ val.toString()}` // 纯数字加一个制表符，正常文件中不显示，但是会让excel不再特殊处理纯数字字符串
}
itemData.push(val)
})
blobData += `${itemData.join(',')}\n`
})
方法二 FileReader + Blob + FileSaver
思路：使用html模板，将表格元素放入模板中，然后通过FileReader 将模板文件字符串转成base64，再使用FileSaver下载文件。
实现：
首先写一个html模板
const tagName = 'table' // excel当前工作表的名称
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 http-equiv=Content-Type content="text/html; charset=utf-8">
<meta name=ProgId content=Excel.Sheet>
<!--[if gte mso 9]>
<xml>
<x:ExcelWorkbook>
<x:ExcelWorksheets>
<x:ExcelWorksheet>
<x:Name>${tagName}</x:Name>
<x:WorksheetOptions>
<x:DisplayGridlines/>
</x:WorksheetOptions>
</x:ExcelWorksheet>
</x:ExcelWorksheets>
</x:ExcelWorkbook>
</xml>
<![endif]-->
<style type="text/css">
table td {
text-align: center;
};
.header{
background-color:'gray'
}
.align-left {text-align: left !important;}
.align-right {text-align: right !important;}
.align-center {text-align: center !important;}
</style>
</head>
<body>
<table>
${document.getElementsByTagName('thead')[0].innerHTML}
${document.getElementsByTagName('tbody')[0].innerHTML}
</table>
</body>
</htmlxmlns:o="urn:schemas-microsoft-com:office:office">`;
因为用了ant，所以在代码中体现的就是 thead 和 tbody 在两个table里面，只能分别放入模板中。
然后就使用fileReader+Blob来转换文件流。因为 fileReader 是读取文件，所以需要先通过Blob将模板转换为类文件，然后通过 fileReader 将其转换为base64。
const fileReader = new FileReader();
// 字符串转blob
const blob = new Blob([`${template}`],{type:"application/vnd.ms-excel;charset=utf-8"});
// blob转成base64
fileReader.readAsDataURL(blob);
fileReader.onloadend = () => {
// 当文件读取完成后，开始
FileSaver.saveAs(fileReader.result, `执行结果-${+new Date()}.xls`);
};
缺陷与优点
先说优点，就是可以设置表格的样式，以及当前工作区的名称。
缺陷：
首先是数字会变成科学记数法。可以通过改样式来解决。
td{
mso-number-format:'\@';
}
此类型为单元格的格式。可以在Excel中设置单元格格式，在自定义中看到。
还有一个缺陷就是，直接获取html标签，如果表格有多页，就无法获取到后面页的数据，需要点击其他页，重新导出。
解决思路就是，将数据自己生成为tbody放入模板中。
方法三 H5 a标签
思路：直接使用a标签的dowload属性下载文件。当前前提是先获取文件的url或者base64.
实现：
首先将数据处理成 csv形式。
const { columns, data } = this.state
let blobData = '\uFEFF'
blobData += `${columns.map(item => `${item.dataIndex}`).join(',')}\n`
data.forEach(item => {
const itemData = []
columns.forEach(ele => {
let val = item[ele.dataIndex] || '-'
if ((+val).toString() === val) {
val = `\t${ val.toString()}`
}
itemData.push(val)
})
blobData += `${itemData.join(',')}\n`
})
然后对处理好的字符串进行编码，并拼接上base64的头信息
const uri = `data:text/csv;charset=utf-8,${encodeURIComponent(blobData)}`;
然后生成一个临时的a标签来执行其点击事件。
const link = document.createElement("a");
link.href = uri;
// 对下载的文件命名
link.download = `执行结果-${+new Date()}.csv`;
document.body.appendChild(link);
link.click();
最后别忘了移除a标签
document.body.removeChild(link);
缺陷
缺陷？不能自定义样式吧。
总结
方法千千万，总有一个适合你。
网友评论