JavaScript 通过a标签将图片/pdf下载本地,而非直接打开

4,189 阅读1分钟

在使用a标签下载图片/pdf,很多浏览器会默认直接打开网页,而不是下载本地,这是因为很多浏览器能够识别图片/pdf,会自动打开。

使用fetch()解决:

fetch(record.doc_url)
    // record.doc_url为文件url地址
    .then(res => res.blob())
    .then(blob => {
        this.downloadFile(blob, record.title)
    })
    .catch(error => {
        this.showToast({ type: 'error', content: t('下载失败') })
    })
}

downloadFile = (blob, filename) => {
    let url = window.URL.createObjectURL(blob);
    // 创建隐藏的可下载链接
    let link = document.createElement('a');
    link.style.display = 'none';
    link.href = url;
    link.setAttribute('download', filename);
    document.body.appendChild(link);
    link.click();
}