vue如何实现文件下载,Vue下载文件
对于某视频剪辑软件中实现一般的下载功能很简单，下面这篇文章主要给大家介绍了关于前端某视频剪辑软件中文件下载的三种方式，文中通过实例代码介绍的非常详细，需要的朋友可以参考下
目录
前端某视频剪辑软件中文件下载的三种方式附：vue实现图片或文件下载功能实例总结
前端vue中文件下载的三种方式
第一种方式是前端创建超链接，通过a标签的链接向后端服务发得到请求，接收后端的文件流，非常简单：
a :href=/user/downloadExcel 下载模板/a
另一种情况是创建差异标签，动态创建a标签:
div name=下载文件 onclick=下载excel()下载/div
函数downloadExcel() {
设a=document.createElement(a )
a.href=/user/downloadExcel
答。单击()；
}
还有一种补充：
函数downloadExcel() {
窗户。位置。href=/tUserHyRights/downloadUsersUrl ；
}
第二种方式通过创建内联框架的方式：
El-button size= mini class= filter-item type= primary icon= El-icon-download @ click= handle export(scope。行)导出/el-button
//方法方法：
handleExport(row) {
var elemIF=document。createelement(“iframe”)
elemIF.src=user/downloadExcel？快照时间=格式日期(新日期(row.snapshotTime)， yyyy-MM-dd hh:mm )
category= row.category
elemIF.style.display=none
文档。身体。appendchild(elem if)
}
第三种方式，会对后端发的邮政请求，使用一滴格式
El-button size= mini class= filter-item type= primary icon= El-icon-download @ click= handle export(scope。行)导出/el-button
//方法方法
handleExport(row){
const url=/user/downloadExcel
const options={ snapshot time:format Date(新日期(行。快照时间)， yyyy-MM-dd hh:mm)}
exportExcel(url，选项)
}
/**
* 封装导出智能手机怎样打开表格文件请求
* @param url
* @param数据
* @returns {Promise}
*/
//api.js
导出函数exportExcel(url，options={}) {
返回新承诺((解决，拒绝)={
console.log(`${url}请求数据，参数=`，JSON.stringify(选项))
axios。默认值。headers[ content-type ]= application/JSON；charset=UTF-8
axios({
方法： post ，
url: url，//请求地址
数据：选项，//参数
responseType: blob //表明返回服务器返回的数据类型
}).然后（
响应={
解析(响应.数据)
设blob=新Blob([response.data]，{
类型："应用程序/vnd.ms-excel "
})
console.log(blob)
let fileName=Date.parse(new Date()) .xlsx
如果(窗口。领航员。mssaveoropenblob){
//console.log(2)
领航员。mssavelob(blob，文件名)
}否则{
//console.log(3)
var link=文档。createelement( a )
link.href=window .URL.createObjectURL(blob)
link.download=文件名
link.click()
//释放内存
窗户URL.revokeObjectURL(link.href)
}
},
错误={
拒绝（错误)
}
)
})
}
如果后端提供的下载接口是得到类型，可以直接使用方法一和二，简单又便捷；当然如果想使用方法三也是可以的，不过感觉有点舍近求远了。
如果后端提供的下载接口是邮政类型，就必须要用方法三了。
附：vue实现图片或文件下载功能实例
要自己创建一个a标签，以下就是下载功能的实现
这里是调用接口之后如果代码=200时进行下载
if (res.code==200) {
const link=文档。createelement( a )；//自己创建的a标签
链接。href=RES . data
document.body.appendChild(链接);
链接。单击()；
document.body.removeChild(链接);
窗户网址。revokeobjecturl(RES . data)；
}
2、还有一种情况是下载单张图片，如果用上面方法会直接跳转到了图片链接，并不会实现下载。下面则是下载单张图片的方法
getUrlBase64(imgUrl) {
返回新承诺((解决)={
让画布=文档。createelement(“canvas”)；
让CTX=画布。获取上下文(“2d”)；
设img=new Image()；//允许进行跨域
img.crossOrigin=匿名
img.src=imgUrl
img.onload=function() {
画布。身高=img。身高；//图片的高度
画布。宽度=img。宽度；//图片的宽度
ctx.drawImage(img，0，0，img.width，img。身高)；
让数据URL=canvas。toda taurl( image/png )；
画布=空
resolve(dataURL)；
};
});
},
//点击下载图片按钮的事件
handleDowondImg(url，名称){
this.getUrlBase64(url).然后((base64)={
const link=文档。createelement( a )；
link.href=base64
link.download=这个$路线。查询。来源；
链接。单击()；
});
},
总结
到此这篇关于前端某视频剪辑软件中文件下载的三种方式的文章就介绍到这了，更多相关某视频剪辑软件中文件下载内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。