做项目时遇到了一个问题,可以预览多种格式的文档。但是先预览docx文件之后再预览xlsx文件会有一个问题就是预览xlsx文件时,docx文件依然被渲染了出来,xlsx文件在docx文件后面被渲染,这是什么原因?是我使用的docx-preview用完需要销毁啥的吗?
主要代码如下:
<div v-if="type === 'docx'" class="docWrap">
<div ref="file"></div>
</div>
<div v-else-if="type === 'xlsx'" style="width: 100%;height: 100%;">
<div class="excel-view-container">
<div class="tab">
<el-radio-group v-model="sheetNameActive">
<el-radio-button v-for="(item,index) in sheetNames" :key="index" :label="item"></el-radio-button>
</el-radio-group>
</div>
<div id="excelView" v-html="excelView"></div>
</div>
</div>
if (this.type == 'docx') {
this.$http.request({
//发请求
}).then((res) => {
if (res) {
let docx = require('docx-preview');
docx.renderAsync(res.data, this.$refs.file);
} else {
this.$notify.error({title: '失败', message: '接口请求失败'});
}
})['catch'](function (error) {
that.$notify.error({title: '失败', message: '接口请求失败'});
console.log(error);
});
}else if(this.type == 'xlsx'){
this.$http.request({
//发请求
}).then((res) => {
if (res) {
if (res) {
const dataArr = new Uint8Array(res.data)
this.workbook = XLSX.read(dataArr, {type: 'array'}); // 解析数据
//表格渲染
this.sheetNames = this.workbook.SheetNames || []
this.sheetNameActive = this.sheetNames[0]
this.getSheetNameTable(this.sheetNames[0])
} else {
this.$notify.error({title: '失败', message: '接口请求失败'});
}
} else {
this.$notify.error({title: '失败', message: '接口请求失败'});
}
})['catch'](function (error) {
that.$notify.error({title: '失败', message: '接口请求失败'});
console.log(error);
});
}