13.记录Vue项目导出excel出现的问题

1,首先引入 XLSX 和 FileSaver 插件

yarn add xlsx file-saver -S

2,在需要使用的页面 import

import FileSaver from 'file-saver'
import XLSX from 'xlsx'

3,出现的问题,导出的数据会被自动转换等。如下图 数据含有 - 特殊符号时数据变为日期格式


table格式
<Table id="tab"></Table>
//导出Excel
    exportToExcel () {
        let self = this;
        let et = XLSX.utils.table_to_book(document.getElementById('tab')); //此处传入table的DOM节点
        let etout = XLSX.write(et, { 
            bookType: 'xlsx', 
            bookSST: true, 
            type: 'array' 
        });
        try {
            FileSaver.saveAs(new Blob([etout], { 
                type: 'application/octet-stream' 
            }),  ' 统计.xlsx');   //统计.xlsx 为导出的文件名
            self.$Message.info("导出Excel成功");
        } catch (e) {
            console.log(e, etout) ;
            self.$Message.error("导出Excel失败,请刷新后重试");
        }
        return etout;
    },
错误的格式
<Table id="tab"></Table>
//导出Excel
exportToExcel () {
        let self = this;
        let xlsxParam = { raw: true };  // 转换excel时使用原始格式
        let et = XLSX.utils.table_to_book(document.getElementById('tab'),xlsxParam); //此处传入table的DOM节点
        let etout = XLSX.write(et, { 
            bookType: 'xlsx', 
            bookSST: true, 
            type: 'array' 
        });
        try {
            FileSaver.saveAs(new Blob([etout], { 
                type: 'application/octet-stream;charset=utf-8' 
            }),  ' 统计.xlsx');   //统计.xlsx 为导出的文件名
            self.$Message.info("导出Excel成功");
        } catch (e) {
            console.log(e, etout) ;
            self.$Message.error("导出Excel失败,请刷新后重试");
        }
        return etout;
    },
正确的格式
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容