使用docx-preview插件预览docx后缀文件

1.安装插件

 npm install docx-preview

2.使用

import { renderAsync } from 'docx-preview';

<el-button type="text" @click="previewClick">预览</el-button>

 <div v-if="previewDialogVisible">
      <el-dialog title="预览" :visible.sync="previewDialogVisible" append-to-body width="50%">
        <div ref="file" v-loading="previewLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" style="height:550px;overflow-y:auto;"></div>
      </el-dialog>
    </div>

previewDialogVisible: false,//预览
previewLoading:false,

    // 预览
    previewClick() {
      this.previewDialogVisible = true
      this.previewLoading=true
      preview(this.id)
        .then((res) => {
          console.log("res333333333", res);
          this.previewLoading=false
          renderAsync(res, this.$refs.file, null, {
            className: 'text-docx', //class name/prefix for default and document style classes
            inWrapper: true, //enables rendering of wrapper around document content
            ignoreWidth: false, //disables rendering width of page
            ignoreHeight: false, //disables rendering height of page
            ignoreFonts: false, //disables fonts rendering
            breakPages: true, //enables page breaking on page breaks
            ignoreLastRenderedPageBreak: true, //disables page breaking on lastRenderedPageBreak elements
            experimental: true, //enables experimental features (tab stops calculation)
            trimXmlDeclaration: true, //if true, xml declaration will be removed from xml documents before parsing
            useBase64URL: false, //if true, images, fonts, etc. will be converted to base 64 URL, otherwise URL.createObjectURL is used
            useMathMLPolyfill: true, //includes MathML polyfills for chrome, edge, etc.
            debug: false //enables additional logging
          }) // 渲染到页面
        })
        .catch((err) => { });
    },