Vue 导出Excel表格，并实现合并单元格方法

懒员员 2024-01-05
47 阅读 0 评论 0 点赞

 安装依赖：

"file-saver" 是一个 JavaScript 库，用于在浏览器中保存文件。它提供了一种简单的方式，允许你通过 JavaScript 在客户端创建和下载文件，而无需服务器的参与。使用 file-saver，你可以将生成的数据（例如从后端获取的数据或处理后的数据）保存为文件，让用户可以下载和保存到本地计算机。

cnpm install file-saver --save

 "xlsx" 是用于 Microsoft Excel 文件的文件格式。它代表 "XML Spreadsheet"，常用于存储和处理电子表格数据。在 Web 开发中，你可以使用各种 JavaScript 库来处理 xlsx 文件，提供读取、写入和操作 Excel 文件的功能。

cnpm install xlsx --save

"script-loader" 是一个用于动态加载 JavaScript 脚本的工具。它提供了一种在运行时加载外部 JavaScript 文件的方法，而无需在 HTML 中显式添加 <script> 标签。这对于按需加载特定的 JavaScript 文件或根据条件加载不同的脚本文件很有用。使用 script-loader，你可以在需要时异步加载和执行 JavaScript 代码，以优化页面加载性能和资源利用率。

cnpm install script-loader --save-dev

 下载Export2Excel.js文件 在src下创建目录vassets/Export2Excel.js

以下是下载好的Export2Excel.js文件：

  1. /* eslint-disable */
  2. import { saveAs } from ''file-saver''
  3. import * as XLSX from ''xlsx''
  4.  
  5. function generateArray(table) {
  6.   var out = [];
  7.   var rows = table.querySelectorAll(''tr'');
  8.   var ranges = [];
  9.   for (var R = 0; R < rows.length; ++R) {
  10.     var outRow = [];
  11.     var row = rows[R];
  12.     var columns = row.querySelectorAll(''td'');
  13.     for (var C = 0; C < columns.length; ++C) {
  14.       var cell = columns[C];
  15.       var colspan = cell.getAttribute(''colspan'');
  16.       var rowspan = cell.getAttribute(''rowspan'');
  17.       var cellValue = cell.innerText;
  18.       if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue;
  19.  
  20.       //Skip ranges
  21.       ranges.forEach(function (range) {
  22.         if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) {
  23.           for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);
  24.         }
  25.       });
  26.  
  27.       //Handle Row Span
  28.       if (rowspan || colspan) {
  29.         rowspan = rowspan || 1;
  30.         colspan = colspan || 1;
  31.         ranges.push({
  32.           s: {
  33.             r: R,
  34.             c: outRow.length
  35.           },
  36.           e: {
  37.             r: R + rowspan - 1,
  38.             c: outRow.length + colspan - 1
  39.           }
  40.         });
  41.       };
  42.  
  43.       //Handle Value
  44.       outRow.push(cellValue !== "" ? cellValue : null);
  45.  
  46.       //Handle Colspan
  47.       if (colspan)
  48.         for (var k = 0; k < colspan - 1; ++k) outRow.push(null);
  49.     }
  50.     out.push(outRow);
  51.   }
  52.   return [out, ranges];
  53. };
  54.  
  55. function datenum(v, date1904) {
  56.   if (date1904) v += 1462;
  57.   var epoch = Date.parse(v);
  58.   return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
  59. }
  60.  
  61. function sheet_from_array_of_arrays(data, opts) {
  62.   var ws = {};
  63.   var range = {
  64.     s: {
  65.       c: 10000000,
  66.       r: 10000000
  67.     },
  68.     e: {
  69.       c: 0,
  70.       r: 0
  71.     }
  72.   };
  73.   for (var R = 0; R != data.length; ++R) {
  74.     for (var C = 0; C != data[R].length; ++C) {
  75.       if (range.s.r > R) range.s.r = R;
  76.       if (range.s.c > C) range.s.c = C;
  77.       if (range.e.r < R) range.e.r = R;
  78.       if (range.e.c < C) range.e.c = C;
  79.       var cell = {
  80.         v: data[R][C]
  81.       };
  82.       if (cell.v == null) continue;
  83.       var cell_ref = XLSX.utils.encode_cell({
  84.         c: C,
  85.         r: R
  86.       });
  87.  
  88.       if (typeof cell.v === ''number'') cell.t = ''n'';
  89.       else if (typeof cell.v === ''boolean'') cell.t = ''b'';
  90.       else if (cell.v instanceof Date) {
  91.         cell.t = ''n'';
  92.         cell.z = XLSX.SSF._table[14];
  93.         cell.v = datenum(cell.v);
  94.       } else cell.t = ''s'';
  95.  
  96.       ws[cell_ref] = cell;
  97.     }
  98.   }
  99.   if (range.s.c < 10000000) ws[''!ref''] = XLSX.utils.encode_range(range);
  100.   return ws;
  101. }
  102.  
  103. function Workbook() {
  104.   if (!(this instanceof Workbook)) return new Workbook();
  105.   this.SheetNames = [];
  106.   this.Sheets = {};
  107. }
  108.  
  109. function s2ab(s) {
  110.   var buf = new ArrayBuffer(s.length);
  111.   var view = new Uint8Array(buf);
  112.   for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
  113.   return buf;
  114. }
  115.  
  116. export function export_table_to_excel(id) {
  117.   var theTable = document.getElementById(id);
  118.   var oo = generateArray(theTable);
  119.   var ranges = oo[1];
  120.  
  121.   /* original data */
  122.   var data = oo[0];
  123.   var ws_name = "SheetJS";
  124.  
  125.   var wb = new Workbook(),
  126.     ws = sheet_from_array_of_arrays(data);
  127.  
  128.   /* add ranges to worksheet */
  129.   // ws[''!cols''] = [''apple'', ''banan''];
  130.   ws[''!merges''] = ranges;
  131.  
  132.   /* add worksheet to workbook */
  133.   wb.SheetNames.push(ws_name);
  134.   wb.Sheets[ws_name] = ws;
  135.  
  136.   var wbout = XLSX.write(wb, {
  137.     bookType: ''xlsx'',
  138.     bookSST: false,
  139.     type: ''binary''
  140.   });
  141.  
  142.   saveAs(new Blob([s2ab(wbout)], {
  143.     type: "application/octet-stream"
  144.   }), "test.xlsx")
  145. }
  146.  
  147. export function export_json_to_excel({
  148.   multiHeader = [],
  149.   header,
  150.   data,
  151.   filename,
  152.   merges = [],
  153.   autoWidth = true,
  154.   bookType = ''xlsx''
  155. } = {}) {
  156.   /* original data */
  157.   filename = filename || ''excel-list''
  158.   data = [...data]
  159.   data.unshift(header);
  160.   for (let i = multiHeader.length - 1; i > -1; i--) {
  161.     data.unshift(multiHeader[i])
  162.   }
  163.  
  164.   var ws_name = "SheetJS";
  165.   var wb = new Workbook(),
  166.     ws = sheet_from_array_of_arrays(data);
  167.  
  168.   if (merges.length > 0) {
  169.     if (!ws[''!merges'']) ws[''!merges''] = [];
  170.     merges.forEach(item => {
  171.       ws[''!merges''].push(XLSX.utils.decode_range(item))
  172.     })
  173.   }
  174.  
  175.  
  176.   /* add worksheet to workbook */
  177.   wb.SheetNames.push(ws_name);
  178.   wb.Sheets[ws_name] = ws;
  179.  
  180.   var wbout = XLSX.write(wb, {
  181.     bookType: bookType,
  182.     bookSST: false,
  183.     type: ''binary''
  184.   });
  185.   saveAs(new Blob([s2ab(wbout)], {
  186.     type: "application/octet-stream"
  187.   }), `${filename}.${bookType}`);
  188. }

在组件中使用 

  1. //导出方法
  2. exportExcel () {
  3.   import(''@/assets/Export2Excel'').then(excel => {
  4.     const multiHeader = [[''标题'', '''','''']] // 标题
  5.     const header = [''姓名'', ''年龄'',''手机号''] // 表头
  6.     const filterVal = [''username'', ''age'',''mobile''] // 数据属性
  7.     const list = this.tableData //请求来的数据
  8.     const merges = [''A1:B1''] //需要合并的单元格
  9.     const data = list.map(item => filterVal.map(j => item[j])) // 转换二维数组
  10.     const filename = ''复杂员工列表''
  11.     excel.export_json_to_excel({
  12.       multiHeader, // 标题--非必要
  13.       header, // 表头
  14.       data,  // 具体数据--二维数组
  15.       merges, // 合并--非必要
  16.       filename // 下载文件名
  17.     })
  18.   })
  19. }

tableData数据结构：

  1. tableData: [{
  2.   correctionTime: ''2018-11-30'',
  3.   mobile: ''13800000001'',
  4.   timeOfEntry: ''2025-11-01'',
  5.   username: ''张三'',
  6.   age: ''21''
  7. },
  8. {
  9.   correctionTime: ''2018-11-30'',
  10.   mobile: ''13800000002'',
  11.   timeOfEntry: ''2025-11-01'',
  12.   username: ''李四'',
  13.   age: ''23''
  14. }]

标签： 技术社区

相关文章