Vue在线预览word-程序员宅基地

技术标签： vue

先上效果图

下载插件

npm i [email protected]
npm i jszip

完整代码

<template>
  <div class="app">
    <el-button @click="preview">预览</el-button>
    <el-dialog
      v-if="previewShow"
      title="预览"
      :visible.sync="previewShow"
      append-to-body
      width="90%"
    >
      <!-- word 显示-->
      <div ref="word"></div>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" plain @click="previewShow = false"
          >关 闭</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import axios from "axios";

const docx = require("docx-preview");
window.JSZip = require("jszip");
export default {
  data() {
    return {
      previewShow: false,
    };
  },
  methods: {
    // 后端返回二进制流
    preview() {
      // 这里需要提起打开弹窗，因为有时很找不到word的ref 会报错
      this.previewShow = true;
      axios
        .get("你们后端的地址（下载地址）", {
          responseType: "blob",
        })
        .then((res) => {
          // 对后端返回二进制流做处理
          const blob = new Blob([res]);
          docx.renderAsync(blob, this.$refs.word);
        });
    },
  },
};
</script>
<style scoped>
</style>

二进制流长这样

注意事项

1.我是放在dialog中显示的，你也可以放到其他容器内

2.后端需要返回二进制流，和下载接口一样

3.如果使用容器上使用了v-if，需要提前显示容器，否则有时候会查找不到就会报错了。

4.支持.docx后缀，不支持.doc后缀，暂时没找到解决方法，以后找到了回来补。

在线预览PDF地址：Vue在线预览PDF（不需要安装插件）

有帮助到你记得点点赞哦~

本文链接：https://blog.csdn.net/m0_60067716/article/details/124018275

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

探秘高效Linux C/C++项目架构：让进程、线程和通信方式助力你的代码飞跃_linux c++线程间通信-程序员宅基地

文章浏览阅读1.5k次。探秘高效项目架构：让进程、线程和通信方式助力你的代码飞跃_linux c++线程间通信

PROFINET主站转MODBUS-TCP协议网关_profinet转modbus-程序员宅基地

文章浏览阅读106次。本产品是 ModbusTCP 和 Profinet(M)网关 (以下简称网关) ，使用数据映射方式工作。本产品在 ModbusTCP 侧作为 ModbusTCP 从站，接 PLC 、上位机、wincc 屏等；在 Profinet 侧做为 Profinet 主站控制器，接 Profinet 设备，如伺服驱动器。_profinet转modbus

电子模块|压力传感器模块HX711---C51&&STM32驱动_单片机hx711驱动-程序员宅基地

文章浏览阅读2.2k次。HX711是一款专为高精度称重传感器而设计的24位A/D转换器芯片。与同类型其它芯片相比，该芯片集成了包括稳压电源、片内时钟振荡器等其它同类型芯片所需要的外围电路，具有集成度高、响应速度快、抗干扰性强等优点。降低了电子秤的整机成本，提高了整机的性能和可靠性。该芯片与后端MCU芯片的接口和编程非常简单，所有控制信号由管脚驱动，无需对芯片内部的寄存器编程。输入选择开关可任意选取通道A或通道B，与其内部的低噪声可编程放大器相连。_单片机hx711驱动

微信小程序 java springboot 57.高校毕业生就业信息的设计与实现（完整源码+数据库文件+万字文档+保姆级视频部署教程+配套环境）-程序员宅基地

文章浏览阅读263次，点赞6次，收藏5次。针对高校教师成果信息管理混乱，出错率高，信息安全性差，劳动强度大，费时费力等问题，采用高校毕业生就业信息可以有效管理，使信息管理能够更加科学和规范。高校毕业生就业信息使用 Java 语言进行编码，使用 Mysql 创建数据表保存本系统产生的数据。系统可以提供信息显示和相应服务，其管理高校毕业生就业信息信息，查看高校毕业生就业信息信息，管理高校毕业生就业信息。总之，高校毕业生就业信息集中管理信息，有着保密性强，效率高，存储空间大，成本低等诸多优点。数据库工具：Navicat；开发语言：Java；

ERROR: Failed to resolve: com.github.CymChad:BaseRecyclerViewAdapterHelper:2.9.46-程序员宅基地

文章浏览阅读1.6w次，点赞3次，收藏3次。今天弄一个demo 导入brvah 出现的错误，又去看了下教程是自己忘记添加jitpack仓库了_error: failed to resolve: com.github.cymchad:baserecyclerviewadapterhelper:2

对人脸检测和人脸识别的理解_人脸检测和人脸属性识别的意义-程序员宅基地

文章浏览阅读1.5k次。人脸检测是指对输入图像中判断是否存在人脸区域，并进一步确定人脸的位置、大小、姿态等信息。这些算法大致分为三种类别：基于肤色的检测方法、基于形状的检测方法、基于统计理论的检测方法。人脸识别技术是基于人的脸部特征，一个完整的人脸识别过程一般包括人脸检测和人脸识别两大部分。人脸识别就是将待识别的人脸与已知的人脸进行比较，得出相似程度的相关信息。人脸自动识别系统包括三个主要的环节：首先是图像预处_人脸检测和人脸属性识别的意义

随便推点

为类创建自定义调试信息,让你的调试更加方便快捷-程序员宅基地

文章浏览阅读206次。我们在应用程序中使用类一组类，你想在调试器中快速查看类中的值。默认情况下调试器不会展示自定义类的信息。此时我们可以向类添加一个DebuggerDisplay的特性。此时调试器就会你想要显示的信息。如下 [DebuggerDisplay("User Full Name={Id} {Name} {Age}")] public class User {..._怎么在sys的class目录生成调试信息

小米路由器r3gv2/r4a Lean的OpenWrt固件_openwrt-ramips-mt7621-xiaomi_r4a-squashfs-sysupgra-程序员宅基地

文章浏览阅读2.3w次，点赞4次，收藏16次。小米路由器r3gv2这是一款运营商定制的小米千兆路由器，是r3g（128M+256M+USB）的阉割版，闪存16M，内存128M，处理器是MediaTek MT7621，这个配置勉强可以玩一玩，闲鱼上也有很多，性价比比较高。进入路由器终端自己刷固件的话，首先就是要打开路由器的ssh或者telnet，小米早年的路由器官方都有开启ssh的教程，而这款就需要自己想办法了。Root shell exploit for several Xiaomi routers: 4A Gigabit, 4A 100M,_openwrt-ramips-mt7621-xiaomi_r4a-squashfs-sysupgrade