vue導(dǎo)出Excel表格（超級(jí)簡(jiǎn)潔）

• • 1.下載依賴(lài)
  • 2.新建一個(gè)js文件夾放編寫(xiě)的js
  • 3.然后再main.js里面引入剛剛寫(xiě)好的那個(gè)js文件
  • 4.在頁(yè)面編寫(xiě)代碼

作者呢是使用的一個(gè)插件。

1.下載依賴(lài)

npm install --save xlsx file-saver

2.新建一個(gè)js文件夾放編寫(xiě)的js

在src下面新建就可以

然后再htmlToExcel.js下編寫(xiě)咱們的代碼

import FileSaver from 'file-saver'; import XLSX from 'xlsx'; export default {// 導(dǎo)出Excel表格exportExcel(name, tableName) {//name表示生成excel的文件名 tableName表示表格的idvar 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} };

直接全部復(fù)制就好。

3.然后再main.js里面引入剛剛寫(xiě)好的那個(gè)js文件

//全局導(dǎo)出excel import htmlToExcel from './excel/htmlToExcel';//剛剛寫(xiě)好的那個(gè)js文件的路徑 Vue.prototype.htmlToExcels = htmlToExcel;

4.在頁(yè)面編寫(xiě)代碼

methods里面編寫(xiě)下面方法

exportExcel() {this.htmlToExcels.exportExcel("澇情處理報(bào)告.xlsx", "#vcfResult");//第一個(gè)引號(hào)里面是表格導(dǎo)出時(shí)的名字//第二個(gè)是表格的id，這個(gè)插件是通過(guò)id導(dǎo)出的}

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

在導(dǎo)出按鈕，綁定剛剛的方法名字，通過(guò)點(diǎn)擊事件觸發(fā)就可以啦。
效果最后

總結(jié)

以上是生活随笔為你收集整理的vue导出Excel表格（超级简洁）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。