Vue 开发在微信公众号中如何文件下载
通常我们调用下载接口时,我们需要根据后端提供的接口返回信息进行相应的处理操作。1.接口返回 文件路径(部分)。window.open('http://192.168.22.246:8080'+ filePath)2.本窗口打开下载window.location.href="xxx?id="+data.id;3.接口返回文件流信息。doweloadApi(data) {console.log(dat
·
通常我们调用下载接口时,我们需要根据后端提供的接口返回信息进行相应的处理操作。
1.接口返回 文件路径(部分)。
window.open('http://192.168.22.246:8080'+ filePath)
2.本窗口打开下载
window.location.href = "xxx?id=" + data.id;
3.接口返回文件流信息。
doweloadApi(data) {
console.log(data);
this.$axios({
method: "get",
url: "xxx?id=" + data.id,
responseType: "blob"
})
.then(res => {
const content = res;
const blob = new Blob([content]);
const fileName = `${new Date().getTime()}_下载结果.xlsx`;
if ("download" in document.createElement("a")) {
const elink = document.createElement("a");
elink.download = fileName;
elink.style.display = "none";
elink.href = URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
URL.revokeObjectURL(elink.href);
document.body.removeChild(elink);
} else {
navigator.msSaveBlob(blob, fileName);
}
})
.catch(err => {
console.log(err);
});
}
接口返回文件流在浏览器中测试是没有问题的,但是微信浏览器是屏蔽资源文件下载的,那么微信公众号中如何下载呢?
网上提供了一种方法就是:引导用户打开浏览器中下载,详细请参考:vue开发微信公众号之文件下载。
更多推荐
所有评论(0)