前端页面直接导出Excel方案

方案1

纯原生js在页面实现 导出 .xls格式

javascript 复制代码
    toContentPrintExcel22(e) {
      // 获取页面内容
      this.name = this.$t(this.selectReport.name);

      // 打印内容部分-区分类型,利润和其他
      let tableHtml = document.querySelectorAll('#excelContent table')[0].innerHTML;
    
      // 创建a标签
      const linkNode = document.createElement('a');
      linkNode.download = this.name;
      linkNode.style.display = 'none';

      // 利用Blob对象将字符内容转变成二进制数据
      const exportHtml = `<!DOCTYPE html>
                    <html lang="en">
                    <head>
                    <meta charset="UTF-8">
                    <title>Title</title>
                    <style>
                      font-family: 宋体;
                      table{
                          text-align:center;
                      }
                    </style>
                    </head>
                    <body>
                    <table>
                    <tr><td>${tableHtml}</td></tr>
                    </table>
                    <div>&nbsp;&nbsp;</div>
                    </body>
                </html>`;
      const blob = new Blob([exportHtml], { type: 'application/vnd.ms-excel' });
      linkNode.href = URL.createObjectURL(blob);
      // 点击
      document.body.appendChild(linkNode);
      linkNode.click();
      // 移除
      document.body.removeChild(linkNode);
    },

方案2(推荐,xlsx格式兼容office)

安装vue组件 xlsx

  1. 环境

npm install xlsx

  1. 模块中引入

import * as XLSX from 'xlsx';

  1. 代码调用
javascript 复制代码
exportExcel(filename) {
      const xlsxParam = { raw: true }; // 导出的内容只做解析,不进行格式转换

// excelContent,table外层的id名
      const workbook = XLSX.utils.table_to_book(document.getElementById('excelContent'), xlsxParam);
      
      // 自带的快捷写法 XLSX.writeFile
      XLSX.writeFile(workbook, filename + '.xlsx');
    },

方案3

安装vue组件 xlsx, file-saver

  1. 环境

npm install xlsx

npm install file-saver

  1. 模块中引入

import * as XLSX from 'xlsx';

import FileSaver from 'file-saver';

  1. 代码调用
javascript 复制代码
  exportExcel(filename) {
      const xlsxParam = { raw: true }; // 导出的内容只做解析,不进行格式转换
      const workbook = XLSX.utils.table_to_book(document.getElementById('excelContent'), xlsxParam);

      /* 获取二进制字符进行输出 */
      // 使用组件FileSaver的写法
      const wbOut = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
      });
      try {
        FileSaver.saveAs(
          new Blob([wbOut], { type: 'application/octet-stream' }),
          filename + '.xlsx'
        );
      } catch (e) {
        if (typeof console !== 'undefined') {
          console.log(e, wbOut);
        }
      }
      return wbOut;

    },

拓展: 多张 sheet 导出

javascript 复制代码
   exportMultiExcel(filename) {
      const xlsxParam = { raw: true };
      // 转换成excel时,使用原始的格式,这样导出的时候数字过长不会变成科学计数法
      const workbook = XLSX.utils.book_new();

      // 这里开始添加多个sheet页 - 用于报表-销售-利润页面
      const ws1 = XLSX.utils.table_to_sheet(document.querySelector('#revenue1'), xlsxParam);
      XLSX.utils.book_append_sheet(workbook, ws1, 'sheet1');
      const ws2 = XLSX.utils.table_to_sheet(document.querySelector('#revenue2'), xlsxParam);
      XLSX.utils.book_append_sheet(workbook, ws2, 'sheet2');
      const ws3 = XLSX.utils.table_to_sheet(document.querySelector('#revenue3'), xlsxParam);
      XLSX.utils.book_append_sheet(workbook, ws3, 'sheet3');

      XLSX.writeFile(workbook, filename + '.xlsx');
    }
相关推荐
SchuylerEX3 分钟前
第六章 JavaScript 互操(3)JS调用.NET
前端·javascript·c#·.net·blazor
默默地离开6 分钟前
从0到1掌握React+TypeScript开发:前端工程化实践指南
前端·react.js·typescript
Spider_Man7 分钟前
手指一拉,世界焕新:移动端下拉刷新全攻略
前端·javascript·react.js
恋猫de小郭9 分钟前
Flutter 里的 Layer 解析,带你了解不一样角度下的 Flutter 渲染逻辑
android·前端·flutter
1phoenix10 分钟前
JavaScript 实现自定义右键菜单
前端·javascript·css
迷你二鹏11 分钟前
前端之Git
前端·git
二闹25 分钟前
大厂前端研发岗位设计的30道Webpack面试题及解析
前端·面试
拾光拾趣录31 分钟前
实现 `this` 对象的深拷贝:从“循环引用崩溃”到生产级解决方案
前端·javascript
无羡仙32 分钟前
90%的人都在用的下拉刷新,我把它拆了!
前端·node.js
一念杂记33 分钟前
【实战系列】30分钟开发微信小程序登录&注册&绑定功能
前端·后端·微信小程序