vue预览word excel pdf

安装

yarn add vue-pdf -W
yarn add xlsx -W
yarn add docx-preview -W

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"
      @cancel="close1"
    >
      <div id="center-file" v-if="type === 'docx'" class="center-file" style="margin: auto"></div>
      <pdf v-if="type === 'pdf'"  :src="src" /></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

@Component({
  name: 'newList',
  components: {
    ATable: Table,
    elTable,
    elModal,
    AModal: Modal,
    pdf
  },
})
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 if (item.objectName.indexOf('pdf') !== -1) {
      this.type='pdf'
      this.showModel1 = true;
      let res: any = await api.downLoadTemplate(option);
      let url = window.URL.createObjectURL(
        new Blob([res], { type: 'application/pdf' }),
      );
      this.src = url;
    } else {
      this.$message.error('此附件暂不支持预览，请下载后查看');
    }
  }