预览文件的数据流从服务器的接口传入：
1. 安装插件 yarn add xlsx
2.引入插件
import XLSX from "xlsx" // 早期版本的引入方式
import * as XLSX from 'xlsx/xlsx.mjs' // 为了适应新版本xlsx的引入方式
3. html中实现多sheet的切换，并将数据显示到div
<div class="tab"><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></div><div v-html="activeTable" style="padding: 10px 15px"></div> api(option).then((res)=>{ ... this.initExcelPreview(res.data)});/*** 表格数据预览*/initExcelPreview(blob) { // 接口返回blobtry {const _this = thislet 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.valuethis.sheetActive =sheetNamethis.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) {...}},
