vue 导出word
https://www.cnblogs.com/wuqilang/p/14085382.html
https://blog.csdn.net/weixin_43880497/article/details/106275823
yarn add docxtemplater@3.19.7 docxtemplater-image-module-free@1.1.1 file-saver@2.0.5 jszip@2.6.1 jszip-utils@^0.1.0 pizzip@3.0.6
import JSZipUtils from "jszip-utils" import docxtemplater from "docxtemplater" import { saveAs } from 'file-saver' import PizZip from 'pizzip' const ImageModule = require('docxtemplater-image-module-free'); const { downWordPath } = require('@/config')
download() { let _this = this // 读取并获得模板文件的二进制内容 JSZipUtils.getBinaryContent(downWordPath, function (error, content) { if (error) throw error // 抛出异常 var opts = {} opts.centered = false; opts.getImage = function (tagValue, tagName) { 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) { // FOR FIXED SIZE IMAGE : return [50, 50]; } var imageModule = new ImageModule(opts); let zip = new PizZip(content) // 创建一个JSZip实例,内容为模板的内容 // let doc=new docxtemplater().loadZip(zip).compile() //没有图片的 let doc = new docxtemplater().loadZip(zip).attachModule(imageModule) .compile(); // 创建并加载docxtemplater实例对象 带有图片的 doc.resolveData(_this.downloadData).then(function (res) { console.log('ready', res) doc.render() var out = doc.getZip().generate({ type: 'blob', mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', }) //输出文档 saveAs(out, _this.wordName) }) }) },
downWordPath 文件路径
区分本地和生产环境
downData 下载数据
wordName 输出路径
解决默认勾选框的问题
{#registerNation}{checked}{name}{/registerNation} registerNation是我自己在template.docx定义的变量 downloadData里面可以找的 。
{checked}全部选中 包括{} 字体选择wingdings2 自动变为这样
另外千万注意:registerNation单词前后千万不能手贱敲空格 。坑了好久自己
至于上面的 必须在word复制。而 不要wps中复制 !!! 在word复制 前提这份对勾符号换成windings字体 然后再复制到代码中 就出来了 。
也是如此操作
解决图片问题