Vue實(shí)現(xiàn)Excel預(yù)覽功能使用場(chǎng)景示例詳解

更新時(shí)間：2023年09月07日 10:39:46 作者：光法V3

這篇文章主要為大家介紹了Vue實(shí)現(xiàn)Excel預(yù)覽功能使用場(chǎng)景示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

使用場(chǎng)景

項(xiàng)目中經(jīng)常能遇到要求預(yù)覽excel文件的需求，下面分享一下常用的方法以及可能遇到的問(wèn)題。

通過(guò)解析excel功能，實(shí)現(xiàn)PDF導(dǎo)入時(shí)的預(yù)覽

首先我們用到了XLSX（sheetJs）這個(gè)庫(kù)來(lái)處理Excel類(lèi)型的文件

地址：

https://docs.sheetjs.com/

https://www.npmjs.com/package/xlsx

支持大部分的現(xiàn)代瀏覽器版本

具體使用

下載： npm i xlsx

首先我們獲取一Excel類(lèi)型的文件。

這里我直接用了el-upload組件返回的文件

然后使用FileReader讀取文件，注冊(cè)初始化onload方法，并且在其onload方法中使用xlsx庫(kù)處理文件;

首先使用xlsx的read方法，配置處理的詳情。

const workbook = XLSX.read(data, {
      type: "binary",
      cellText: false,
      cellDates: true,
    });

再輪詢(xún)讀取文件

for (let sheet in workbook.Sheets) {
      //循環(huán)讀取每個(gè)文件
      const header = XLSX.utils.sheet_to_json(workbook.Sheets[sheet], {
        header: 1,
      });
      const sheetArray = XLSX.utils.sheet_to_json(
        workbook.Sheets[sheet],
        // 配置單元的數(shù)據(jù)轉(zhuǎn)換方法，dateNF不生效
        { raw: true, cellDates: true, dateNF: "yyyy/mm/dd" }
      );
      //若當(dāng)前sheet沒(méi)有數(shù)據(jù)，則continue
      if (sheetArray.length == 0) {
        continue;
      }
      this.tableHeader = header[0];
      this.handleNetX(sheetArray, header[0]);
    }
  } catch (e) {
    this.$message.warning("上傳失敗");
  }

注意sheet_to_json方法中此時(shí)cellDates配置為true之后，如果excel文件內(nèi)的數(shù)據(jù)類(lèi)型為時(shí)間，會(huì)被轉(zhuǎn)成Date格式。

官方文檔中允許配置dateNF來(lái)進(jìn)行時(shí)間格式化，但是實(shí)際使用起來(lái)并沒(méi)有效果。

所以針對(duì)時(shí)間格式的處理，筆者這里直接轉(zhuǎn)為Date格式，在后續(xù)過(guò)程中進(jìn)行了手動(dòng)處理。

我們初始化load方法后，將excel文件源文件，轉(zhuǎn)為bolb格式，在塞給fileReader.readAsBinaryString，進(jìn)行文件處理方法的執(zhí)行。

const blob = new Blob([file.raw]);
      fileReader.readAsBinaryString(blob);

最后輪詢(xún)sheetArray來(lái)進(jìn)行數(shù)據(jù)的二次處理，最后得到前端可以使用的Array類(lèi)型的文件，展示在頁(yè)面中或者展示在表單中。

時(shí)間格式處理

處理時(shí)間的方法寫(xiě)的比較簡(jiǎn)單，主要就是判斷了Date的object類(lèi)型，來(lái)格式化日期類(lèi)型

handleNetX(sheetArray, header) {
      const totalTable = [];
      for (let index in sheetArray) {
        let row = {};
        header.map(index1 => {
          const tempKey = this.mapTableTitle[index1];
          if (typeof sheetArray[index][index1] === "object") {
            row[tempKey] = this.handleExcelDate(sheetArray[index][index1]);
          } else {
            row[tempKey] = sheetArray[index][index1];
          }
        });
        totalTable.push(row);
      }
      this.tableData = totalTable;
    },
    handleExcelDate(date) {
      if (!date) {
        return;
      }
      return formatDate(date.getTime(), "YYYY/MM/DD");
    },

代碼總結(jié)

async handleChangePre(file) {
      this.file = file;
      this.showResult = false;
      const fileReader = new FileReader();
      fileReader.onload = ev => {
        try {
          const data = ev.target.result;
          const workbook = XLSX.read(data, {
            type: "binary",
            cellText: false,
            cellDates: true,
          });
          for (let sheet in workbook.Sheets) {
            //循環(huán)讀取每個(gè)文件
            const header = XLSX.utils.sheet_to_json(workbook.Sheets[sheet], {
              header: 1,
            });
            const sheetArray = XLSX.utils.sheet_to_json(
              workbook.Sheets[sheet],
              { raw: true, cellDates: true, dateNF: "yyyy/mm/dd" }
            );
            //若當(dāng)前sheet沒(méi)有數(shù)據(jù)，則continue
            if (sheetArray.length == 0) {
              continue;
            }
            this.tableHeader = header[0];
            console.log(sheetArray, "sheetArray");
            this.handleNetX(sheetArray, header[0]);
          }
        } catch (e) {
          this.$message.warning("上傳失敗");
        }
      };
      const blob = new Blob([file.raw]);
      fileReader.readAsBinaryString(blob);
    },

以上就是Vue實(shí)現(xiàn)Excel預(yù)覽功能使用場(chǎng)景示例詳解的詳細(xì)內(nèi)容，更多關(guān)于Vue Excel預(yù)覽功能的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: