不知大家是否有在线预览word文件的需求呢，使用docx-preview在线预览文件。

docx-preview

第一种方法命令下载

npm install docx-preview
或
yarn add docx-preview

第二种方法CDN引入

     1. 在public文件 → 创建cdn文件夹 → 创建docx-preview文件夹 → 创建docx-preview.js（把以下地址内容复制到文件里）

网址：https://volodymyrbaydalka.github.io/docxjs//dist/docx-preview.js

     2.  在index.html 引入以下

<!--docx-preview  -->
<script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
<script src='<%= BASE_URL %>cdn/docx-preview/docx-preview.js'></script>

docx-preview：文档地址  在线演示

完整代码

 主要看 handlePreview 方法 ，我这边后端返回是url（仅供参考），大家根据自身项目更改；

<template>
  <div>
    <el-upload
      action="#"
      :limit="limit"
      :auto-upload="false"
      :accept="accept"
      :file-list="fileList"
      :on-exceed="handleExceed"
      :on-change="handleChange"
      :on-remove="handleRemove"
      :on-preview="handlePreview"
    >
      <el-button slot="trigger" size="small" type="primary">
       {{text}}
      </el-button>
    </el-upload>
    <el-dialog
      title="预览"
      v-if="previewVisible"
      :visible.sync="previewVisible"
      center
      width="50%"
      append-to-body
      top="5vh"
    >
      <div ref="previewContainer"></div>
    </el-dialog>
  </div>
</template>

<script>
// import { renderAsync } from 'docx-preview' // 第一种
export default {
  props: {
    fileList: {
      type: Array,
      default: () => [],
    },
    accept: {
      type: String,
      default: "",
    },
    text: {
      type: String,
      default: "选取文件",
    },
    limit: {
      type: Number,
      default: 1,
    },
    exceedTip: {
      type: String,
      default: "请先移除已上传的文件，再上传新文件",
    },
  },
  components: {},
  data() {
    return {
      previewVisible: false,
    };
  },
  methods: {
    handleChange(file, fileList) {
      this.$emit("update:fileList", fileList);
    },
    handleRemove(file, fileList) {
      this.$emit("update:fileList", fileList);
    },
    handlePreview(file) {
      const validExtensions = [".docx"];
      const fileName = file.src || file.raw.name;
      const fileExtension = fileName
        .substring(fileName.lastIndexOf("."))
        .toLowerCase();
      if (!validExtensions.includes(fileExtension)) return this.$message.warning("只支持 .docx 格式文件预览，请谅解！")
      // 以上是根据自身项目后端返回url的后缀限制打开预览，请大家根据自身项目更改
      this.previewVisible = true;
      this.previewDocx(file);
    },
    handleExceed() {
      this.$message.warning(this.exceedTip);
    },
    async previewDocx(file) {
      try {
        let blob;
        if (file.raw) {
          blob = file.raw; // 本地预览
        } else {
          // 后端返回 我这边返回是url需转blob才能显示,若你们本身返回是blob直接赋值就好
          const response = await fetch(file.src);
          blob = await response.blob();
        }
        this.$nextTick(() => {
         // renderAsync(blob,this.$refs.previewContainer) // 第一种
          window.docx.renderAsync(blob, this.$refs.previewContainer); // 第二种
        });
      } catch (error) {
        console.error("无法预览文件", error);
      }
    },
  },
  created() {},
  beforeDestroy() {},
};
</script>

<style lang='scss' scoped>
::v-deep .el-upload-list {
  cursor: pointer;
}
</style>

效果显示

 后记：慢慢来，好戏都在烟火里