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

标签：docx vue elink office res 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>

标签：docx,vue,elink,office,res,word
From： https://www.cnblogs.com/youguo2/p/18348929