vue ele ui 数据导出成Excel表

最新推荐文章于 2024-03-31 12:28:52 发布

原创

最新推荐文章于 2024-03-31 12:28:52 发布 · 600 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #es6

本文介绍了如何在 Vue.js 项目中利用 ele-ui 库和 js-xlsx 实现数据导出为 Excel 表格的功能。首先，需要安装相关依赖，如 js-xlsx、file-saver 和 script-loader。为了优化加载，建议使用懒加载。在项目中创建 Export2Excel.js 文件封装导出逻辑，并在需要导出的表格组件中调用，将数据传入即可完成导出。

vue eleui 数据导出成Excel表
今天写需求遇到这个问题，果断百度下，百度大法好啊，
这里贴上大佬的链接 : 链接.

首先
Excel 的导入导出都是依赖于js-xlsx来实现的。
在 js-xlsx的基础上又封装了Export2Excel.js来方便导出数据。

由于 Export2Excel不仅依赖js-xlsx还依赖file-saver和script-loader。
所以你先需要安装如下命令

npm install xlsx file-saver -S
npm install script-loader -S -D

由于js-xlsx体积还是很大的，导出功能也不是一个非常常用的功能，所以使用的时候建议使用懒加载。使用方法如下：

import('@/vendor/Export2Excel').then(excel => {
   
   
    excel.export_json_to_excel({
   
   
     header: tHeader, //表头 必填
     data, //具体数据 必填
     filename: 'excel-list', //非必填, 导出文件的名字
     autoWidth: true, //非必填, 导出文件的排列方式
     bookType: 'xlsx' //非必填, 导出文件的格式
    })
})

下面是一些基本参数
在这里插入图片描述

使用脚手架搭建出基本项目雏形,这时候在src目录下新建一个vendor(文件名自己定义)文件夹,新建一个Export2Excel.js文件,这个文件里面在js-xlsx的基础上又封装了Export2Excel.js来方便导出数据。

目录如下
在这里插入图片描述

Export2Excel.js代码如下

require('script-loader!file-saver');
import XLSX from 'xlsx'

function generateArray(table) {
   
   
 var out = [];
 var rows = table.querySelectorAll('tr');
 var ranges = [];
 for (var R = 0; R < rows.length; ++R) {
   
   
  var outRow = [];
  var row = rows[R];
  var columns = row.querySelectorAll('td');
  for (var C = 0; C < columns.length; ++C) {
   
   
   var cell = columns[C];
   var colspan = cell.getAttribute('colspan');
   var rowspan = cell.getAttribute('rowspan');
   var cellValue = cell.innerText;
   if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue;

   //Skip ranges
   ranges.forEach(function (range) {
   
   
    if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) {
   
   
     for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);
    }
   });

   //Handle Row Span
   if (rowspan || colspan) {
   
   
    rowspan = rowspan || 1;
    colspan = colspan || 1;
    ranges.push({
   
   
     s: {
   
   
      r: R,
      c: outRow.length
     },
     e: {
   
   
      r: R + rowspan - 1,
      c: outRow.length + colspan - 1
     }
    });
   };

   //Handle Value
   outRow.push(cellValue !== "" ? cellValue : null);

   //Handle Colspan
   if (colspan)
    for (var k = 0; k < colspan - 1; ++k) outRow.push(null);
  }
  out.push(outRow);
 }
 return [out, ranges];
};

function datenum(v, date1904) {
   
   
 if (date1904) v += 1462;
 var epoch = Date.parse(v);
 return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
}

function sheet_from_array_of_arrays(data, opts) {
   
   
 var ws = {
   
   };
 var range = {
   
   
  s: {
   
   
   c: 10000000,
   r: 10000000
  },
  e: {
   
   
   c: 0,
   r: 0
  }
 };
 for (var R = 0; R != data.length; ++R) {
   
   
  for (var C = 0; C != data[R].length; ++C) {
   
   
   if (range.s.r > R) range.s.r = R;
   if (range.s.c > C) range.s.c = C;
   if (range.e.r < R) range.e.r = R;
   if (range.e.c < C) range.e.c = C;
   var cell = {
   
   
    v: data[R][C]
   };
   if (cell.v == null) continue;
   var cell_ref = XLSX.utils.encode_cell({
   
   
    c: C,
    r: R
   });

   if (typeof cell.v === 'number') cell.t = 'n'