vue中导出excel,vue实现excel导出
本文主要介绍了某视频剪辑软件封装导出超过数据的公共函数,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
某视频剪辑软件元素用户界面封装一个导出超过数据的公共函数
将公共方法封装在商店的模块的common.js中,如下图:
代码如下:
常量下载={
动作:{
downloadData({ commit,state },data) {
返回新承诺((解决,拒绝)={
data.event(data.formData).然后(res={
常量blob=新Blob([res.data],{
类型:"应用程序/vnd.ms-excel "
})
const objectUrl=URL。createobjecturl(blob)
const link=文档。createelement( a )//创建a标签
link.href=objectUrl
//重命名文件
链接。download=RES . headers[ content-disposition ].拆分(
=
)[1]
link.click()
URL.revokeObjectURL(objectUrl)
解析(分辨率)
}).catch((err)={
拒绝(错误)
})
})
}
}
}
导出默认下载
然后在商店的指数中导出到公共模块
在需要调用方法的组件中使用
方法:{
//导出数据的方法
handleExport(formData) {
this.loading=true
常量数据={
//从" @/api/loan/userLoanList "导入{ loanDownloadData }
//事件:loanddownloaddata,loanddownloaddata是导出数据的接口的关键字
//表单数据是loanddownloaddata接口需要的参数
事件: ,
表单数据:表单数据
}
这个store.dispatch(downloadData ,Data).然后(res={
this.loading=false
}).catch(()={
this.loading=false
})
},
}
PS:如果接口能正常返回数据,但是接口调用时发生报错,可能是接口拦截文件返回的数据不对,首先找到utils-request.js文件中(一般情况下是放在这个位置),如下:
接口拦截的时候,如果是导出接口需要返回所有的数据,如:response,因为在common.js文件中需要用到headers重命名文件,如下
接口拦截的一般情况下只需要返回data就行,如:const res = response.data ,返回res
到此这篇关于某视频剪辑软件封装导出超过数据的公共函数的文章就介绍到这了,更多相关某视频剪辑软件导出超过公共函数内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!
郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。