1. 程式人生 > 程式設計 >詳解如何實現在Vue中匯入Excel檔案

詳解如何實現在Vue中匯入Excel檔案

目錄
  • 一、安裝依賴
  • 二、template中
  • 三、script中程式碼

以將此Excel匯出為json資料為例

詳解如何實現在Vue中匯入Excel檔案

一、安裝依賴

npm install file-saver --save
npm install xlsx --save
npm install script-loader --save-dev

二、template中

<span>匯入表格</span>
<input id="upload" type="file" @change="importfxx()"  accept=".csv,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" />

三、script中js程式碼

methods:{
   // 處理匯入Excel中日期問題
    formatDate(numb,format) {
      const time = new Date((numb - 1) * 24 * 3600000 + 1);
      time.setYear(time.getFullYear() - 70);
      const year = time.getFullYear() + "";
      const month = time.getMonth() + 1 + "";
      const date = time.getDate() - 1 + "";
      if (format && format.length === 1) {
        return year + format + month + format + date;
      }
      return (
        year +
        (month < 10 ? "0" + month : month) +
        (date < 10 ? "0" + date : date)
      );
    },// 匯入Excel
    importfxx() {
      le
t _this = this; let f = event.currentTarget.files[0]; let rABS = false; //是否將檔案讀取為二進位制字串 let reader = new FileReader(); //if (!FileReader.prototype.readAsBinaryString) { FileReader.prototype.readAsBinaryString = function (f) { let binary = ""; let rABS = false; //是否PwYEhHmKYs
將檔案讀取為二進位制字串 let wb; //讀取完成的資料 let outdata; let reader = new FileReader(); reader.onload = function (e) { let bytes = new Uint8Array(reader.result); let length = bytes.byteLength; for (let i = 0; i < length; i++) { binary += String.fromCharCode(bytes[i]); } let XLSX = require("xlsx"); if (rABS) { wb = XLSX.read(btoa(fixdata(binary)),{ //手動轉化 type: "base64",}); } else { wb = XLSX.read(binary,{ type: "binary",}); } outdata = XLSXPwYEhHmKYs.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]); //outdata就是你想要的東西 const keyObj = { 序號: "id", 情況跟蹤: "track",日期: "date",標題: "title",狀態: "status",結果: "result",預警: "warning",}; outdata.forEach((item) => { // 將中文的鍵名替換成英文的 for (let k in keyObj) { let newKey = keyObj[k]; if (newKey) { item[newKey] = item[k]; delete item[k]; } } item["date"] = _this.formatDate(item["date"],"-"); }); console.log(outdata); }; reader.readAsArrayBuffer(f); }; if (rABS) { reader.readAsArrayBuffer(f); } else { reader.readAsBinaryString(f); } },}

如上操作之後,列印結果是如下

詳解如何實現在Vue中匯入Excel檔案

到此這篇關於詳解如何實現在中匯入Excel檔案的文章就介紹到這了,更多相關Vue匯入Excel檔案內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!