vue把數據導出為Excel表格的方法

由于項目中要用到把數據導出為Excel的需求，自己用完之后做一個小結，這是比較簡單的使用方法，主要用到export2Excel、file-saver和xlsx的的插件，以下是實現的步驟：

1.創建一個vue實例，并在vue實例中創建一個按鈕，用來測試導出功能

<el-button size="small" type="Pprimary" @click="exportToExcel">導出</el-button>

2.用export2Excel.js文件（百度搜索），配合file-saver文件（file-saver在gitee搜索肖嘉騰版的）,并且需要安裝xlsx插件

//xlsx安裝命令 npm i xlsx

3.在export2Excel.js引入file-saver文件中的saveAs和xlsx插件

import { saveAs } from '@/utils/FileSaver.min.js' import * as XLSX from 'xlsx'

4.在需要文件導出的vue實例引入export2Excel.js的export_json_to_excel 方法

import { export_json_to_excel } from '@/utils/Export2Excel'

5.export_json_to_excel 需要的數據有header和data，我們只是簡單的測試，所以把需要的數據定義成這兩個參數即可（其他參數需要可以自行設置）；export_json_to_excel 方法是將一段 json 數據對象導出成 excel ，當然還有將一個原生table表格導出成 excel方法是export_table_to_excel ；

• object.keys（）方法是獲取對象的鍵（‘姓名’: 'username’中的姓名）,返回的是一個數組

  //object.keys（）方法舉例： const object1 = {a: 'somestring',b: 42,c: false };console.log(Object.keys(object1)); // expected output: Array ["a", "b", "c"] //結

//使用測試 export default {method：{exportToExcel（）{ //通過數據枚舉的方法，把表頭和data定義好，下面這些方法可以把表頭的英文名數據轉換為中文名 const testData = {'日期': 'time','手機號': 'mobile','姓名': 'username'}const header = Object.keys(testData)const data = res.rows.map(user => {const userArr = []for (const key in testData) {const newKey = testData[key]userArr.push(user[newKey])}return userArr}) //把定義好的header和data放進export_json_to_excel的函數里作為參數export_json_to_excel({header,data}) //提供一個簡單的測試數據，測試時注意要把上面數據注釋掉export_json_to_excel({header: ['姓名', '年齡'],data: [['tom', 12],['jerry', 13]]})}} }

• 這是測試數據打印出來的內容

姓名年齡

tom	12
jerry	13

親測有效，快點試試吧！

總結

以上是生活随笔為你收集整理的vue把数据导出为Excel表格的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

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