一，安裝
npm install -S file-saver xlsx
npm install -D script-loader

二，導入Excel
1，Element 上傳控件

<el-uploadaction="/":on-change="onChange":auto-upload="false":show-file-list="false"accept=".xls, .xlsx":style="{'float': 'left'}"><el-button size="small" type="primary">選擇文件</el-button></el-upload> onChange(file, fileList) {// 調用讀取數據的方法let res = this.TableDatalet num = this.totalreadExcel(file, res, num)setTimeout(res => {this.total = this.TableData.length }, 300) }, import XLSX from 'xlsx' //讀取文件數據 // 參數：讀取的文件， 已有數據列表， 已有數據的數量 export function readExcel(files, outputs, num) {if (!files) {//如果沒有文件return false;} else if (!/\.(xls|xlsx)$/.test(files.name.toLowerCase())) {this.$message.error("上傳格式不正確，請上傳xls或者xlsx格式");return false;}let number = 0const fileReader = new FileReader();fileReader.onload = ev => {try {const data = ev.target.result;const workbook = XLSX.read(data, {type: "binary"});//導入的文件名稱const wsname = workbook.SheetNames[0]; //取第一張表const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格內容number = num + ws.length// 存放表頭字段let tableHeader = []for (let val in outputs[0]) {tableHeader.push(val)}// 追加文件內的內容到 outputsfor (let i = 0; i < ws.length; i++) {var sheetData = {}for (let j=0; j<tableHeader.length; j++) {sheetData[tableHeader[j]] = ws[i][tableHeader[j]];}outputs.push(sheetData);}// console.log("outputs", outputs) }catch (e) {console.log(e);return false;}};// 如果為原生 input 則應是 files[0]fileReader.readAsBinaryString(files.raw);setTimeout(res => {return number},10)}

三，導出Excel
1，將其中的2個JS文件放入到自己的工程中。
這幾個文件不支持import引入，所以需要script-loader來將他們掛載到全局環境下
2，導出函數

export function getExcel(res) {// res 是需要導出的列表[{},{}]require.ensure([], () => {const { export_json_to_excel } = require('./Export2Excel')// 獲取全部字段名 作為表頭const filterVal = []const tHeader = []for(let key in res[0]){filterVal.push(key)tHeader.push(key)}// tHeader為導出Excel表頭名稱const data = res.map(v => filterVal.map(j => v[j]))// TableData 即為導出Excel名稱export_json_to_excel(tHeader, data, 'TableData')}) }

這里的引用請根據自己的層級關系和文件夾命名require(’…/…/introduce/Export2Excel.js’)

res為傳入的數組，格式如：res =[{name:‘小白’,age:‘18’},{name:‘小黑’,age:‘16’}]

tHeader為導出Excel表頭名稱，導出列表名稱即為導出Excel名稱

下載的Excel位置根據瀏覽器設置的下載位置而定

總結

以上是生活随笔為你收集整理的Vue+Element导入导出Excel的全部內容，希望文章能夠幫你解決所遇到的問題。

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