element-ui table 使用xlsx插件 导出Excel，使用原始的格式，解决数字列自动转科学计数法问题

安装依赖

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.csdn.net/qq_42739199/article/details/105263191