vue预览word excel

html

子组件html

    
    {{ record.templateName }}
 
  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('此附件暂不支持预览，请下载后查看');
    }
  }