【文件zip格式怎么转word】前端开发——模板导出word下载

由于列表表中的数据由于动态表单拖动而格式不固定，因此在最近的开发过程中出现了需求列表中的表单数据导出word。所需的方案是冻结word模板，然后从表单中取出模板字段，执行分配导出。具体的业务实施没有详细说明。下面的导出实现如下：

所需的相关插件

Docx模板

Pizzip

文件-服务器

Jszip-utils

Jszip

docx templater-image-module-free js zip:如果创建压缩包批量下载不需要批量处理，则不需要安装

docx templater-image-module-free:如果没有将设计导出到图片所需的安装，则不需要安装

安装

NPM I docx templater pizzip js zip-utils file-saver js zip docx templater-image-module-free-s处理逻辑

模板文件的二进制内容JSZi('；(error，content)={})2。文件-zip文件

Constzip=newpizzip(内容)；3.创建和加载docxtemplater实例对象

Letdoc=newdocxtemplater()。loadzip (zip)。compile()；4.上传资料

5.定义模板

模板

测试数据

测试数据

显示效果

图片密钥代码处理

批量下载处理

这里包装完毕下载结束时进行了延迟处理，防止操作不完全。

综合包装下

对上述分布式JS打包以创建新的ex。

import docx templater from ' docx templater '

Import PizZip from 'pizzip '

Import {saveAs} from 'file-saver '

导入Jsziputils from' jszip-utils '

导入js zip from' js zip '

import image module from ' docx templater-image-module-free '

export const dataurltobase 64=(URL)={

Return new promise ((resolve，reject)={

//验证监听地址是否已是base64

Cons

t base64Regex = /^data:image\/(png|jpg|svg|svg\+xml);base64,/; if (url)) { return url; } const Img = new Image() let dataURL = '' Img.setAttribute('crossOrigin', 'Anonymous') Img.src = url + '?v=' + Ma() Img.onload = function () { // 要先确保图片完整获取到，这是个异步事件 const canvas = document.createElement('canvas') // 创建canvas元素 const width = Img.width // 确保canvas的尺寸和图片一样 const height = Img.height canvas.width = width canvas.height = height canvas.getContext('2d').drawImage(Img, 0, 0, width, height) // 将图片绘制到canvas中 dataURL = canvas.toDataURL('image/jpeg') // 转换图片为dataURL resolve(dataURL) } }) } export const exportWord = ({ file = "in;, data, filename = "下载文档", fileType = "docx", folder = "下载文档" } = {}) => { // 批量下载生成压缩包 const Zip = new JSZip() if (data)) { da((item, index) => { // 读取并获得模板文件的二进制内容 JSZi(file, (error, content) => { // in是模板。我们在导出的时候，会根据此模板来导出对应的数据 // 抛出异常 if (error) { throw error } // 图片处理 let opts = {} o = true; // 图片居中 o = (tagValue, tagName) => { return new Promise((resolve, reject) => { JSZi(tagValue, (error, content) => { if (error) { return reject(error); } return resolve(content); }); }); } o = () => { return [400, 200] } let imageModule = new ImageModule(opts); // 创建一个JSZip实例，内容为模板的内容 const zip = new PizZip(content); // 创建并加载docxtemplater实例对象 let doc = new docxtemplater().loadZip(zip).attachModule(imageModule).compile(); let word = Zip.folder(folder) doc.resolveData(item).then(() => { doc.render(); const out = doc.getZip().generate({ type: "blob", mimeType: "application;, }); word.file(`${i ? i : filename + index}.${fileType}`, out) }) con(word, 'word') }) }) setTimeout(() => { Zip.generateAsync({ type: "blob" }) // zip下载 .then((content) => { saveAs(content, `${folder}.zip`); // zip下载后的名字 }); }, 1000) } else { // 读取并获得模板文件的二进制内容 JSZi(file, (error, content) => { // 抛出异常 if (error) { throw error } // 图片处理 let opts = {} o = true; // 图片居中，在word模板中定义方式为{%image} o = (tagValue, tagName) => { return new Promise((resolve, reject) => { JSZi(tagValue, (error, content) => { if (error) { return reject(error); } return resolve(content); }); }); } o = () => { return [600, 300] } let imageModule = new ImageModule(opts); const zip = new PizZip(content); // 创建并加载docxtemplater实例对象 let doc = new docxtemplater().loadZip(zip).attachModule(imageModule).compile(); // 如果包含异步数据，用resolveData，在回调之后再处理，如果都是同步数据，直接用setData就可以 doc.resolveData(data).then(() => { try { // 用模板变量的值替换所有模板变量 doc.render(); // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示） const out = doc.getZip().generate({ type: "blob", mimeType: "application; }); // 将目标文件对象保存为目标类型的文件，并命名 saveAs(out, `${filename}.${fileType}`); } catch (error) { // 抛出异常 const e = { message: error.message, name: error.name, stack: error.stack, properties: error.properties }; con({ error: e })); throw error; } }) }); } }

使用

导入上面定义的JS,使用exportWord方法

import {exportWord} from './exportWord' const config = { file: ";, filename:'下载文档', fileType:'docx', folder:'下载文档', data: {}// 数据 } exportWord(config)

参数说明：

参数	类型	默认值	说明
file	String		模板文件的地址
filename	String	下载文档	文件名称
fileType	String	docx	文件类型
folder	String	下载文档	批量下载压缩包的文件名
data	Array/Object	{}	数据(数组默认批量，对象默认单个下载）

开发的过程中也看到了别人写的，也借鉴参考学到了很多，这地方再进行整合下希望能帮助到也需要相似功能的你们。