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表示表格的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} };

直接全部復制就好。

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和方法下面一致就可以。

在導出按鈕，綁定剛剛的方法名字，通過點擊事件觸發就可以啦。
效果最后

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。