一、使用步骤

1.引入依赖包

代码如下（示例）：

npm install file-saver --save

2.在下载页面导入

代码如下（示例）：

import { saveAs } from 'file-saver'

3.在页面中可以定义一个html模板，也可以在全局写

getModelHtml(mhtml) {return `<!DOCTYPE html><html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml"xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><w:WordDocument><w:View>Print</w:View><w:TrackMoves>false</w:TrackMoves><w:TrackFormatting/><w:ValidateAgainstSchemas/><w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid><w:IgnoreMixedContent>false</w:IgnoreMixedContent><w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText><w:DoNotPromoteQF/><w:LidThemeOther>EN-US</w:LidThemeOther><w:LidThemeAsian>ZH-CN</w:LidThemeAsian><w:LidThemeComplexScript>X-NONE</w:LidThemeComplexScript><w:Compatibility><w:BreakWrappedTables/><w:SnapToGridInCell/><w:WrapTextWithPunct/><w:UseAsianBreakRules/><w:DontGrowAutofit/><w:SplitPgBreakAndParaMark/><w:DontVertAlignCellWithSp/><w:DontBreakConstrainedForcedTables/><w:DontVertAlignInTxbx/><w:Word11KerningPairs/><w:CachedColBalance/><w:UseFELayout/></w:Compatibility><w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel><m:mathPr><m:mathFont m:val="Cambria Math"/><m:brkBin m:val="before"/><m:brkBinSub m:val="--"/><m:smallFrac m:val="off"/><m:dispDef/><m:lMargin m:val="0"/> <m:rMargin m:val="0"/><m:defJc m:val="centerGroup"/><m:wrapIndent m:val="1440"/><m:intLim m:val="subSup"/><m:naryLim m:val="undOvr"/></m:mathPr></w:WordDocument></xml><![endif]--><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>${this.test}</title><style>${wordCss}</style></head><body><div style="display: flex;justify-content: center;">${mhtml}</div></body></html>`},

注释：css可以重新定义一个后缀为.js的文件,并在使用以上模板的文件中引入

这边是css的书写方式

export const wordCss = `
.title {height: 64px;width: 800px;text-align: center;line-height: 64px;font-size: 20px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 500;color: rgba(0, 11, 46, 0.85);
}
.all-box {position: relative;
}
.all-topic {padding: 24px;
}
`

4.最后就是在点击下载事假中

const node = document.querySelector('.exportBox').innerHTML
const html = this.getModelHtml(node)
const blob = new Blob([html], { type: 'application/msword;charset=utf-8' })
saveAs(blob, this.test + '.doc')

注释：按着以上模板代码写就行，只是获取的don元素的话，每个人的定义名称不一样（做修改即可）

总结

下载下来的话，是正常的，但是要是页面上存在图片的话，（我这边是富文本框，是后端给我返回的，然后我是用公司同事分装的标签渲染的 v-html），然就后端给我的图片路劲是../(相对路劲)，所以下载下来图片会丢失，要把图片改成绝对路劲。因为我的图片是后端返回的，所以我给返回数据的所有图片路劲进行了替换

 const host = window.location.protocol + '//' + window.location.host
const data = JSON.stringify(infoData).replace(RegExp('../upload-file', 'g'), `${host}/upload-file`)
this.infoData = JSON.parse(data)

Vue html转word相关推荐

vue预览word,excel,pptx,pdf文件
vue预览word,excel,pptx,pdf文件 1.做word,excel,pptx的预览,要先确定文件路径访问是通过域名的url来预览,不可以通过IP的url来访问先把文件路径的url进行u ...
Springboot + vue 实现导出word
Springboot + vue 实现导出word 后端代码使用word先创建好已知的模板使用word工具另存为.xml格式的文件使用freemarker ftl模板将修改后的xml文件复制到 ...
Vue 预览word,excel,ppt等office文档-内网访问（基于onlyoffice，后端返回文件流）
Vue 预览word,excel等office 先看效果!! 需求背景:在前端页面中预览office文件且是内网访问,服务器不可访问外网的前提. 因此微软的接口就废掉了,因为他接口的条件是可以访问外网 ...
vue 是否有word编辑控件_GitHub - C84882428/editor-ui: vue集成 tinymce 富文本编辑器,增加导入 word 模板...
editor-ui vue 集成 tinymce 富文本编辑器自定义 tinymce 富文本编辑器, 在原来的编辑器中增加上传 word 模板最终展示效果: 主要代码: 整体思路: 1,在编辑器原 ...
vue页面导出Word文档（含图片）
引用插件安装 npm i docxtemplater@3.17.6 npm i pizzip npm i jszip-utils@0.1.0 npm i jszip@2.6.1 npm i file ...
vue 在线访问word,excel,pdf 文件以及打印
git 项目代码一.pdf 1. vue-pdf 安装 npm i --save vue-pdf 语法在组件种使用import pdf from 'vue-pdf'pdf.createLoadin ...
vue动态导出word文档
首先要npm这四个依赖包 jszip jszip-utils docxtemplater file-saver 个人建议用cnpm , npm总是会出现莫名其妙的问题 hellowword.vue ...
vue实现导出word文档（含多张图片）
一.实现效果以填写并导出房屋出租审批表为例,首先填写表格相应内容后,点击" 导出 "按钮实现word文档的导出功能,界面如下所示: 最后导出word文档如下所示: 二.所需插件 ...
vue ueditor 生成word文档_word目录制作技巧：快速生成文档总目录和章节下子目录...
编按:在使用Word制作长文档时,目录必不可少.有了目录,无论是查找内容或阅读内容都会更方便.但很多人却不得其法,始终采用纯手工输入目录.今天,小编将教大家自动生成主目录和子目录的方法,以后再也不用手 ...
VUE动态生成word
不废话,直接上代码. 前端代码: <template><Form ref="formValidate" :model="formValidate&quo ...

Vue html转word