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

2020-12-18  本文已影响0人  饿了么配送员

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;
    },
正确的格式
上一篇 下一篇

猜你喜欢

热点阅读