预览文件的数据流从服务器的接口传入：
- 安装插件 yarn add xlsx
2.引入插件
import XLSX from "xlsx" // 早期版本的引入方式
import * as XLSX from 'xlsx/xlsx.mjs' // 为了适应新版本xlsx的引入方式
-
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) {
...
}
},