Vue在线预览word

先上效果图

下载插件

npm i docx-preview@0.1.4
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（不需要安装插件）

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