怎么在Vue项目中导出Excel

怎么在Vue项目中导出Excel？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

创新互联长期为近1000家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为老边企业提供专业的网站设计制作、网站设计，老边网站改版等技术服务。拥有十多年丰富建站经验和众多成功案例,为您定制开发。

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' //非必填, 导出文件的格式
 })
})

注意

在v3.9.1+以后的版本中移除了对 Bolb 的兼容性代码，如果你还需要兼容很低版本的浏览器可以手动引入blob-polyfill进行兼容。

参数

参数	说明	类型	可选值	默认值
header	导出数据的表头	Array	/	[]
data	导出的具体数据	Array	/	[]
filename	导出文件名	String	/	excel-list
autoWidth	单元格是否要自适应宽度	Boolean	true / false	true
bookType	导出文件类型	String	xlsx, csv, txt, more	xlsx

项目实战

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

目录如下

怎么在Vue项目中导出Excel

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';
   else if (typeof cell.v === 'boolean') cell.t = 'b';
   else if (cell.v instanceof Date) {
    cell.t = 'n';
    cell.z = XLSX.SSF._table[14];
    cell.v = datenum(cell.v);
   } else cell.t = 's';

   ws[cell_ref] = cell;
  }
 }
 if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);
 return ws;
}

function Workbook() {
 if (!(this instanceof Workbook)) return new Workbook();
 this.SheetNames = [];
 this.Sheets = {};
}

function s2ab(s) {
 var buf = new ArrayBuffer(s.length);
 var view = new Uint8Array(buf);
 for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
 return buf;
}

export function export_table_to_excel(id) {
 var theTable = document.getElementById(id);
 var oo = generateArray(theTable);
 var ranges = oo[1];

 /* original data */
 var data = oo[0];
 var ws_name = "SheetJS";

 var wb = new Workbook(),
  ws = sheet_from_array_of_arrays(data);

 /* add ranges to worksheet */
 // ws['!cols'] = ['apple', 'banan'];
 ws['!merges'] = ranges;

 /* add worksheet to workbook */
 wb.SheetNames.push(ws_name);
 wb.Sheets[ws_name] = ws;

 var wbout = XLSX.write(wb, {
  bookType: 'xlsx',
  bookSST: false,
  type: 'binary'
 });

 saveAs(new Blob([s2ab(wbout)], {
  type: "application/octet-stream"
 }), "test.xlsx")
}

export function export_json_to_excel({
 multiHeader = [],
 header,
 data,
 filename,
 merges = [],
 autoWidth = true,
 bookType = 'xlsx'
} = {}) {
 /* original data */
 filename = filename || 'excel-list'
 data = [...data]
 data.unshift(header);

 for (let i = multiHeader.length - 1; i > -1; i--) {
  data.unshift(multiHeader[i])
 }

 var ws_name = "SheetJS";
 var wb = new Workbook(),
  ws = sheet_from_array_of_arrays(data);

 if (merges.length > 0) {
  if (!ws['!merges']) ws['!merges'] = [];
  merges.forEach(item => {
   ws['!merges'].push(XLSX.utils.decode_range(item))
  })
 }

 if (autoWidth) {
  /*设置worksheet每列的最大宽度*/
  const colWidth = data.map(row => row.map(val => {
   /*先判断是否为null/undefined*/
   if (val == null) {
    return {
     'wch': 10
    };
   }
   /*再判断是否为中文*/
   else if (val.toString().charCodeAt(0) > 255) {
    return {
     'wch': val.toString().length * 2
    };
   } else {
    return {
     'wch': val.toString().length
    };
   }
  }))
  /*以第一行为初始值*/
  let result = colWidth[0];
  for (let i = 1; i < colWidth.length; i++) {
   for (let j = 0; j < colWidth[i].length; j++) {
    if (result[j]['wch'] < colWidth[i][j]['wch']) {
     result[j]['wch'] = colWidth[i][j]['wch'];
    }
   }
  }
  ws['!cols'] = result;
 }

 /* add worksheet to workbook */
 wb.SheetNames.push(ws_name);
 wb.Sheets[ws_name] = ws;

 var wbout = XLSX.write(wb, {
  bookType: bookType,
  bookSST: false,
  type: 'binary'
 });
 saveAs(new Blob([s2ab(wbout)], {
  type: "application/octet-stream"
 }), `${filename}.${bookType}`);
}

新建一个exportExcel.vue模板用于导出Excel表格,使用代码如下


   
   
    {{ scope.row.title }}
   
   
    {{ scope.row.foods }}
   
   
    
     {{ scope.row.author }}
    
   
   
    {{ scope.row.pageviews }}
   
   
    
     
     {{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}

export default { name: "exportExcelDialog", data() { return { // 列表内容 list: null, // loding窗口状态 listLoading: true, // 下载loding窗口状态 downloadLoading: false, // 导出文件名称 filename: "", // 导出表格宽度是否auto autoWidth: true, // 导出文件格式 bookType: "xlsx", // 默认导出文件后缀类型 options: ["xlsx", "csv", "txt"] }; }, methods: { // 导出Excel表格 handleDownload() { this.downloadLoading = true; // 懒加载该用法 import("@/vendor/Export2Excel").then(excel => { // 设置导出表格的头部 const tHeader = ["序号", "订单号", "菜品", "收银员", "金额", "时间"]; // 设置要导出的属性 const filterVal = [ "id", "title", "foods", "author", "pageviews", "display_time" ]; // 获取当前展示的表格数据 const list = this.list; // 将要导出的数据进行一个过滤 const data = this.formatJson(filterVal, list); // 调用我们封装好的方法进行导出Excel excel.export_json_to_excel({ // 导出的头部 header: tHeader, // 导出的内容 data, // 导出的文件名称 filename: this.filename, // 导出的表格宽度是否自动 autoWidth: this.autoWidth, // 导出文件的后缀类型 bookType: this.bookType }); this.downloadLoading = false; }); }, // 对要导出的内容进行过滤 formatJson(filterVal, jsonData) { return jsonData.map(v => filterVal.map(j => { if (j === "timestamp") { return this.parseTime(v[j]); } else { return v[j]; } }) ); }, // 过滤时间 parseTime(time, cFormat) { if (arguments.length === 0) { return null; } const format = cFormat || "{y}-{m}-{d} {h}:{i}:{s}"; let date; if (typeof time === "object") { date = time; } else { if (typeof time === "string" && /^[0-9]+$/.test(time)) { time = parseInt(time); } if (typeof time === "number" && time.toString().length === 10) { time = time * 1000; } date = new Date(time); } const formatObj = { y: date.getFullYear(), m: date.getMonth() + 1, d: date.getDate(), h: date.getHours(), i: date.getMinutes(), s: date.getSeconds(), a: date.getDay() }; const timeStr = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => { let value = formatObj[key]; // Note: getDay() returns 0 on Sunday if (key === "a") { return ["日", "一", "二", "三", "四", "五", "六"][value]; } if (result.length > 0 && value < 10) { value = "0" + value; } return value || 0; }); return timeStr; } }, mounted() { // 模拟获取数据 setTimeout(() => { this.list = [ { timestamp: 1432179778664, author: "Charles", comment_disabled: true, content_short: "mock data", display_time: "1994-05-25 23:37:25", foods: "鸡翅、萝卜、牛肉、红烧大闸蟹、红烧鸡翅", id: 1, image_uri: "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3", importance: 3, pageviews: 2864, platforms: ["a-platform"], reviewer: "Sandra", status: "published", title: "O20190407135010000000001", type: "CN" }, { timestamp: 1432179778664, author: "Charles", comment_disabled: true, content_short: "mock data", display_time: "1994-05-25 23:37:25", foods: "鸡翅、萝卜、牛肉、红烧大闸蟹、红烧鸡翅", id: 1, image_uri: "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3", importance: 3, pageviews: 2864, platforms: ["a-platform"], reviewer: "Sandra", status: "published", title: "O20190407135010000000001", type: "CN" }, { timestamp: 1432179778664, author: "Charles", comment_disabled: true, content_short: "mock data", display_time: "1994-05-25 23:37:25", foods: "鸡翅、萝卜、牛肉、红烧大闸蟹、红烧鸡翅", id: 1, image_uri: "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3", importance: 3, pageviews: 2864, platforms: ["a-platform"], reviewer: "Sandra", status: "published", title: "O20190407135010000000001", type: "CN" }, { timestamp: 1432179778664, author: "Charles", comment_disabled: true, content_short: "mock data", display_time: "1994-05-25 23:37:25", foods: "鸡翅、萝卜、牛肉、红烧大闸蟹、红烧鸡翅", id: 1, image_uri: "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3", importance: 3, pageviews: 2864, platforms: ["a-platform"], reviewer: "Sandra", status: "published", title: "O20190407135010000000001", type: "CN" }, { timestamp: 1432179778664, author: "Charles", comment_disabled: true, content_short: "mock data", display_time: "1994-05-25 23:37:25", foods: "鸡翅、萝卜、牛肉、红烧大闸蟹、红烧鸡翅", id: 1, image_uri: "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3", importance: 3, pageviews: 2864, platforms: ["a-platform"], reviewer: "Sandra", status: "published", title: "O20190407135010000000001", type: "CN" }, { timestamp: 1432179778664, author: "Charles", comment_disabled: true, content_short: "mock data", display_time: "1994-05-25 23:37:25", foods: "鸡翅、萝卜、牛肉、红烧大闸蟹、红烧鸡翅", id: 1, image_uri: "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3", importance: 3, pageviews: 2864, platforms: ["a-platform"], reviewer: "Sandra", status: "published", title: "O20190407135010000000001", type: "CN" }, { timestamp: 1432179778664, author: "Charles", comment_disabled: true, content_short: "mock data", display_time: "1994-05-25 23:37:25", foods: "鸡翅、萝卜、牛肉、红烧大闸蟹、红烧鸡翅", id: 1, image_uri: "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3", importance: 3, pageviews: 2864, platforms: ["a-platform"], reviewer: "Sandra", status: "published", title: "O20190407135010000000001", type: "CN" }, { timestamp: 1432179778664, author: "Charles", comment_disabled: true, content_short: "mock data", display_time: "1994-05-25 23:37:25", foods: "鸡翅、萝卜、牛肉、红烧大闸蟹、红烧鸡翅", id: 1, image_uri: "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3", importance: 3, pageviews: 2864, platforms: ["a-platform"], reviewer: "Sandra", status: "published", title: "O20190407135010000000001", type: "CN" }, { timestamp: 1432179778664, author: "Charles", comment_disabled: true, content_short: "mock data", display_time: "1994-05-25 23:37:25", foods: "鸡翅、萝卜、牛肉、红烧大闸蟹、红烧鸡翅", id: 1, image_uri: "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3", importance: 3, pageviews: 2864, platforms: ["a-platform"], reviewer: "Sandra", status: "published", title: "O20190407135010000000001", type: "CN" } ]; this.listLoading = false; }, 2000); }, filters: { // 过滤时间 parseTime(time, cFormat) { if (arguments.length === 0) { return null; } const format = cFormat || "{y}-{m}-{d} {h}:{i}:{s}"; let date; if (typeof time === "object") { date = time; } else { if (typeof time === "string" && /^[0-9]+$/.test(time)) { time = parseInt(time); } if (typeof time === "number" && time.toString().length === 10) { time = time * 1000; } date = new Date(time); } const formatObj = { y: date.getFullYear(), m: date.getMonth() + 1, d: date.getDate(), h: date.getHours(), i: date.getMinutes(), s: date.getSeconds(), a: date.getDay() }; const timeStr = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => { let value = formatObj[key]; // Note: getDay() returns 0 on Sunday if (key === "a") { return ["日", "一", "二", "三", "四", "五", "六"][value]; } if (result.length > 0 && value < 10) { value = "0" + value; } return value || 0; }); return timeStr; } } }

效果图如下

怎么在Vue项目中导出Excel

关于怎么在Vue项目中导出Excel问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注创新互联行业资讯频道了解更多相关知识。

网页标题：怎么在Vue项目中导出Excel
转载源于：http://dzwzjz.com/article/jddpoi.html

大橙子网站建设，新征程启航

怎么在Vue项目中导出Excel

其他资讯