这篇文章主要介绍“vue怎么导出word”，在日常操作中，相信很多人在vue怎么导出word问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue怎么导出word”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
vue导出word纯前端实现
首先，新建一个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: { // 导出word loadFile(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-URI saveAs(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: { // 导出word loadFile(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-URI saveAs(out, "output.docx") }) }, } }</script><style scoped></style>到此，关于“vue怎么导出word”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！
