当前位置: 首页 > Web前端 > vue.js

vuecli4使用docxtemplater导出word(超级详细)

时间:2023-03-31 21:46:35 vue.js

项目需求:前端级实现word导出功能项目准备:vue脚手架项目(vue-cli4)插件:docxtemplaterpizzipjszipjszip-utilsfile-saver1.安装依赖:npminstalldocxtemplaterpizzip--save//处理docx模板npminstalljszip-utils--savenpminstalljszip@2.6.1--savenpminstallfile-saver--save//处理输出文件坑1:执行npminstalljszip--save会下载最新版本,会报错,一定要指定版本号亲2.创建word模板:public/test.docxvuecli3/vuecli4将word模板test.docx存放在公共档案;vuecli2将word模板test.docx存放在静态文件下;word模板示例:坑2:如果直接在代码编辑器中通过新建文件的方式创建test.docx后,会报错。应该和文件编码格式有关,所以需要进入项目文件夹,右键新建docx文件。编辑好test.docx后,可以在编辑器中看到pulic文件下多了一个~$test.docx文件;这个文件夹基本没问题3.打包导出word组件:src/components/export2word.vue4.页面使用word组件:src/views/page.vue5.填充词模板数据:填充数据取决于渲染数据的结构。这里提供数组和对象数据结构解析变量:{变量名}循环:{#数组名}{元素名1}{元素名2}....{/数组名}条件:{#条件}{变量}{/condition}坑3:注意不能使用JS对象点语法访问变量,对象格式数据访问{#parentobjectname}{sub-property}{/parentobjectname}坑4:表中循环必须开始在表中并在表中结束。好好看看官网,不过看着挺烦人的。附上官网,让你继续省心:https://docxtemplater。com/文档...