前端html转word中的一种实现方案(docxtemplater)

前言:
此方案是根据如下多个帖子，项目实践中总结糅合而成，感谢如下
https://blog.csdn.net/qq_41615323/article/details/109235888
http://markswindoll.github.io/jquery-word-export/
https://github.com/eligrey/FileSaver.js/
以上是直接导出，因为有很多的样式和导出的格式不兼容，我只仅作参考
下面两篇文章，使用了docxtemplater组件
https://www.jianshu.com/p/b3622d6f8d98
https://www.jianshu.com/p/0de31429b12a
https://www.cnblogs.com/redRun/p/14710431.html
使用docxtemplater组件进行导出的流程是，将数据直接插入到已经制作好的word模板对应的插值处，可以极大的保留word的样式和规格

需求：客户对数据表单进行填写，然后导出成word报告，因为有些样式和板块是固定的，比如说页眉页脚的logo，描述信息等，相当于要做的就是将用户数据填充到word中对应位置。如下图，就是将其中的一些图片信息和描述信息放到对应模块(Test photos)下

吐槽：我是后端向，但是被抓包去做项目前端，不是很专业，所以找最简单的方式去做html转word的导出，说不定有更好的方法，但是我写这个贴子只是为了提供一个参考。

这个功能中docxtemplater插件是核心 https://docxtemplater.com/
官网有很多使用的demo和错误处理方案，推荐做的时候可以看看
我的项目是vue2构建的，vuex做数据的管理

起步：安装对应依赖

// 安装 docxtemplater
cnpm install docxtemplater pizzip  --save
// 安装图片模块，用于支持图片的导出(有需求就使用)
cnpm install docxtemplater-image-module-free
// 安装 jszip-utils
cnpm install jszip-utils --save
// 安装 jszip
cnpm install jszip --save
// 安装 FileSaver
cnpm install file-saver --save

我这里直接贴出我在项目中使用到的html2word.js文件，这是一个通用方法，这段代码借鉴自https://www.cnblogs.com/redRun/p/14710431.html
大家可以去看看

import Docxtemplater from 'docxtemplater'
import ImageModule from 'docxtemplater-image-module-free' //需要就导入
import PizZip from 'pizzip'
import JSZipUtils from 'jszip-utils'
import { saveAs } from 'file-saver'export function exportWordAndImage(report) {var templateChose = process.env.VUE_APP_PUBLIC_PATH + '/template.docx'//模板推荐放在public文件夹下JSZipUtils.getBinaryContent(templateChose, function(error, content) {if (error) {console.error(error)return}var opts = {}opts.centered = falseopts.getImage = function(tagValue) {return new Promise(function(resolve, reject) {JSZipUtils.getBinaryContent(tagValue, function(error, content) {if (error) {return reject(error)}return resolve(content)})})}// 图片有关代码，没有图片的可以删除opts.getSize = function(img, tagValue, tagName) {// return [200, 200] // 图片大小 （固定的）如果你的图片大小要固定，请使用这行代码，将下面return new Promise的那部分注销掉// 非固定（这里是设置宽度最大为300px的图片）let wid = 300return new Promise(function(resolve, reject) {var image = new Image()image.src = tagValuelet imgWidth, imgHeight, scaleimage.onload = function() {imgWidth = image.widthimgHeight = image.heightscale = 0if (imgWidth > wid) {scale = wid / imgWidthimgWidth = widimgHeight = imgHeight * scale}resolve([imgWidth, imgHeight])}image.onerror = function(e) {console.log('img, tagName, tagValue : ', img, tagName, tagValue)reject(e)}})}var imageModule = new ImageModule(opts)var zip = new PizZip(content)var doc = new Docxtemplater().loadZip(zip).setOptions({ linebreaks: true }) // 换行确认，如果你有的文本中有换行符的话，可以选择她导入到word起不起作用.attachModule(imageModule).compile()doc.resolveData({// 这是你导入的数据，这个数据体中的属性或对象一定要和word模板中的插值一样...report}).then(function() {console.log('Export...')doc.render()var out = doc.getZip().generate({type: 'blob',mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'})// 输出文档，可以自定义自己的文档名saveAs(out, 'Temporary, you need to sync as.docx')})})
}

使用：以下是一段vue代码中的js代码片段，基本用来介绍如何使用

<script>
import { exportSignOffPaperWord } from '@/utils/html2word'
export default {data() {return {// the data for export word,这是用于导出的数据集，一般数据量少的话，可以不用单独列一个数据集出来，可以直接用annoyData，如果数据量大或者结构复杂推荐整一个专门用于导出的数据集report: {NowTime: '',imgData: []},// 模拟一下后端数据格式annoyData: {NowTime: '2022/2/2',someData: [{img: 'data:image/jpg;base64,iVBORw...'describe: 'test 1'},{img: 'data:image/jpg;base64,iVBORw...'describe: 'test 1'}]}}},methods: {// export wordoutWord() {/*将数据格式化,对于imgData这种图片和描述信息的集合很大程度上需要格式化一下数据,根据你后端传递过来的json数据再次进行一次格式化，用以适配word中的循环,当然目前例子中的这个imgData直接让annoyData中的someData给他赋值就可以了,只要保证是个标准的Array就可以*/this.report.imgData = this.formatData(this.annoyData.someData)exportSignOffPaperWord(this.report)},formatData(IMGS) {const IMGS_Array = []for (const key in IMGS) {const object_value = {}object_value['TestPhoto'] = IMGS[key].imgobject_value['TestPhoto_Title'] = IMGS[key].describe // 这个是图片描述IMGS_Array.push(object_value)}return IMGS_Array}}
}

他们在word模板中的体现，其中{xxx}用于插入值，{%xxx}用于插入图片，{#xxx}{/xxx}用于开始和结束循环，在模板中可以对其使用word中的样式，导出的时候也能映射到对应文本上，比如我使用了文本框将其图片和标题框出来，最后就能制作成像第二张图分列显示的样子

同理，对于表格，也是类似的操作

注意，这个模板最好存放在最外层的public中，不然你很有可能会遇到Can't find end of central directory : is this a zip file ?

还有就是word模板制作过程中，每次对word模板有操作的时候，一定要保存一份之前能够成功导出的模板，不然出了问题真的很难找。这个组件感觉很适合做一些报表和签收单之类的文档。
最后，感谢本文中所有提到过的帖子，没有你们，我就寄了

前端html转word中的一种实现方案(docxtemplater)相关推荐

word敲空格文字不后退_聊聊Word中的几种缩进(中)
一些闲言碎语想要打破Word的二八定律何其难呀!80%的人仅使用了Word20%的功能!我见到了太多太多把Word当记事本去用的人.因为Word的门槛非常低,几分钟便能掌握一个功能,而且许多功能未免 ...
Web前端入门：CSS中颜色三种写法
在CSS中,颜色的表示有三种写法,分别是: 英文单词 16进制 rgb+rgba 1.英文单词: 例如:red, white, blue, skyblue, pink, deeppink, ...
如何在word中像LaTeX一样键入公式
小伙伴们下学期就要开始写毕业论文了,大多数同学应该会选择word,不可避免的会有很多嵌套的公式需要大家添加在文本当中. 在LaTeX中,公式.矩阵等都可以用键盘键入,操作起来比较方便. 在word中, ...
php文件域的作用,在word中何为域
word域简介 WORD域的中文意思是范围,类似数据库中的字段,实际上,它就是Word文档中的一些字段.每个Word域都有一个唯一的名字,但有不同的取值.用Word排版时,若能熟练使用WORD域,可增 ...
word中的标记、分页、批量标题设置、多级列表设置
一.word标记 1.在word中会有各种各样的标记: (1)→:制表符,使用Tab键可以输出: (2)↓:手动换行符,又叫软回车,使用Shift+Enter可以输出: 注意:软回车文字换行,但不分段 ...
如何借助spire.doc，在 Word 中插入 OLE 对象
Spire.Doc for .NET是一款专门对 Word 文档进行操作的 .NET 类库.在于帮助开发人员无需安装 Microsoft Word情况下,轻松快捷高效地创建.编辑.转换和打印 Micr ...
前端预览word文档实现
记录前端预览word文档的需求实现方案一:XDOC文档预览可以使用XDOC文档预览云服务来进行word文件的在线预览,直接去网站体验就知道怎么用了. https://view.xdocin.com ...
缩进一个字符_解析Word——Word段落格式中的几种缩进(中)
一些闲言碎语想要打破Word的二八定律何其难呀!80%的人仅使用了Word20%的功能!我见到了太多太多把Word当记事本去用的人.因为Word的门槛非常低,几分钟便能掌握一个功能,而且许多功能未免 ...
如何去除Word中的波浪线？这三种方法很实用！
我们都知道在Word中撰写内容时,有语法或字符错误时,就会出现红色或蓝色的波浪线,建议我们修改,那如果文件中出现了波浪线并且文件不可以修改,怎样才能把Word中的波浪线去除呢?下面小编给大家分享三种比 ...

前端html转word中的一种实现方案(docxtemplater)

前端html转word中的一种实现方案(docxtemplater)

前端html转word中的一种实现方案(docxtemplater)相关推荐

最新文章

热门文章