前端页面直接导出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');
    }
相关推荐
孤水寒月4 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀4 小时前
html初学者第一天
前端·html
脑袋大大的5 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络6 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘6 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way6 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
视频砖家7 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689977 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽9 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头9 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github