安装依赖
cnpm install --save xlsx file-saver
页面引入
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
添加方法
exportExcel()
{
/* 转换成excel时,使用原始的格式,解决数字列自动转科学计数法问题 */
let xlsxParam = {
raw: true
}; //如果不加这个,会被自动转化格式,如身份证号/手机号,会被转成数字,展示为1.6697E+10
/* out-table关联导出的dom节点 */
let wb = XLSX.utils.table_to_book( document.querySelector( '#out-table' ), xlsxParam );
/* 获取二进制字符串作为输出 */
let wbout = XLSX.write( wb,
{
bookType: 'xlsx',
bookSST: true,
type: 'array'
} );
try
{
/* Blob 对象表示一个不可变、原始数据的类文件对象
Blob 表示的不一定是JavaScript原生格式的数据。
File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
返回一个新创建的 Blob 对象,其内容由参数中给定的数组串联组成。
*/
let excelName = "设置导出文件名称"
FileSaver.saveAs(
new Blob( [ wbout ],
{
type: 'application/octet-stream'
} ),
`${excelName}.xlsx`, //设置导出文件名称
)
}
catch ( e )
{
if ( typeof console !== 'undefined' ) console.log( e, wbout );
}
return wbout;
}
导出事件绑定
<button @click="exportExcel()">导出</button>
给table添加id
<el-table id="out-table" :data="tableData" >
...
</el-table>
本文作为工作笔记记载,参考https://blog.youkuaiyun.com/qq_42739199/article/details/105263191