第一种方式是前端创建超链接,通过a标签的链接向后端服务发get请求,接收后端的文件流,非常简单:
<
a
:href
=
'"/路径"'
>下载模板</
a
>
另一种情况是创建div标签,动态创建a标签:
<div name=
"downloadfile"
onclick=
"downloadExcel()"
>下载</div>
function
downloadExcel() {
let a = document.createElement(
'a'
)
a.href =
"路径"
a.click();
}
还有一种补充:
function
downloadExcel() {
window.location.href =
"/路径"
;
}
第二种方式通过创建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 =
'路径?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)
}
)
})
}
附:vue实现图片或文件下载功能实例
1,这里是调用接口之后如果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();
});
},
标签:img,vuejs,url,link,new,三种,document,下载,row
From: https://www.cnblogs.com/fxw1996/p/16991821.html