2024年iOS Safari/Chrome移动端触发PDF Blob文件下载的方案

现有如下前端代码用于触发PDF下载：

const downloadPdf = async () => {
  try {
    const pdfBinaryRes = await fetchPdfFile()

    if (!pdfBinaryRes.ok) {
      throw new Error(`HTTP error! Status: ${pdfBinaryRes.status}`)
    }

    const filename = pdfBinaryRes.headers... //do magic

    const pdfBlob = await pdfBinaryRes.blob()

    const blobUrl = window.URL.createObjectURL(pdfBlob)

    const link = document.createElement('a')
    link.href = blobUrl
    link.download = filename
    link.click()

    setTimeout(() => {
      window.URL.revokeObjectURL(blobUrl)
    }, 250)
  } catch (error) {
    console.error(error)
  }
}

服务器响应头信息：

• content-type: application/pdf;charset=UTF-8
• content-disposition: attachment; filename=my-pdf.pdf

问题场景 #

在iPhone 14（iOS 16，Browserstack测试）的iOS Safari/Chrome中，执行上述代码后，blob URL会在当前标签页打开预览PDF，无法触发下载提示将文件保存至文件系统。安卓浏览器可直接保存文件（后续打开属于另一问题）。

已知信息 #

• a.download属性在iOS Safari v13前不支持，目前已支持
• 相关webkit bug已修复
• 补充：修改响应content-type后，iOS Safari可触发下载提示，但iOS Chrome无效果。

内容的提问来源于stack exchange，提问作者pollx