当前位置: 首页 > article >正文

在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


http://www.kler.cn/a/411936.html

相关文章:

  • 视频推拉流EasyDSS互联网直播点播平台技术特点及应用场景剖析
  • 【通俗理解】隐变量的变分分布探索——从公式到应用
  • 深度学习——3种常见的Transformer位置编码【sin/cos、基于频率的二维位置编码(2D Frequency Embeddings)、RoPE】
  • [每日一氵] 拆分 pip install git+https://github.com/xxx/xx.git@bece3d4
  • 加菲工具 - 好用免费的在线工具集合
  • 微信小程序下拉刷新与上拉触底的全面教程
  • mydocker
  • 使用Setup Factory将C#的程序打包成安装包
  • WordCloud去掉停用词(fit_words+generate)的2种用法
  • LSTM原理解读与实战
  • 麒麟系统x86安装达梦数据库
  • uniapp中使用Mescroll实现下拉刷新与上拉加载项目实战
  • Win11 22H2/23H2系统11月可选更新KB5046732发布!
  • JAVA实现将PDF转换成word文档
  • 【Z2400011】基于Java+SpringBoo+mysql实现的自习室预订系统
  • <javascript><html>在两个html页面间跳转时使用浏览器本地存储localStorage传递共享参数
  • C# 调用系统级方法复制、移动和删除等操作界面
  • STM32 外设简介
  • 前端开发工程师需要学什么?
  • podman 源码 5.3.1编译
  • ollama教程——在Linux上运行大型语言模型的完整指南
  • C#.Net筑基 - 常见类型
  • 基于FPGA的FM调制(载波频率、频偏、峰值、DAC输出)-带仿真文件-上板验证正确
  • 使用Python 在Excel中创建和取消数据分组 - 详解
  • Vue框架开发一个简单的购物车(Vue.js)
  • 零基础学安全--蓝队基础知识学习