js表格导出excel,含多个sheet

1. 首先安装

npm install xlsx --save

//如果报错请下载最新版本
//比如
npm install xlsx@0.14.5 --save
或者更高

2. 在组件中引用 xlsx

import XLSX from 'xlsx';

3.提供导出按钮,编写导出方法

<el-button type="success" size="mini" @click="btnClickExport">导出</el-button>

4.js部分

            //导出按钮
            btnClickExport() {
                  let obj = new Object();
                    obj["ProjectNo"] = this.projectNo;
                    obj["ProjectName"] = this.projectName;
                    obj["EasNo"] = this.easNo;
                    obj["EasName"] = this.easName;
                    obj["CashflowRemark"] = this.cashflowRemark;
                    this.reportsDataTitle.push(obj);

                    // this.reportsDataTitle =[] 数据格式在下面
                    var Title = this.reportsDataTitle; 

                    var Cash = this.reportsDataCash;//表格
                    var CashFlow = this.reportsDataFlow;//表格
                    var sheet1 = XLSX.utils.json_to_sheet(Title);
                    var sheet2 = XLSX.utils.json_to_sheet(Cash);
                    var sheet3 = XLSX.utils.json_to_sheet(CashFlow);


                    var wb = XLSX.utils.book_new();
                    XLSX.utils.book_append_sheet(wb, sheet1, "Title");
                    XLSX.utils.book_append_sheet(wb, sheet2, "Cash");
                    XLSX.utils.book_append_sheet(wb, sheet3, "Cashflow");
                    const workbookBlob = this.workbook2blob(wb);

                    //获取当前时间
                    var date = new Date();
                    var year = date.getFullYear();
                    var month = date.getMonth() + 1;
                    var day = date.getDate();
                    if (month < 10) {
                        month = "0" + month;
                    }
                    if (day < 10) {
                        day = "0" + day;
                    }
                    var hours = date.getHours();
                    var minute = date.getMinutes();
                    var second = date.getSeconds();

                    var nowDate = year.toString() + month.toString() + day.toString() + hours.toString() + minute.toString() + second.toString();

                    this.openDownloadDialog(workbookBlob, 'Cashflow报告_' + nowDate + '.xlsx');
            },
            workbook2blob(workbook) {
                // 生成excel的配置项
                var wopts = {
                    // 要生成的文件类型
                    bookType: "xlsx",
                    // // 是否生成Shared String Table,官方解释是,如果开启生成速度会下降,但在低版本IOS设备上有更好的兼容性
                    bookSST: false,
                    type: "binary"
                };
                var wbout = XLSX.write(workbook, wopts);
                // 将字符串转ArrayBuffer
                function s2ab(s) {
                    var buf = new ArrayBuffer(s.length);
                    var view = new Uint8Array(buf);
                    for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
                    return buf;
                }
                var blob = new Blob([s2ab(wbout)], {
                    type: "application/octet-stream"
                });
                return blob;
            },
            openDownloadDialog(blob, fileName) {
                if (typeof blob == "object" && blob instanceof Blob) {
                    blob = URL.createObjectURL(blob); // 创建blob地址
                }
                var aLink = document.createElement("a");
                aLink.href = blob;
                // HTML5新增的属性,指定保存文件名,可以不要后缀,注意,有时候 file///模式下不会生效
                aLink.download = fileName || "";
                var event;
                if (window.MouseEvent) event = new MouseEvent("click");
                //   移动端
                else {
                    event = document.createEvent("MouseEvents");
                    event.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                }
                aLink.dispatchEvent(event);
            },

注:要导出数据的 json 格式应该是这样的(每个对象代表表格中的一行数据)

reportsDataTitle:[{
  ProjectNo: '21-10093',
  ProjectName: '',
  EasNo: '2021052',
  EasName: '算单',
  CashflowRemark: ''
}, {
  // ...
}]

 this.reportsDataTitle 导出效果

 导出多个sheet页效果

  • 7
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值