文件下载,图片类型直接预览而不是直接下载

508 阅读1分钟

有功能如下

image.png

要做一个文件预览和文件下载功能,但是图片类型,通过a标签来打开,浏览器自动解析成了预览,而不是下载。

let downUrl = fileBaseUrl.value + item.filePath
const a = document.createElement('a'); // 创建新的a标签
a.href = downUrl;
a.style.display = 'none';
a.target = '_blank';
document.body.appendChild(a);
a.click();
document.body.removeChild(a); // 删除a标签

解决方案

let downUrl = fileBaseUrl.value + item.filePath
var request = new XMLHttpRequest();
request.responseType = "blob"; //定义响应类型
request.open("GET", downUrl);
request.onload = function () {
    var url = window.URL.createObjectURL(this.response);
    var a = document.createElement("a");
    document.body.appendChild(a);
    a.href = url;
    a.download = item.fileName
    a.click();
}
request.send();