vue预览xlsx

预览文件的数据流从服务器的接口传入：

1. 安装插件 yarn add xlsx

2.引入插件

import XLSX from "xlsx" // 早期版本的引入方式

import * as XLSX from 'xlsx/xlsx.mjs' // 为了适应新版本xlsx的引入方式

3. html中实现多sheet的切换，并将数据显示到div

   <a-radio-group :value="sheetActive" button-style="solid" @change="changeSheet"> <a-radio-button v-for="(item,index) in sheetNames" :key="index" :value="item">{{item}}</a-radio-button> </a-radio-group>

   api(option).then((res)=>{
   ...
   this.initExcelPreview(res.data)
   });

   /**
   * 表格数据预览
   /
   initExcelPreview(blob) { // 接口返回blob
   try {
   const _this = this
   let fr = new FileReader();
   fr.readAsArrayBuffer(file);
   fr.addEventListener("loadend",(e) => {
   let buffer = e.target.result;
   const workbook = XLSX.read(buffer, {type: 'array'})
   const sheetNames = workbook.SheetNames // 工作表名称集合
   _this.workbook = workbook
   _this.sheetNames = sheetNames
   _this.sheetActive = sheetNames[0]
   _this.getTable(sheetNames[0])
   },false);
   } catch (e) {
   ...
   }
   },
   /*
   * 根据工作表名称获取数据
   * @param sheetName
   */
   changeSheetTable(e){
   let sheetName =e.target.value
   this.sheetActive =sheetName
   this.getTable(sheetName)
   },
   getTable(sheetName) {
   try {
   const worksheet = this.excel.workbook.Sheets[sheetName]
   let htmlData = XLSX.utils.sheet_to_html(worksheet, {header: '', footer: ''})
   this.activeTable = htmlData
   } catch (e) {
   ...
   }
   },