Vue realizes previewing word documents (handling document flow)

 The renderings are as follows:

1. Need to use plug-ins

npm i docx-preview --save

Page preview mainly relies on plug-ins, so this is the most important step. If you use the cnpm package manager, it is the command line

cnpm i docx-preview --save

2. Introduce var docxx = require("docx-preview");

3. Call the interface to obtain the document stream sent back from the backend, where res.data.data is the document stream, and call the docx-previre method to render the document to the page.

4. End, the code is as follows:

<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>

The content of "_b/api/results.js" is as follows, which is the calling interface, axios

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

5. It is still in practice to download documents on the vue page through document flow