vue 導入導出Excel文件（使用js-xlsx庫）

 

官方地址Github
安裝
npm install xlsx --s

簡單二次封裝js-xlsx庫導入導出功能

封裝為excel.js

/* eslint-disable */ import XLSX from 'xlsx'; /** * @description: * @param {Object} json 服務端發過來的數據 * @param {String} name 導出Excel文件名字 * @return: */ function exportExcel(json, name) { /* convert state to workbook */ var data = new Array(); var keyArray = new Array(); for (const key1 in json) { if (json.hasOwnProperty(key1)) { const element = json[key1]; var rowDataArray = new Array(); for (const key2 in element) { if (element.hasOwnProperty(key2)) { const element2 = element[key2]; rowDataArray.push(element2); if (keyArray.length < getLength(element)) { keyArray.push(key2); } } } data.push(rowDataArray); } } data.splice(0, 0, keyArray); const ws = XLSX.utils.aoa_to_sheet(data); const wb = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb, ws, "SheetJS"); /* generate file and send to client */ XLSX.writeFile(wb, name + ".xlsx"); } /** * @description: 導入excel文件並返回數據 * @param {function} 回調函數參數data,dataRef,一個是數據，一個是exce表單的索引 * @return: */ function importExcel(callback) { var inputObj = document.createElement('input') inputObj.setAttribute('id', 'file'); inputObj.setAttribute('type', 'file'); inputObj.setAttribute('name', 'file'); inputObj.setAttribute("style", 'visibility:hidden'); inputObj.setAttribute("accept", ".xlsx,.xls,.csv") inputObj.addEventListener('change', (evt) => { const files = evt.target.files; if (files && files[0]) _file(files[0], (data, dataRef) => { callback(data, dataRef) }); }) document.body.appendChild(inputObj); inputObj.value; inputObj.click(); } /** * @description: 處理文件 * @param {Object} file 文件對象 * @param {function} callback 回調函數 * @return: */ function _file(file, callback) { const make_cols = refstr => Array(XLSX.utils.decode_range(refstr).e.c + 1).fill(0).map((x, i) => ({ name: XLSX.utils.encode_col(i), key: i })); /* Boilerplate to set up FileReader */ const reader = new FileReader(); reader.onload = (e) => { /* Parse data */ const bstr = e.target.result; const wb = XLSX.read(bstr, { type: 'binary' }); /* Get first worksheet */ const wsname = wb.SheetNames[0]; const ws = wb.Sheets[wsname]; /* Convert array of arrays */ const data = XLSX.utils.sheet_to_json(ws, { header: 1 }); /* Update state */ callback(data, make_cols(ws['!ref'])) }; reader.readAsBinaryString(file); } /** * @description: 獲取map的長度 * @param {Object} obj map對象 * @return: map的長度 */ function getLength(obj) { var count = 0; for (var i in obj) { if (obj.hasOwnProperty(i)) { count++; } } return count; } export default { exportExcel, importExcel } 

exportExcel導出文件，importExcel導入文件，參數說明看代碼中注釋

在其他文件使用封裝的js

在App.vue中
首先import文件
import Excel from "./libs/excel.js";
示例導出的json對象，寫在data中

        {
          name: "路人甲",
          phone: "123456789",
          email: "[e-mail]"
        },
        {
          name: "炮灰乙",
          phone: "123456789",
          email: "[e-mail]"
        },
        {
          name: "土匪丙",
          phone: "123456789",
          email: "[e-mail]"
        },
        {
          name: "流氓丁",
          phone: "123456789",
          email: "[e-mail]"
        }
      ]

method中寫對應的方法

exportExcel() { Excel.exportExcel(this.jsonData, "文件"); }, importFile() { Excel.importExcel((data, dataRef) => { alert("數據已經打印在控制台"); console.log(data); console.log(dataRef); }); } 

太簡單了沒寫demo，伸手黨請不要來問demo。有疑問請留意。