? ? ? ? 預(yù)覽文件的數(shù)據(jù)流從服務(wù)器的接口傳入：
1. 安裝插件?yarn add xlsx
2.引入插件
????????import XLSX from "xlsx"? // 早期版本的引入方式
????????import * as XLSX from 'xlsx/xlsx.mjs' //? 為了適應(yīng)新版本xlsx的引入方式文章來源：http://www.zghlxwxcb.cn/news/detail-698064.html
3.? html中實現(xiàn)多sheet的切換，并將數(shù)據(jù)顯示到div文章來源地址http://www.zghlxwxcb.cn/news/detail-698064.html
<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)
});
/**
* 表格數(shù)據(jù)預(yù)覽
*/
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) {
...
}
},
/**
* 根據(jù)工作表名稱獲取數(shù)據(jù)
* @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) {
...
}
},到了這里，關(guān)于vue預(yù)覽docx的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
