vue 项目使用@vue-office/docx word 纯前端，也支持后端接口方式

只是做个记录，防止忘记。

安装依赖 @vue-office/docx

vue 2 的写法 vue3 同理自己改造。

记得一定放在public 文件夹下

 

下面代码

<template>

  <div style="height: 100%">

    <el-button type="primary" @click="downWord">下载文档</el-button>

    <vue-office-docx

      :src="docx"

      style="height: 100%; overflow-y: auto"

      @rendered="renderedHandler"

      @error="errorHandler"

    />

  </div>

</template>

<script>

//引入VueOfficeDocx组件

import VueOfficeDocx from "@vue-office/docx";

import axios from "axios";

//引入相关样式

// import '@vue-office/docx/lib/index.css'

export default {

  components: {

    VueOfficeDocx,

  },

  data() {

    return {

      // docx: 'http://static.shanhuxueyuan.com/test6.docx' ,//设置文档网络地址，可以是相对地址

      docx: `${"/ps"}.docx`, //设置文档网络地址，可以是相对地址

    };

  },

  methods: {

    renderedHandler() {

      console.log("渲染完成");

    },

    errorHandler(res) {

      console.log("渲染失败", res);

    },

    downWord() {

      axios({

        method: "get",

        responseType: "blob",

        url: `${"/ps"}.docx`, // word在static文件下

      }).then((res) => {

        this.exportWord(res, "word文件");

       

      });

    },

    exportWord(res, name) {

      const blob = new Blob([res.data]);

      const fileName = name + ".docx";

      const elink = document.createElement("a");

      elink.download = fileName;

      elink.style.display = "none";

      elink.href = URL.createObjectURL(blob);

      document.body.appendChild(elink);

      elink.click();

      URL.revokeObjectURL(elink.href); // 释放URL 对象

      document.body.removeChild(elink);

    },

  },

};

</script>