前端根據后臺返回的文件地址(非跨域)易稠,實現(xiàn)點擊下載文件
a 標簽下載文件水醋,download屬性可以實現(xiàn)對下載文件的重命名
<a download="文件名稱" href="文件地址">下載</a>
在Chrome瀏覽器中红碑,使用a標簽屬性download下載pdf鏈接文件幻梯,如果是相同域時算行,可以直接下載;跨域會直接打開頁面預覽文件郑诺;
IE瀏覽器下 download 修改文件名失效
修改:
//文件地址非跨域
<a href="javascript:void(0)" onClick={()=>this.download(url)}>下載</a>
js
getBlob = (url) => {
return new Promise(resolve => {
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.onload = () => {
if (xhr.status === 200) {
resolve(xhr.response);
}
};
xhr.send();
});
}
saveAs = (blob, filename) => {
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(blob, filename);
} else {
const link = document.createElement('a');
const body = document.querySelector('body');
link.href = window.URL.createObjectURL(blob);
link.download = filename;
// fix Firefox
link.style.display = 'none';
body.appendChild(link);
link.click();
body.removeChild(link);
window.URL.revokeObjectURL(link.href);
}
}
download = (url) => {
let filename="xxxxx";
this.getBlob(url).then(blob => {
this.saveAs(blob, filename);
});
}
參考:
https://www.cnblogs.com/jackson-yqj/p/11321275.html
https://blog.csdn.net/borage21/article/details/108253737
https://www.cnblogs.com/ygunoil/p/12565565.html