关于vue.js:vue预览word-excel

html

    <elTable
      :columns="columns"
      :download="true"
      :dataContent="dataContent"
      :detail="false"
      @goDetail="goDetail"
      @download="download"
      @tname="tname"
    />
 <a-modal
      :visible="showModel1"
      title="附件预览"
      width="900px"
      wrapClassName="modalyl"
      maskClosable="true"
      @cancel="close1"
    >
      <div id="center-file" class="center-file" style="margin: auto"></div>
    </a-modal>
    <a-modal
      :visible="showModel2"
      title="附件预览"
      width="1200px"
      wrapClassName="modalyl"
      @cancel="close2"
    >
      <div class="table-html-wrap" v-html="tableHtml"></div>
    </a-modal>

子组件 html

<div class="elTable">
    <a-table
      v-if="
        defaultExpandAllRows
          ? dataContent && dataContent.content && dataContent.content.length > 0
          : true
      ":columns="columns":data-source="dataContent.content":defaultExpandAllRows="defaultExpandAllRows":scroll="{y: '100%'}"
      bordered
      :pagination="
        dataContent && dataContent.content && dataContent.content.length > 10
          ? pagination
          : false
      ":rowClassName="tableRowClassName":rowKey="
        (record, index) => {return record.pc;}
      ":customRow="customRowClick"@change="handleTableChange"
    >
    <a slot="templateName" slot-scope="text, record" @click="tname(record)">{{record.templateName}}</a>
 </a-table>
  tname(item: any) {this.$emit('tname', item);
  }

js

import XLSX from 'xlsx';
import {defaultOptions, renderAsync} from 'docx-preview';
columns: any = [
    {
      title: '模版名称',
      dataIndex: 'templateName',
      key: 'templateName',
      scopedSlots: {customRender: 'templateName'},
      ellipsis: true,
    }]
  async tname(item: any) {
    let option = qs.stringify({templateId: item['id'],
    });
    if (item.objectName.indexOf('docx') !== -1) {
      let option = qs.stringify({templateId: item['id'],
      });
      this.showModel1 = true;
      let res: any = await api.downLoadTemplate(option);
      document.getElementById('center-file').innerHTML = '';
      let blob = new Blob([res], {type: 'application/docx'});
      renderAsync(blob, document.getElementById('center-file'), null, {
        className: 'docx', // 默认和文档款式类的类名 / 前缀
        inWrapper: false, // 启用围绕文档内容渲染包装器
        ignoreWidth: false, // 禁止页面渲染宽度
        ignoreHeight: false, // 禁止页面渲染高度
        ignoreFonts: false, // 禁止字体渲染
        breakPages: true, // 在分页符上启用分页
        ignoreLastRenderedPageBreak: true, // 禁用 lastRenderedPageBreak 元素的分页
        experimental: false, // 启用试验性功能（制表符进行计算）trimXmlDeclaration: false, // 如果为真，xml 申明将在解析之前从 xml 文档中删除
        debug: false, // 启用额定的日志记录
      });
    } else if (item.objectName.indexOf('xlsx') !== -1) {
      this.showModel2 = true;
      let res: any = await api.downLoadTemplate1(option);
      this.tableHtml = '';
      let workbook = XLSX.read(new Uint8Array(res), {type: 'array'});
      var worksheet = workbook.Sheets[workbook.SheetNames[0]];
      var innerHTML = XLSX.utils.sheet_to_html(worksheet);
      this.tableHtml = innerHTML;
    } else {this.$message.error('此附件暂不反对预览，请下载后查看');
    }
  }