前端页面直接导出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');
    }
相关推荐
JNU freshman14 分钟前
vue 之 import 的语法
前端·javascript·vue.js
剑亦未配妥15 分钟前
Vue 2 响应式系统常见问题与解决方案(包含_demo以下划线开头命名的变量导致响应式丢失问题)
前端·javascript·vue.js
爱吃的强哥18 分钟前
Vue2 封装二维码弹窗组件
javascript·vue.js
凉柚ˇ18 分钟前
Vue图片压缩方案
前端·javascript·vue.js
慧一居士18 分钟前
vue 中 directive 作用,使用场景和使用示例
前端
慧一居士20 分钟前
vue 中 file-saver 功能介绍,使用场景,使用示例
前端
ByteCraze33 分钟前
秋招被问到的常见问题
开发语言·javascript·原型模式
渣哥1 小时前
从代理到切面:Spring AOP 的本质与应用场景解析
javascript·后端·面试
文心快码BaiduComate1 小时前
文心快码3.5S实测插件开发,Architect模式令人惊艳
前端·后端·架构
UIUV1 小时前
JavaScript代理模式实战解析:从对象字面量到情感传递的优雅设计
javascript