vue导入word文档,vue导出html
这篇文章主要介绍了某视频剪辑软件导出单词纯前端的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue导出word纯前端实现
最近项目有个需求导出词，纯前端实现，查了查资料，用docxtemplater简直不要太简单。
直接把官网例子拿过来就可以了。
官网地址
首先，新建一个文档文件，把模板先写好。
注意！如果数据结构中存在数组。用{#xxx}{/xxx}包裹。
数据结构示例：
wordData: {
名称： 导出单词，
名单：[{
名称： 张三，
年龄：16岁，
爱好：[吃饭, 睡觉, 打豆豆]
},
{
名称： 李四，
年龄：19,
爱好：[抽烟, 喝酒, 打麻将]
},
]
},
模板写好之后放入项目中。
然后导入需要的包，
npm i docxtemplater pizzip文件保存程序-保存
然后在需要的模块内引入
导入docx模板/build/docx模板。js
导入 pizzip/dist/pizzip.js
导入 pizzip/dist/pizzip-utils.js
导入"文件保存程序"
方法：{
//导出单词
加载文件(网址，回调){
披萨饼。getbinarycontent(URL，回调);
},
生成(){
变那个=这个
this.loadFile(././static/word.docx ，函数（错误，内容){
如果（错误){
投掷误差
};
var zip=new PizZip(内容);
var doc=new window.docxtemplater().loadZip(压缩)
doc.setData({
.that.wordData
});
尝试{
//呈现文档（将所有出现的{名字}替换为约翰姓氏}替换为Doe，)
doc.render()
} catch(错误){
var e={
消息：错误。消息，
名称：错误名称，
堆栈：error.stack
属性：错误。属性，
}
console.log(JSON.stringify({
错误：e
}));
//此处抛出的错误包含用JSON.stringify记录时的附加信息（它包含一个财产对象)。
投掷误差；
}
var out=doc.getZip().生成({
类型：“斑点”，
mime类型：应用程序/vnd。openxml格式-office文档。wordprocessingml。文档，
})//使用数据URI输出文档
另存为(out， output.docx )
})
},
}
到此就完事了。
完整代码，安装完包之后直接运行就好。记得放入单词模板！
模板
差异
按钮@click=生成导出/按钮
/div
/模板
脚本
导入docx模板/build/docx模板。js
导入 pizzip/dist/pizzip.js
导入 pizzip/dist/pizzip-utils.js
导入"文件保存程序"
导出默认值{
data() {
返回{
wordData: {
名称： 导出单词，
名单：[{
名称： 张三，
年龄：16岁，
爱好：[吃饭, 睡觉, 打豆豆]
},
{
名称： 李四，
年龄：19,
爱好：[抽烟, 喝酒, 打麻将]
},
]
},
}
},
方法：{
//导出单词
加载文件(网址，回调){
披萨饼。getbinarycontent(URL，回调);
},
生成(){
变那个=这个
this.loadFile(././static/word.docx ，函数（错误，内容){
如果（错误){
投掷误差
};
var zip=new PizZip(内容);
var doc=new window.docxtemplater().loadZip(压缩)
doc.setData({
.that.wordData
});
尝试{
//呈现文档（将所有出现的{名字}替换为约翰姓氏}替换为Doe，)
doc.render()
} catch(错误){
var e={
消息：错误。消息，
名称：错误名称，
堆栈：error.stack
属性：错误。属性，
}
console.log(JSON.stringify({
错误：e
}));
//此处抛出的错误包含用JSON.stringify记录时的附加信息（它包含一个财产对象)。
投掷误差；
}
var out=doc.getZip().生成({
类型：“斑点”，
mime类型：应用程序/vnd。openxml格式-office文档。wordprocessingml。文档，
})//使用数据URI输出文档
另存为(out， output.docx )
})
},
}
}
/脚本
样式范围
/风格
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。