在vue中，根据后端接口返回的文件流实现word文件弹窗预览

需求

弹窗预览word文件，因浏览器无法直接根据blob路径直接预览word文件，所以需要利用插件实现。

解决方案

利用docx-preview实现word文件弹窗预览，以node版本16.21.3和docx-preview版本0.1.8为例

具体实现步骤

1、安装docx-preview插件

npm install docx-preview@0.1.8 --save

2、创建弹窗组件，给一个空div绑定id为container

<!-- 预览弹窗 -->
    <div class="previewDialog">
      <el-dialog
        :visible.sync="dialogVisible"
        width="90%"
        :fullscreen="dialogFullScreen"
      >
        <div slot="title" class="dialog-header-title">
          <div class="title-text">文件预览</div>
        </div>
        <div id="container" style="width: 100%;"></div>
      </el-dialog>
    </div>

3、引入docx-preview和axios

import { renderAsync } from "docx-preview";

4、在data中初始化定义docxOptions配置项

data() {
    return {
      docxOptions: {
        className: "docx", // string：默认和文档样式类的类名/前缀
        inWrapper: true, // boolean：启用围绕文档内容的包装器渲染
        ignoreWidth: false, // boolean：禁用页面的渲染宽度
        ignoreHeight: false, // boolean：禁止渲染页面高度
        ignoreFonts: false, // boolean：禁用字体渲染
        breakPages: true, // boolean：在分页符上启用分页
        ignoreLastRenderedPageBreak: true, // boolean：在lastRenderedPageBreak 元素上禁用分页
        experimental: false, // boolean：启用实验功能（制表符停止计算）
        trimXmlDeclaration: true, // boolean：如果为true，解析前会从​​ xmlTemplate 文档中移除 xmlTemplate 声明
        // useBase64URL: false, // boolean：如果为true，图片、字体等会转为base 64 URL，否则使用URL.createObjectURL
        // useMathMLPolyfill: false, // boolean：包括用于 chrome、edge 等的 MathML polyfill。
        // showChanges: false, // boolean：启用文档更改的实验性渲染（插入/删除）
        debug: false // boolean：启用额外的日志记录
      },
      dialogVisible: false,
    };
  },

5、创建预览方法previewFile

// 预览文件
    previewFile() {
      let timeId = "";
      document.getElementById("container") &&
        (document.getElementById("container").innerHTML = "");
      const options = {
        method: "get",
        headers: {
          Authorization: getToken()
        },
        url:
          process.env.VUE_APP_BASE_SERVER + `/stgFile/downloadFile/${timeId}`, // 可替换为你自己的后端下载地址
        responseType: "blob", // 二进制流
        params: {}
      };
      this.dialogVisible = true;
      axios(options)
        .then(res => {
          if (!res.data) return this.$message.warning("当前没有可预览文件");
          const docData = new Blob([res.data]);
          let bodyContainer = document.getElementById("container");
          renderAsync(
            docData, // Blob | ArrayBuffer | Uint8Array, 可以是 JSZip.loadAsync 支持的任何类型
            bodyContainer, // HTMLElement 渲染文档内容的元素,
            null, // HTMLElement, 用于呈现文档样式、数字、字体的元素。如果为 null，则将使用 bodyContainer。
            this.docxOptions // 配置
          );
        })
        .catch(err => {
          return this.$message.error(err);
        });
    },

5、在所需地方调用预览方法

 <el-button primary class="file-preview" @click="previewFile">
     文件预览 <i class="el-icon-view"></i>
 </el-button>

备注

以上则是预览word文件流的全部内容，有的同学在使用过程中可能会遇到安装docx-preview插件报错或者线上部署时报错，这个很大概率是因为你自己工程用到的node版本与docx-preview版本匹配不一致导致，可以去docx-preview官网查看对应版本，建议node16及以下版本尽量使用老一点的版本，16以上版本使用最新的docx-preview即可。

不同版本的docx-preview使用方式有细微差异，可以查看官网各个版本的实例方法进行调试。

docx-preview官网地址：https://www.npmjs.com/package/docx-preview

原文地址：https://blog.csdn.net/qq_40896145/article/details/143974664

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！