关于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('此附件暂不反对预览，请下载后查看');    }  }