vue 数据导出,vue导出表格数据

　　这篇文章主要介绍了某视频剪辑软件实现导出单词文件（数据流方式),具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

　　第一步：安装依赖：jquery和文件保护程序第二步：新增jquery.wordexport.js第三步：组件使用某视频剪辑软件导出单词文件（模板方式)vue导出单词文档（包括图片)jquery.wordexport.js，通过该插件可以导出文本和图片，图片通过帆布的形式绘制，文本则需要依赖FileSaver.js插件。

　　FileSaver.js插件则主要通过H5的文件操作新特性新斑点()和新文件读取器()来实现文本的导出。

第一步：安装依赖：jquery 和file-saver

　　新公共管理安装框架文件-保存程序-保存

第二步：新增jquery.wordexport.js

　　在科学研究委员会下的资产中新增射流研究…文件夹，新增jquery.wordexport.js文件

　　//导入射流研究…文件

　　从" jquery "中导入$

　　从"文件保存程序"导入另存为

　　if (typeof $！==未定义类型的另存为！==未定义){

　　（函数($) {

　　$.fn.wordExport=函数（文件名){

　　文件名=文件名类型！==未定义？文件名：“jQuery-Word-Export”；

　　变量静态={

　　mhtml: {

　　顶部：“Mime版本：1.0 \ n内容库：”位置。href \ n content-Type:Multipart/related；boundary=\ 下一个。项目边界\ ;type=\text/html\\n\n -下一步。项目边界\ n内容类型：text/html；charset=\ utf-8 \ \ n content-Location: Location。href \ n \ n！ DOCTYPE html\nhtml\n_html_/html ，

　　head: head \ n meta http-equiv=\ Content-Type \ Content=\ text/html；charset=utf-8 \ \ n style \ n _ styles _ \ n/style \ n/head \ n ，

　　正文： body_body_/body

　　}

　　};

　　定义变量选项={

　　最大宽度：624

　　};

　　//在操纵所选元素之前克隆它

　　定义变量加价=$(这个).clone()；

　　//从输出中移除隐藏元素

　　markup.each(function () {

　　var self=$(这个);

　　if (self.is(:hidden ))

　　自我。移除()；

　　});

　　//使用数据统一资源定位器嵌入所有图像

　　var images=Array()；

　　var img=标记。find( img )；

　　for(var I=0；我。图像长度；i ) {

　　//计算输出图像的尺寸

　　var w=Math.min(img[i].宽度，选项。maxwidth)；

　　var h=img[i].高度* (w/img[i]).宽度);

　　//创建用于将图像转换为数据统一资源定位器的画布

　　var CANVAS=文档。createelement(“CANVAS”)；

　　画布。宽度=w；

　　画布。高度=h；

　　//将图像绘制到画布

　　var context=画布。获取上下文(“2d”)；

　　context.drawImage(img[i]，0，0，w，h)；

　　//获取图像的数据统一资源定位器编码

　　var uri=canvas。toda taurl( image/png/jpg )；

　　$(img[i]).attr(src ，img[i].src)；

　　img[i].宽度=w；

　　img[i].高度=h；

　　//将编码图像保存到数组

　　图像[i]={

　　类型：uri。子字符串(uri。(“:”)1的索引，uri。的索引(“；”))),

　　编码：uri。子字符串(uri。的索引(“；”))1，uri.indexOf(，)，

　　位置：$(img[i]).attr(src )，

　　data: uri.substring(uri.indexOf(，)1)

　　};

　　}

　　//用图像数据准备单个文件网页文件的底部

　　var mhtmlBottom= \ n

　　for(var j=0；j图像。长度；j ) {

　　mhtmlBottom= -下一个。项目边界\ n ；

　　mhtmlBottom= Content-Location: images[j].位置”\ n”；

　　mhtmlBottom= Content-Type: images[j].键入”\ n”；

　　mhtmlBottom= Content-Transfer-Encoding: images[j].编码”\ n \ n”；

　　mhtmlBottom=images[j].数据”\ n \ n”；

　　}

　　mhtmlBottom= -下一个。项目边界-;

　　//TODO:从包含的样式表加载钢性铸铁

　　//var styles=/* Font Definitions */@ Font-face { Font-family:宋体；panose-1:2 1 6 0 3 1 1 1 1 1；MSO-font-alt:SimSun；MSO-font-charset:134；MSO-通用-字体-家庭：汽车；mso字体间距：变量；MSO-字体-签名：3 680460288 22 0 262145 0；} @ font-face { font-family: Cambria Math ；panose-1:2 4 5 3 5 4 6 3 2 4；MSO-font-charset:1；MSO-通用-字体-家庭：罗马；mso字体格式：其他；mso字体间距：变量；MSO-字体-签名：0 0 0 0 0 0；} @font-face{font-family:\@宋体；panose-1:2 1 6 0 3 1 1 1 1 1；MSO-font-charset:134；MSO-通用-字体-家庭：汽车；mso字体间距：变量；MSO-字体-签名：3 680460288 22 0 262145 0；}/*样式定义*/p.MsoNormal，李.MsoNormal分区MSO师范{ MSO式-取消隐藏：否；mso-style-qformat:是；MSO式-家长：“”；边距0厘米边距-底部：0001磅；MSO-分页：寡妇-孤儿；字体大小：14.0磅；字体系列：宋体；mso-bidi-font-family:宋体；李MsoHeader，div .MsoHeader{mso-style-noshow:是；MSO风格的-优先级：99; mso-style-link:页眉char ；边距0厘米边距-底部：0001磅；文本对齐：居中；MSO-分页：寡妇-孤儿；布局-网格-模式：字符字体大小：9.0磅；字体系列：宋体；mso-bidi-font-family:宋体；李MsoFooter分区MSO奥特{ MSO式——不秀：是；MSO风格的-优先级：99; mso-style-link:页脚char ；边距0厘米边距-底部：0001磅；MSO-分页：寡妇-孤儿；布局-网格-模式：字符字体大小：9.0磅；字体系列：宋体；mso-bidi-font-family:宋体；}p.MsoAcetate，李100 . MsoAcetate分区MsoAcetate{mso-style-noshow:是；MSO风格的-优先级：99; mso-style-link:批注框文本char ；边距0厘米边距-底部：0001磅；MSO-分页：寡妇-孤儿；字体大小：9.0磅；字体系列：宋体；mso-bidi-font-family:宋体；}span .Char{mso-style-name:页眉char ；mso-style-noshow:是；MSO风格的-优先级：99;MSO-style-取消隐藏：否；mso样式锁定：是；友邦样式链接：页眉；字体系列：宋体；MSO-ascii-字体系列：宋体；mso-fareast-font-family:宋体；MSO-汉斯-字体系列：宋体；}span .Char0{mso-style-name:页脚char ；mso-style-noshow:是；MSO风格的-优先级：99;MSO-style-取消隐藏：否；mso样式锁定：是；友邦样式链接：页脚；字体系列：宋体；MSO-ascii-字体系列：宋体；mso-fareast-font-family:宋体；MSO-汉斯-字体系列：宋体；}span .Char1{mso-style-name:批注框文本char ；mso-style-noshow:是；MSO风格的-优先级：99;MSO-style-取消隐藏：否；mso样式锁定：是；友邦样式链接：批注框文本；字体系列：宋体；MSO-ascii-字体系列：宋体；mso-fareast-font-family:宋体；MSO-汉斯-字体系列：宋体；}p.msochpdefault，li.msochpdefault，div。msochpdefault { MSO式-名称：msochpdefault；MSO-style-取消隐藏：否；MSO-保证金-顶-alt:自动；右边距：0 cmmso-margin-bottom-alt:auto；左边距：0cmMSO-分页：寡妇-孤儿；字体大小：10.0磅；字体系列：宋体；mso-bidi-font-family:宋体；} span。msonormal 0 { MSO式名称：msonormal；MSO-style-取消隐藏：否；}.MsoChpDefault{mso-style-type:仅导出；MSO-默认-属性：是；字体大小：10.0磅；MSO-ansi-font-size:10.0磅；MSO-比迪-字体大小：10.0磅；MSO-ascii-font-family: Times New Roman ；MSO-汉斯-font-family: Times New Roman ；MSO-字体-字距：0pt}/*页面定义*/@ Page words section 1 { size:595.3 pt 841.9 pt；边距：72.0 pt 90.0 pt 72.0 pt 90.0 ptMSO-标题-保证金：42.55点；MSO-页脚-边距：49.6磅；MSO-纸-来源：0；}div .word section 1 { page:word section 1；};

　　var styles=

　　//将文件的各个部分聚合在一起

　　var文件内容=静态。mhtml。顶端。替换( _ html _ )，静态。mhtml。头。替换( _ styles _ ，styles)静态。mhtml。身体。替换( _ body _ )，标记。html()))mhtmlBottom；

　　//用文件内容创建一个一滴

　　var blob=新斑点([文件内容],{

　　类型：应用程序/ms word；charset=utf-8

　　});

　　另存为(blob，文件名。doc’)；

　　};

　　})($);

　　}否则{

　　if (typeof $===undefined) {

　　控制台。错误( jQuery Word Export:缺少依赖项(jQuery))；

　　}

　　if(另存为类型===未定义){

　　控制台。错误( jQuery Word导出：缺少依赖项(文件保护程序。js))；

　　}

第三步：组件使用

　　注意：只能写行内样式

　　模板

　　div class=home

　　button @click=exportWord 导出/按钮

　　div id=word_demo

　　p style= font-size:20px；颜色：红色；评标区/p

　　h1 style= font-size:20px；颜色：蓝色；标题/h1

　　img alt=Vue logo src=./assets/logo.png /

　　/div

　　/模板

　　从" jquery "中导入$

　　要求( @/assets/js/jquery.wordexport )

　　导出默认值{

　　姓名：家，

　　方法：{

　　exportWord() {

　　setTimeout(function() {

　　$(#word_demo ).wordExport(word文档)

　　}, 300)

　　}

vue导出Word文件（模板方式）

　　扩展

　　jquery.wordexport.js源码

　　if(jQuery的类型！==未定义类型的另存为！==未定义){

　　（函数($) {

　　$.fn.wordExport=函数（文件名){

　　文件名=文件名类型！==未定义？文件名：“jQuery-Word-Export”；

　　变量静态={

　　mhtml: {

　　head: head \ n meta http-equiv=\ Content-Type \ Content=\ text/html；charset=utf-8 \ \ n style \ n _ styles _ \ n/style \ n/head \ n ，

　　正文： body_body_/body

　　}

　　};

　　定义变量选项={

　　最大宽度：624

　　};

　　//在操纵所选元素之前克隆它

　　定义变量加价=$(这个).clone()；

　　//从输出中移除隐藏元素

　　markup.each(function () {

　　var self=$(这个);

　　if (self.is(:hidden ))

　　自我。移除()；

　　});

　　//使用数据统一资源定位器嵌入所有图像

　　var images=Array()；

　　var img=标记。find( img )；

　　for(var I=0；我。图像长度；i ) {

　　//计算输出图像的尺寸

　　var w=Math.min(img[i].宽度，选项。maxwidth)；

　　var h=img[i].高度* (w/img[i]).宽度);

　　//创建用于将图像转换为数据统一资源定位器的画布

　　var CANVAS=文档。createelement(“CANVAS”)；

　　画布。宽度=w；

　　画布。高度=h；

　　//将图像绘制到画布

　　var context=画布。获取上下文(“2d”)；

　　context.drawImage(img[i]，0，0，w，h)；

　　//获取图像的数据统一资源定位器编码

　　var uri=canvas。toda taurl( image/png/jpg )；

　　$(img[i]).attr(src ，img[i].src)；

　　img[i].宽度=w；

　　img[i].高度=h；

　　//将编码图像保存到数组

　　图像[i]={

　　类型：uri。子字符串(uri。(“:”)1的索引，uri。的索引(“；”))),

　　编码：uri。子字符串(uri。的索引(“；”))1，uri.indexOf(，)，

　　位置：$(img[i]).attr(src )，

　　data: uri.substring(uri.indexOf(，)1)

　　};

　　}

　　//用图像数据准备单个文件网页文件的底部

　　var mhtmlBottom= \ n

　　for(var I=0；我图像。长度；i ) {

　　mhtmlBottom= -下一个。项目边界\ n ；

　　mhtmlBottom= Content-Location: images[I].位置”\ n”；

　　mhtmlBottom= Content-Type: images[I].键入”\ n”；

　　mhtmlBottom= Content-Transfer-Encoding: images[I].编码”\ n \ n”；

　　mhtmlBottom=images[i].数据”\ n \ n”；

　　}

　　mhtmlBottom= -下一个。项目边界-;

　　//TODO:从包含的样式表加载钢性铸铁

　　//var styles=/* Font Definitions */@ Font-face { Font-family:宋体；panose-1:2 1 6 0 3 1 1 1 1 1；MSO-font-alt:SimSun；MSO-font-charset:134；MSO-通用-字体-家庭：汽车；mso字体间距：变量；MSO-字体-签名：3 680460288 22 0 262145 0；} @ font-face { font-family: Cambria Math ；panose-1:2 4 5 3 5 4 6 3 2 4；MSO-font-charset:1；MSO-通用-字体-家庭：罗马；mso字体格式：其他；mso字体间距：变量；MSO-字体-签名：0 0 0 0 0 0；} @font-face{font-family:\@宋体；panose-1:2 1 6 0 3 1 1 1 1 1；MSO-font-charset:134；MSO-通用-字体-家庭：汽车；mso字体间距：变量；MSO-字体-签名：3 680460288 22 0 262145 0；}/*样式定义*/p.MsoNormal，李.MsoNormal分区MSO师范{ MSO式-取消隐藏：否；mso-style-qformat:是；MSO式-家长：“”；边距0厘米边距-底部：0001磅；MSO-分页：寡妇-孤儿；字体大小：14.0磅；字体系列：宋体；mso-bidi-font-family:宋体；李MsoHeader，div .MsoHeader{mso-style-noshow:是；MSO风格的-优先级：99; mso-style-link:页眉char ；边距0厘米边距-底部：0001磅；文本对齐：居中；MSO-分页：寡妇-孤儿；布局-网格-模式：字符字体大小：9.0磅；字体系列：宋体；mso-bidi-font-family:宋体；李MsoFooter分区MSO奥特{ MSO式——不秀：是；MSO风格的-优先级：99; mso-style-link:页脚char ；边距0厘米边距-底部：0001磅；MSO-分页：寡妇-孤儿；布局-网格-模式：字符字体大小：9.0磅；字体系列：宋体；mso-bidi-font-family:宋体；}p.MsoAcetate，李100 . MsoAcetate分区MsoAcetate{mso-style-noshow:是；MSO风格的-优先级：99; mso-style-link:批注框文本char ；边距0厘米边距-底部：0001磅；MSO-分页：寡妇-孤儿；字体大小：9.0磅；字体系列：宋体；mso-bidi-font-family:宋体；}span .Char{mso-style-name:页眉char ；mso-style-noshow:是；MSO风格的-优先级：99;MSO-style-取消隐藏：否；mso样式锁定：是；友邦样式链接：页眉；字体系列：宋体；MSO-ascii-字体系列：宋体；mso-fareast-font-family:宋体；MSO-汉斯-字体系列：宋体；}span .Char0{mso-style-name:页脚char ；mso-style-noshow:是；MSO风格的-优先级：99;MSO-style-取消隐藏：否；mso样式锁定：是；友邦样式链接：页脚；字体系列：宋体；MSO-ascii-字体系列：宋体；mso-fareast-font-family:宋体；MSO-汉斯-字体系列：宋体；}span .Char1{mso-style-name:批注框文本char ；mso-style-noshow:是；MSO风格的-优先级：99;MSO-style-取消隐藏：否；mso样式锁定：是；友邦样式链接：批注框文本；字体系列：宋体；MSO-ascii-字体系列：宋体；mso-fareast-font-family:宋体；MSO-汉斯-字体系列：宋体；}p.msochpdefault，li.msochpdefault，div。msochpdefault { MSO式-名称：msochpdefault；MSO-style-取消隐藏：否；MSO-保证金-顶-alt:自动；右边距：0 cmmso-margin-bottom-alt:auto；左边距：0cmMSO-分页：寡妇-孤儿；字体大小：10.0磅；字体系列：宋体；mso-bidi-font-family:宋体；} span。msonormal 0 { MSO式名称：msonormal；MSO-style-取消隐藏：否；}.MsoChpDefault{mso-style-type:仅导出；MSO-默认-属性：是；字体大小：10.0磅；MSO-ansi-font-size:10.0磅；MSO-比迪-字体大小：10.0磅；MSO-ascii-font-family: Times New Roman ；MSO-汉斯-font-family: Times New Roman ；MSO-字体-字距：0pt}/*页面定义*/@ Page words section 1 { size:595.3 pt 841.9 pt；边距：72.0 pt 90.0 pt 72.0 pt 90.0 ptMSO-页眉-页边距：42.55磅；MSO-页脚-边距：49.6磅；MSO-纸-来源：0；}div .word section 1 { page:word section 1；};

　　var styles=

　　//将文件的各个部分聚合在一起

　　var文件内容=静态。mhtml。顶端。替换( _ html _ )，静态。mhtml。头。替换( _ styles _ ，styles)静态。mhtml。身体。替换( _ body _ )，标记。html()))mhtmlBottom；

　　//用文件内容创建一个一滴

　　var blob=新斑点([文件内容],{

　　类型：应用程序/ms word；charset=utf-8

　　});

　　另存为(blob，文件名。doc’)；

　　};

　　})(jQuery)；

　　}否则{

　　if(jQuery的类型=== undefined ){

　　控制台。错误( jQuery Word Export:缺少依赖项(jQuery))；

　　}

　　if(另存为类型===未定义){

　　控制台。错误( jQuery Word导出：缺少依赖项(文件保护程序。js))；

　　}

　　FileSaver.js源码

　　/* FileSaver.js

　　*另存为()文件保护程序实现。

　　* 1.3.2

　　* 2016-06-16 18:25:19

　　*作者伊莱格雷，http://eligrey.com

　　*许可证：麻省理工学院

　　*参见https://github.com/eligrey/FileSaver.js/blob/master/LICENSE.md

　　/*全局自我*/

　　/*jslint bitwise: true，indent: 4，laxbreak: true，laxcomma: true，smarttabs: true，plusplus: true */

　　/*!@ source http://purl。伊莱.格雷。com/github/文件保护程序。js/blob/master/file saver。js */

　　var saveAs=saveAs (函数（视图){

　　使用严格的；

　　//IE 10是显式不支持的

　　如果(视图类型===未定义导航类型！==undefined /MSIE [1-9]\ ./.测试(navigator.userAgent)) {

　　返回；

　　}

　　定义变量

　　文档=视图。文档

　　//仅在Blob.js尚未覆盖统一资源定位器的情况下，在必要时获取统一资源定位器

　　，get_URL=function () {

　　返回视图URL view.webkitURL view

　　}

　　，save _ link=doc。createelementns( http://www。w3。org/1999/XHTML ， a )

　　，can _ use _ save _ link= download in save _ link

　　,点击=功能（节点){

　　var event=新的鼠标事件( click )；

　　node.dispatchEvent(事件);

　　}

　　，is_safari=/constructor/i.test(查看. HTMLElement)

　　，is_chrome_ios=/CriOS\/[\d] /.测试(navigator.userAgent)

　　，throw_outside=function (ex) {

　　(查看。设置即时视图。settimeout)(函数(){

　　扔ex；

　　}, 0);

　　}

　　，force _ saveable _ type= application/octet-stream

　　Blob API从根本上被破坏，因为没有要订阅的"下载完成"事件

　　,任意_撤销_超时=1000 * 40 //毫秒

　　，撤销=函数（文件){

　　var revoker=function () {

　　if(文件类型=== string ){//文件是一个对象统一资源定位器

　　get_URL().revokeObjectURL(文件);

　　} else { //file是一个文件

　　文件。移除()；

　　}

　　};

　　setTimeout(revoker，arbitrary _ revoke _ time out)；

　　}

　　，调度=功能(文件保存器，事件类型，事件){

　　event_types=[].concat(event _ types)；

　　var i=event _ types.length

　　while (i - ) {

　　var listener=file saver[ on event _ types[I]]；

　　if(侦听器类型===函数){

　　尝试{

　　listener.call(filesaver，event file saver)；

　　} catch (ex) {

　　throw _ outside(ex)；

　　}

　　，auto_bom=function (blob) {

　　//为UTF-8 XML和文本/*类型（包括HTML)预设月初（beginning of month的缩写）

　　//注意：您的浏览器会自动将UTF-16 U FEFF转换为字节

　　如果(/^\s*(？text \/\ S * application \/XML \ S * \/\ S * \ XML)\ S *；* charset \ s *=\ s * utf-8/I . test(blob。类型)){

　　返回新的blob([字符串。from charcode(0x feff)，blob]，{ type:Blob。type })；

　　}

　　返回一滴

　　}

　　，FileSaver=function (blob，name，no_auto_bom) {

　　如果(!no_auto_bom) {

　　blob=auto _ BOM(blob)；

　　}

　　//首先尝试下载，然后是网文件系统，然后是对象统一资源定位器

　　定义变量

　　filesaver=this

　　，type=blob.type

　　，force=type===force _ saveable _ type

　　,对象_url

　　，dispatch_all=function () {

　　dispatch(filesaver，写入开始进度写入写入结束 .拆分("");

　　}

　　//在任何filesys上，错误恢复为使用对象统一资源定位器保存

　　，fs_error=function () {

　　if((is _ chrome _ IOs (force is _ safari))查看FileReader) {

　　//游猎不允许下载blob urls

　　var reader=new FileReader()；

　　reader.onloadend=function () {

　　var url=is_chrome_ios？读者。结果：reader.result.replace(/^data:[^；]*;/,数据：附件/文件；);

　　var popup=view.open(url， _ blank )；

　　如果(!弹出)视图。位置。href=URL

　　url=未定义；//调度前释放引用

　　filesaver.readyState=filesaver .搞定；

　　dispatch _ all()；

　　};

　　读者。readasdataurl(blob)；

　　filesaver.readyState=filesaver .初始化

　　返回；

　　}

　　//不要创建多余的对象统一资源定位器

　　如果(!object_url) {

　　object_url=get_URL().createObjectURL(blob)；

　　 }

　　 if (force) {

　　 view.location.href = object_url;

　　 } else {

　　 var opened = view.open(object_url, "_blank");

　　 if (!opened) {

　　 // Apple does not allow window.open, see https://developer.apple.com/library/safari/documentation/Tools/Conceptual/SafariExtensionGuide/WorkingwithWindowsandTabs/WorkingwithWindowsandTabs.html

　　 view.location.href = object_url;

　　 }

　　 filesaver.readyState = filesaver.DONE;

　　 dispatch_all();

　　 revoke(object_url);

　　 }

　　 ;

　　 filesaver.readyState = filesaver.INIT;

　　 if (can_use_save_link) {

　　 object_url = get_URL().createObjectURL(blob);

　　 setTimeout(function () {

　　 save_link.href = object_url;

　　 save_link.download = name;

　　 click(save_link);

　　 dispatch_all();

　　 revoke(object_url);

　　 filesaver.readyState = filesaver.DONE;

　　 });

　　 return;

　　 }

　　 fs_error();

　　 }

　　 , FS_proto = FileSaver.prototype

　　 , saveAs = function (blob, name, no_auto_bom) {

　　 return new FileSaver(blob, name blob.name "download", no_auto_bom);

　　 }

　　 ;

　　 // IE 10+ (native saveAs)

　　 if (typeof navigator !== "undefined" && navigator.msSaveOrOpenBlob) {

　　 return function (blob, name, no_auto_bom) {

　　 name = name blob.name "download";

　　 if (!no_auto_bom) {

　　 blob = auto_bom(blob);

　　 }

　　 return navigator.msSaveOrOpenBlob(blob, name);

　　 };

　　 }

　　 FS_proto.abort = function () { };

　　 FS_proto.readyState = FS_proto.INIT = 0;

　　 FS_proto.WRITING = 1;

　　 FS_proto.DONE = 2;

　　 FS_proto.error =

　　 FS_proto.onwritestart =

　　 FS_proto.onprogress =

　　 FS_proto.onwrite =

　　 FS_proto.onabort =

　　 FS_proto.onerror =

　　 FS_proto.onwriteend =

　　 null;

　　 return saveAs;

　　}(

　　 typeof self !== "undefined" && self

　　 typeof window !== "undefined" && window

　　 this.content

　　));

　　// `self` is undefined in Firefox for Android content script context

　　// while `this` is nsIContentFrameMessageManager

　　// with an attribute `content` that corresponds to the window

　　if (typeof module !== "undefined" && module.exports) {

　　 module.exports.saveAs = saveAs;

　　} else if ((typeof define !== "undefined" && define !== null) && (define.amd !== null)) {

　　 define([], function () {

　　 return saveAs;

　　 });

　　}

vue导出word文档（包括图片）

　　1.安装依赖

　　-- 安装 docxtemplater

　　npm install docxtemplater pizzip --save

　　-- 安装 jszip-utils

　　npm install jszip-utils --save

　　-- 安装 jszip

　　npm install jszip --save

　　-- 安装 FileSaver

　　npm install file-saver --save

　　2.创建exportFile.js（导出word方法）

　　import PizZip from pizzip

　　import docxtemplater from docxtemplater

　　import JSZipUtils from jszip-utils

　　import { saveAs } from file-saver

　　/**

　　 * 将base64格式的数据转为ArrayBuffer

　　 * @param {Object} dataURL base64格式的数据

　　function base64DataURLToArrayBuffer (dataURL) {

　　 const base64Regex = /^data:image\/(pngjpgjpegsvgsvg\+xml);base64,/;

　　 if (!base64Regex.test(dataURL)) {

　　 return false;

　　 }

　　 const stringBase64 = dataURL.replace(base64Regex, "");

　　 let binaryString;

　　 if (typeof window !== "undefined") {

　　 binaryString = window.atob(stringBase64);

　　 } else {

　　 binaryString = new Buffer(stringBase64, "base64").toString("binary");

　　 }

　　 const len = binaryString.length;

　　 const bytes = new Uint8Array(len);

　　 for (let i = 0; i < len; i++) {

　　 const ascii = binaryString.charCodeAt(i);

　　 bytes[i] = ascii;

　　 }

　　 return bytes.buffer;

　　}

　　/**

　　 * 导出word,支持图片

　　 * @param {Object} tempDocxPath 模板文件路径

　　 * @param {Object} wordData 导出数据

　　 * @param {Object} fileName 导出文件名

　　 * @param {Object} imgSize 自定义图片尺寸

　　export const exportWord = (tempDocxPath, wordData, fileName, imgSize) => {

　　 // 这里要引入处理图片的插件

　　 var ImageModule = require(docxtemplater-image-module-free);

　　 const expressions = require("angular-expressions");

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

　　 JSZipUtils.getBinaryContent(tempDocxPath, function (error, content) {

　　 if (error) {

　　 throw error;

　　 }

　　 expressions.filters.size = function (input, width, height) {

　　 return {

　　 data: input,

　　 size: [width, height],

　　 };

　　 // function angularParser (tag) {

　　 // const expr = expressions.compile(tag.replace(//g, ""));

　　 // return {

　　 // get (scope) {

　　 // return expr(scope);

　　 // },

　　 // };

　　 // }

　　 // 图片处理

　　 let opts = {}

　　 opts = {

　　 // 图像是否居中

　　 centered: false

　　 };

　　 opts.getImage = (chartId) => {

　　 // console.log(chartId);//base64数据

　　 // 将base64的数据转为ArrayBuffer

　　 return base64DataURLToArrayBuffer(chartId);

　　 }

　　 opts.getSize = function (img, tagValue, tagName) {

　　 // console.log(img);//ArrayBuffer数据

　　 // console.log(tagValue);//base64数据

　　 // console.log(tagName);//wordData对象的图像属性名

　　 // 自定义指定图像大小

　　 if (imgSize.hasOwnProperty(tagName)){

　　 return imgSize[tagName];

　　 } else {

　　 return [600, 350];

　　 }

　　 // 创建一个PizZip实例，内容为模板的内容

　　 let zip = new PizZip(content);

　　 // 创建并加载docxtemplater实例对象

　　 let doc = new docxtemplater();

　　 doc.attachModule(new ImageModule(opts));

　　 doc.loadZip(zip);

　　 doc.setData(wordData);

　　 try {

　　 // 用模板变量的值替换所有模板变量

　　 doc.render();

　　 } catch (error) {

　　 // 抛出异常

　　 let e = {

　　 message: error.message,

　　 stack: error.stack,

　　 properties: error.properties

　　 };

　　 console.log(JSON.stringify({

　　 error: e

　　 }));

　　 throw error;

　　 }

　　 // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）

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

　　 type: "blob",

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

　　 });

　　 // 将目标文件对象保存为目标类型的文件，并命名

　　 saveAs(out, fileName);

　　 });

　　}

　　3.组件调用

　　 <a-form-model

　　 ref="ruleForm"

　　 :model="form"

　　 :rules="rules"

　　 :label-col="labelCol"

　　 :wrapper-col="wrapperCol"

　　 <a-form-model-item label="名称" prop="name">

　　 <a-input-number v-model="form.name" style="width:100%;"/>

　　 </a-form-model-item>

　　 <a-form-model-item label="日期" prop="date">

　　 <a-input v-model="form.date" />

　　 </a-form-model-item>

　　 <a-form-model-item label="文件">

　　 <a-input v-model="form.imgUrl" read-only/>

　　 <a-upload name="file" :showUploadList="false" :customRequest="customRequest">

　　 <a-button type="primary" icon="upload">导入图片</a-button>

　　 </a-upload>

　　 </a-form-model-item>

　　 <a-form-model-item label="操作">

　　 <a-button type="primary" icon="export" @click="exportWordFile">导出word文档</a-button>

　　 </a-form-model-item>

　　 </a-form-model>

　　</template>

　　import {exportWord} from @/assets/js/exportFile.js

　　export default {

　　 data () {

　　 return {

　　 labelCol: { span: 6 },

　　 wrapperCol: { span: 16 },

　　 form: {},

　　 rules: {

　　 { required: true, message: 请输入名称！, trigger: blur },

　　 date:[

　　 { required: true, message: 请输入日期！, trigger: blur },

　　 };

　　 created (){},

　　 methods: {

　　 customRequest (data){

　　 //图片必须转成base64格式

　　 var reader = new FileReader();

　　 reader.readAsDataURL(data.file);

　　 reader.onload = () => {

　　 // console.log("file 转 base64结果：" + reader.result);

　　 this.form.imgUrl = reader.result; //imgUrl必须与模板文件里的参数名一致

　　 };

　　 reader.onerror = function (error) {

　　 console.log("Error: ", error);

　　 };

　　 exportWordFile (){

　　 let imgSize = {

　　 imgUrl:[65, 65], //控制导出的word图片大小

　　 };

　　 exportWord("./static/test.docx", this.form, "demo.docx", imgSize);

　　 //参数1：模板文档

　　 //参数2：字段参数

　　 //参数3：输出文档

　　 //参数4：图片大小

　　 }

　　};

　　</script>

　　4.创建test.docx文档模板。注：使用vue-cli2的时候，放在static目录下；使用vue-cli3的时候，放在public目录下。

　　模板参数名需与字段一致，普通字段：{字段名}，图片字段：{%字段名}

　　文档内容：

　　5.导出demo.docx结果

　　以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

目录

第一步：安装依赖：jquery 和file-saver

第二步：新增jquery.wordexport.js

第三步：组件使用

vue导出Word文件（模板方式）

vue导出word文档（包括图片）

相关文章阅读