卡塔尔世界杯排名_98世界杯决赛 - dylfjc.com

(超详细)vue 向 docx模板中填充数据生成目标docx 文件

目录

效果展示

一.先安装对应依赖

二.在src下新建 utils 目录，新建docx.js 文件，并引入依赖包

三.准备模板

四.使用 首先将准备的docx模板放入 public 文件下下

五.在页面中引入之前封装好的utils下的js

效果展示

一.先安装对应依赖

npm install docxtemplater pizzip --save-dev

npm install jszip-utils --save

npm install jszip --save

npm install file-saver --save

二.在src下新建 utils 目录，新建docx.js 文件，并引入依赖包

import Docxtemplater from 'docxtemplater'

import PizZip from 'pizzip'

import JSZipUtils from 'jszip-utils'

import { saveAs } from 'file-saver'

/**

4. 导出docx

5. @param { String } tempDocxPath 模板文件路径

6. @param { Object } data 文件中传入的数据

7. @param { String } fileName 导出文件名称

*/

export const exportDocx = (tempDocxPath, data, fileName) => {

// 读取并获得模板文件的二进制内容

JSZipUtils.getBinaryContent(tempDocxPath, (error, content) => {

if (error) {

throw error

}

const zip = new PizZip(content)

const doc = new Docxtemplater().loadZip(zip)

console.log(doc)

doc.setData(data)

try {

// render the document (replace all occurences of {first_name} by John, {last_name} by Doe, ...)

doc.render()

} catch (error) {

const e = {

message: error.message,

name: error.name,

stack: error.stack,

properties: error.properties

}

console.log({

error: e

})

// The error thrown here contains additional information when logged with JSON.stringify (it contains a property object).

throw error

}

const out = doc.getZip().generate({

type: 'blob',

mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'

}) // Output the document using Data-URI

saveAs(out, fileName)

})

}

三.准备模板

在模板中，将要填充的地方用 {} 包裹一个key值，这就是后面你要传递的数据的key，举例说明 如果你想在联系电话中填充你想填充的号码，此时 你的模板内容 是 {userName}，你传递数据的时候就要写成

{userName: '138xxxxxxx'}

如果数据中涉及有数组

ibj:{

name:'',

conditionCons:[

{

groupName：'上海'，

cont：'30'

},

{

groupName：'重庆'，

cont：'20'

}

]

}

//#conditionCons 循环这个数组 groupName cont 数组中的字段

{#conditionCons}

{groupName}

{cont}

{/conditionCons}

四.使用 首先将准备的docx模板放入 public 文件下下

public

favicon.ico

indext.thmt

templete.docx

注意：一定要放在这个文件下，否则会报错

五.在页面中引入之前封装好的utils下的js

exportDocx('/templete.docx', {userName: '鸡汤'}, '模版.docx')

// 参数一： word 模板路径

// 参数二： 回显的数据

// 一般情况下数据为object 在word 模板中以 {字段} 回显

//如果字段中有涉及数组数据回显时

如 ibj:{

title:'Word数据回显',

year:'2023',

workGroup:'这是一个大标题',

conditionDate:'2023-07-14 00:00:00',

conditionCons:[

{

groupName：'1.标题1'，

cont：'内容内容'

},

{

groupName：'2.标题二'，

cont：'内容内容'

}

]

...

...

}

{#conditionCons} //循环这个字段

{groupName} //数组中 对应的字段

{cont}

{/conditionCons}

//参数三 ： 导出word文件名称

注意这里的

exportDocx('/templete.docx', {userName: '鸡汤'}, '模版.docx')

注意这里的路径一定是 /templete.docx，否则都会报这个错

[HMR] Waiting for update signalfrom WDS.Uncaught Error: Error: Can't find end of central directory : is this a zip file ?at xhr.onreadystatechange (index.js?0083:110:1)

log.js?1afd:24

docx.js?2b2e:16

一定是放在public文件下，然后路径写成这样才可以，如果你的vue-cli 版本是2 就放在 static 文件下，这样就可以将你填充的docx模板下载下来