vue导出Excel表格（超级简洁）

• • 1.下载依赖
  • 2.新建一个js文件夹放编写的js
  • 3.然后再main.js里面引入刚刚写好的那个js文件
  • 4.在页面编写代码

作者呢是使用的一个插件。

1.下载依赖

npm install --save xlsx file-saver
           

2.新建一个js文件夹放编写的js

在src下面新建就可以

然后再htmlToExcel.js下编写咱们的代码

import FileSaver from 'file-saver';
import XLSX from 'xlsx';
export default {
  // 导出Excel表格
  exportExcel(name, tableName) {
    //name表示生成excel的文件名     tableName表示表格的id
    var sel = XLSX.utils.table_to_book(document.querySelector(tableName))
    var selIn = XLSX.write(sel, { bookType: 'xlsx', bookSST: true, type: 'array' })
    try {
      FileSaver.saveAs(new Blob([selIn], { type: 'application/octet-stream' }), name)
    } catch (e) {
      if (typeof console !== 'undefined') console.log(e, selIn) 
    }
    return selIn
  }
};

           

直接全部复制就好。

3.然后再main.js里面引入刚刚写好的那个js文件

//全局导出excel
import htmlToExcel from './excel/htmlToExcel';//刚刚写好的那个js文件的路径
Vue.prototype.htmlToExcels = htmlToExcel;
           

4.在页面编写代码

methods里面编写下面方法

exportExcel() {
      this.htmlToExcels.exportExcel("涝情处理报告.xlsx", "#vcfResult");
      //第一个引号里面是表格导出时的名字
      //第二个是表格的id，这个插件是通过id导出的
    }
           

这是我定义的自己表格的id，我在这用的是viewUI，大家用别的，包括原生，ele都可以，id和方法下面一致就可以。

在导出按钮，绑定刚刚的方法名字，通过点击事件触发就可以啦。

效果最后