Vue在线预览word

参考文档：
https://blog.csdn.net/m0_60067716/article/details/124018275
https://www.csdn.net/tags/OtDaggysMDI0ODItYmxvZwO0O0OO0O0O.html

下载插件

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);
       // docx.renderAsync(data, this.$refs.word)
        });
    },
  },
};
</script>
<style scoped>
</style>