效果图如下：

1、需要用到插件

npm i docx-preview --save

页面实现预览主要依靠插件，所以这是最重要的一步，如果你用的cnpm包管理器，那就是命令行

cnpm i docx-preview --save

2、引入var docxx = require("docx-preview");

3、调取接口，获得后端传回的文档流，这里的res.data.data就是文档流，并调用docx-previre的方法渲染文件到页面。

4、结束，代码如下：

<template>
  <div>
    <el-button @click="createpsbgDoc">报告</el-button>
    <div ref="word" class="docWrap"></div>
  </div>
</template>
<script>
import {
  createpsbgDoc,
} from "_b/api/results.js";
var docxx = require("docx-preview");
export default {
methods:{
    createpsbgDoc() {
      createpsbgDoc()//调接口
        .then((res) => {
          docxx.renderAsync(res.data.data, this.$refs.word);
        })
        .catch((error) => {
          this.$message({
            type: "error",
            message: error,
          });
        });
    },
}
}
</script>

"_b/api/results.js"内容如下，就是调的接口，axios

import request from '@/router/axios';
  
  export const createpsbgDoc = (projectId) => {
    return request({
      url:'/abc/ccccc/aaaaaaa',  //后端接口
      method: 'get',
      params: {
        projectId   //请求参数
      },
    })
  }

5、通过文档流在vue页面实现下载文档，还在实践中