后端给了多个url怎么下载，pdf文件如何只下载不默认打开

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第8天，点击查看活动详情

下载方法

一般我们前端在实现一些下载功能的时候。通常会创建一个a标签。模拟点击事件。然后移除a标签。 像这样。

function download(url){
    const link = document.createElement('a')
    link.style.display = 'none'
    link.href = url
    link.setAttribute('download', '自定义文件名')
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
}

但是如果要同时下载多个文件。遍历需要下载的url，使用上面的方法。urlArray.forEach(v=>download(v))

页面只会有一个文件可以下载成功，其他的文件下载会被自动取消。 这个时候应该怎么办呢？

window.open

使用window.open 可以正常下载图片、文档、表格等文件。但是pdf文件会被默认打开。

function download(url){
    window.optn(url)
}

iframe方法下载

使用iframe方法下载文件。可以正常下载图片、文档、表格等文件。但是pdf文件没有任何反应。

export function downloadCommonFile(url: string) {
   const iframe = document.createElement('iframe')
   iframe.style.display = 'none'
   iframe.style.height = '0'
   iframe.src = url
   document.body.appendChild(iframe)
   setTimeout(() => {
   	iframe.remove()
   }, 5 * 1000)
}

blob方式下载

使用blob方式下载

window.URL.createObjectUrl创建一个新的对象URL，该对象URL可以代表某一个指定的file对象或者bold对象。

1. 先通过本地封装好的接口请求来获取二进制数据。注意在请求封装内部树妖设置请求头responseType: "blob"。
2. 通过window.URL.createObjectUrl创建一段带hash的url，并且一直存储在内存中。
3. 利用a标签点击下载。注意这里必须通过a.download来设置文件的下载名字。否则也会在浏览器打开pdf。
4. 执行revokeObjectURL释放内存。

export async function downloadPdfFile(url: string) {
	const data: any = await axios.get(url) // 注意这里要设置axios的responseType: "blob"
        
	const href = window.URL.createObjectURL(new Blob([data], { type: data.type }))
	const a = document.createElement('a')
	a.href = href
	a.download = new Date().getTime().toString()
	a.click()
	window.URL.revokeObjectURL(href)
}