前端vue中文件下载的三种方式汇总
时间：2022-10-20 10:14:58|栏目：vue|点击： 次
前端vue中文件下载的三种方式
第一种方式是前端创建超链接，通过a标签的链接向后端服务发get请求，接收后端的文件流，非常简单：
<a :href='"/user/downloadExcel"' >下载模板</a>
另一种情况是创建div标签，动态创建a标签：
<div name="downloadfile" onclick="downloadExcel()">下载</div>
function downloadExcel() {
let a = document.createElement('a')
a.href ="/user/downloadExcel"
a.click();
}
还有一种补充：
function downloadExcel() {
window.location.href = "/tUserHyRights/downloadUsersUrl";
}
第二种方式通过创建iframe的方式：
<el-button size="mini" class="filter-item" type="primary" icon="el-icon-download" @click="handleExport(scope.row)">导出</el-button>
//method方法：
handleExport(row) {
var elemIF = document.createElement('iframe')
elemIF.src = 'user/downloadExcel?snapshotTime=' + formatDate(new Date(row.snapshotTime), 'yyyy-MM-dd hh:mm') +
'&category=' + row.category
elemIF.style.display = 'none'
document.body.appendChild(elemIF)
}
第三种方式，会对后端发的post请求，使用blob格式
<el-button size="mini" class="filter-item" type="primary" icon="el-icon-download" @click="handleExport(scope.row)">导出</el-button>
//method方法
handleExport(row){
const url="/user/downloadExcel"
const options = {snapshotTime:formatDate(new Date(row.snapshotTime), 'yyyy-MM-dd hh:mm')}
exportExcel(url,options)
}
/**
* 封装导出Excal文件请求
* @param url
* @param data
* @returns {Promise}
*/
//api.js
export function exportExcel(url, options = {}) {
return new Promise((resolve, reject) => {
console.log(`${url} 请求数据，参数=>`, JSON.stringify(options))
axios.defaults.headers['content-type'] = 'application/json;charset=UTF-8'
axios({
method: 'post',
url: url, // 请求地址
data: options, // 参数
responseType: 'blob' // 表明返回服务器返回的数据类型
}).then(
response => {
resolve(response.data)
let blob = new Blob([response.data], {
type: 'application/vnd.ms-excel'
})
console.log(blob)
let fileName = Date.parse(new Date()) + '.xlsx'
if (window.navigator.msSaveOrOpenBlob) {
// console.log(2)
navigator.msSaveBlob(blob, fileName)
} else {
// console.log(3)
var link = document.createElement('a')
link.href = window.URL.createObjectURL(blob)
link.download = fileName
link.click()
//释放内存
window.URL.revokeObjectURL(link.href)
}
},
err => {
reject(err)
}
)
})
}
如果后端提供的下载接口是get类型，可以直接使用方法一和二，简单又便捷；当然如果想使用方法三也是可以的，不过感觉有点舍近求远了。
如果后端提供的下载接口是post类型，就必须要用方法三了。
附：vue实现图片或文件下载功能实例
要自己创建一个a标签，以下就是下载功能的实现
这里是调用接口之后如果code=200时进行下载
if (res.code == 200) {
const link = document.createElement("a"); //自己创建的a标签
link.href = res.data;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
window.URL.revokeObjectURL(res.data);
}
2、还有一种情况是下载单张图片，如果用上面方法会直接跳转到了图片链接，并不会实现下载。下面则是下载单张图片的方法
getUrlBase64(imgUrl) {
return new Promise((resolve) => {
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
let img = new Image(); //允许进行跨域
img.crossOrigin = "Anonymous";
img.src = imgUrl;
img.onload = function() {
canvas.height = img.height; //图片的高度
canvas.width = img.width;//图片的宽度
ctx.drawImage(img, 0, 0, img.width, img.height);
let dataURL = canvas.toDataURL("image/png");
canvas = null;
resolve(dataURL);
};
});
},
//点击下载图片按钮的事件
handleDowondImg(url, name) {
this.getUrlBase64(url).then((base64) => {
const link = document.createElement("a");
link.href = base64;
link.download = this.$route.query.source;
link.click();
});
},
总结
上一篇：vue中el-table两个表尾合计行联动同步滚动条实例代码
栏 目：vue
下一篇：vue父组件数据更新子组件相关内容未改变问题(用watch解决)
本文标题：前端vue中文件下载的三种方式汇总
本文地址：http://www.codeinn.net/misctech/216807.html
