通过设置download来实现点击url下载
<a href="test.pdf" target="Blank" download="模板.pdf">下载</a>
想要的效果:
实际效果:
此时会跳转的新的页面,展示pdf的内容,download无效,这是因为异步的原因,存在跨域问题,无法实现直接下载
解决跨域问题:
<a style="color: #409eff" @click="download(url, fileName)">下载</a>
function download(url, filename) {
var url = url;
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true); // 异步
xhr.responseType = 'blob'; // blob 类型
xhr.onload = function () {
if (xhr.status !== 200) {
alert('下载异常!');
return;
}
if (window.navigator.msSaveOrOpenBlob) {
// IE
navigator.msSaveBlob(xhr.response, filename);
} else {
var newUrl = window.URL.createObjectURL(xhr.response);
var a = document.createElement('a');
a.setAttribute('href', newUrl);
a.setAttribute('target', '_blank');
a.setAttribute('download', filename + '.pdf'); // 自定义文件名(有效)
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
};
xhr.send();
}
通过这种方式可以解决跨域问题,实现想要的效果