vue导出word纯前端实现

最近项目有个需求导出word，纯前端实现，查了查资料，用docxtemplater简直不要太简单。
直接把官网例子拿过来就可以了。！！！
官网地址

首先，新建一个docx文件，把模板先写好。
注意！！如果数据结构中存在数组。用{#xxx}{/xxx} 包裹。
数据结构示例：

 wordData: {name: '导出word',nameList: [{name: "张三",age: 16,hobby: ['吃饭', '睡觉', '打豆豆']},{name: "李四",age: 19,hobby: ['抽烟', '喝酒', '打麻将']},]},

模板写好之后放入项目中。

然后导入需要的包，

npm i docxtemplater pizzip  file-saver  --save

然后在需要的模块内引入

  import 'docxtemplater/build/docxtemplater.js'import 'pizzip/dist/pizzip.js'import 'pizzip/dist/pizzip-utils.js'import 'file-saver'

  methods: {// 导出wordloadFile(url, callback) {PizZipUtils.getBinaryContent(url, callback);},generate() {var that = this;this.loadFile("../../static/word.docx", function (error, content) {if (error) {throw error};var zip = new PizZip(content);var doc = new window.docxtemplater().loadZip(zip)doc.setData({...that.wordData});try {// render the document (replace all occurences of {first_name} by John, {last_name} by Doe, ...)doc.render()} catch (error) {var e = {message: error.message,name: error.name,stack: error.stack,properties: error.properties,}console.log(JSON.stringify({error: e}));// The error thrown here contains additional information when logged with JSON.stringify (it contains a property object).throw error;}var out = doc.getZip().generate({type: "blob",mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",}) //Output the document using Data-URIsaveAs(out, "output.docx")})},}

到此就完事了。

完整代码，安装完包之后直接运行就好。记得放入word模板！！！

<template><div><button @click="generate">导出</button></div>
</template><script>import 'docxtemplater/build/docxtemplater.js'import 'pizzip/dist/pizzip.js'import 'pizzip/dist/pizzip-utils.js'import 'file-saver'export default {data() {return {wordData: {name: '导出word',nameList: [{name: "张三",age: 16,hobby: ['吃饭', '睡觉', '打豆豆']},{name: "李四",age: 19,hobby: ['抽烟', '喝酒', '打麻将']},]},}},methods: {// 导出wordloadFile(url, callback) {PizZipUtils.getBinaryContent(url, callback);},generate() {var that = this;this.loadFile("../../static/word.docx", function (error, content) {if (error) {throw error};var zip = new PizZip(content);var doc = new window.docxtemplater().loadZip(zip)doc.setData({...that.wordData});try {// render the document (replace all occurences of {first_name} by John, {last_name} by Doe, ...)doc.render()} catch (error) {var e = {message: error.message,name: error.name,stack: error.stack,properties: error.properties,}console.log(JSON.stringify({error: e}));// The error thrown here contains additional information when logged with JSON.stringify (it contains a property object).throw error;}var out = doc.getZip().generate({type: "blob",mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",}) //Output the document using Data-URIsaveAs(out, "output.docx")})},}}</script><style scoped></style>

vue导出word纯前端实现相关推荐

使用Vue导出word(纯前端，异步处理图片)
项目需要导出word,于是乎又是查阅资料.然后自己写. 参考链接 https://github.com/evilc0des/docxtemplater-image-module-free https: ...
基于公司需求的探索vue导出word、xls、pdf
技术的应用而生都是基于需求!崇尚技术积累经验! 如何运用开源js库来实现需求,是快速开发的目的!结合自己开发功能的经历来说!使用插件能更好的的解决解决交互的平滑顺畅!由于项目时间限制,只能采用开源的j ...
vue 导出word文档（包括图片）
vue 导出word文档(包括图片) 1.打开终端,安装依赖 -- 安装 docxtemplater npm install docxtemplater pizzip --save-- 安装 jszi ...
Vue导出word附表部分横向显示(承接上一篇Vue纯前端导出word)
Vue纯前端导出word直通车 1. 引入js import htmlDocx from "@/utils/html-docx"; 2. page-break-before:alw ...
前端react，vue导出word的几种方法（可以导出图片）
方法一:mhtml-to-word导出word 方法一详情请看这里 1.安装环境 npm install mhtml-to-word 2.引入使用 import { exportWord } from ...
vue 导出word带图片
下载依赖包 npm install docxtemplater npm install pizzip npm install jszip npm install jszip-utils npm in ...
Vue - 超详细 “纯前端“ 将阿里云 OSS 文件删除流程，支持单个 / 批量删除文件（附带完整示例运行源码，保证新手小白 100% 轻松实现删除功能）
前言如果您需要纯前端将文件上传到阿里云 OSS,请访问:Vue - 上传文件到阿里云 OSS 详细教程 / 各种常见问题! 本文站在新手的角度,从 0-1 完成前端 "阿里云oss&quo ...
vue 导出word文档，支持表格和图片
一.导入包 npm install docxtemplater npm install pizzip npm install jszip npm install jszip-utils npm ins ...
番外-vue 导出word文档（包括屏幕截图）
在线效果(用户名:liu:密码:12345) 点击数据管理统计->数据管理->导出模板按钮参考 1,安装包 npm install docxtemplater pizzip --save ...

vue导出word纯前端实现

vue导出word纯前端实现相关推荐

最新文章

热门文章