Java vue word预览 vue预览word

下载插件

1. npm i docx-preview@0.1.4
   
2.  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>