jwq98 2023-02-23 09:35 采纳率: 20%
浏览 90

但是先预览docx文件之后再预览xlsx文件会有一个问题就是预览xlsx文件时,docx文件依然被渲染了出来,xlsx文件在docx文件后面被渲染

做项目时遇到了一个问题,可以预览多种格式的文档。但是先预览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);
               });
 }
  • 写回答

1条回答 默认 最新

  • 崽崽的谷雨 2023-02-23 16:47
    关注

    每次 预览前 清空一下上次 赋值的东西 。 docx-preview的destroy()方法来清除渲染的文档

    评论

报告相同问题?

问题事件

  • 修改了问题 2月23日
  • 修改了问题 2月23日
  • 创建了问题 2月23日

悬赏问题

  • ¥15 远程访问linux主机超时
  • ¥15 odoo17存货管理优势于中国国内该行业传统ERP或MES的详细解读和举例
  • ¥15 CPU卡指令整合指令数据都在图片上
  • ¥15 火车票关联12306问题
  • ¥15 odoo17处理受托加工产品
  • ¥15 如何用MATLAB编码图三的积分
  • ¥15 圆孔衍射光强随孔径变化
  • ¥15 MacBook pro m3max上用vscode运行c语言没有反应
  • ¥15 ESP-PROG配置错误,ALL ONES
  • ¥15 结构功能耦合指标计算