如何在Firefox強制下載PDF？

Question

我有以下代碼用於從后端下載 PDF 個文件：

    const link = document.createElement('a')

    link.href = URL.createObjectURL(blob)

    link.setAttribute('target', '_blank')
    link.setAttribute('download', file_name)

    link.click()
    link.remove()
    setTimeout(() => window.URL.revokeObjectURL(url), 100)

它按預期在 Chrome 中工作，我相信它以前在 Firefox 中工作，但現在 Firefox 在同一選項卡中打開文件而不是下載，忽略目標和下載屬性。

Answer 1

這是 98 及更高版本的預期行為。 默認情況下，PDF 設置為在 Firefox 打開。

如果您更改 mimetype，您將 Blob 賦予“application/octet-stream”，或者將其 href 分配給頁面中的 iframe 的鏈接作為目標，我認為您會恢復以前的行為。

當應用下載屬性時，它的處理方式與服務器發送的“Content-Disposition: attachment”header 相同。 Firefox 開發人員認為用戶的偏好應該勝過服務器所說的 - 無論用戶是否表示他們希望 PDF 在外部應用程序（Acrobat 或 w/e）中打開、自動保存到磁盤或在 Firefox 中打開。

來源： https://bugzilla.mozilla.org/show_bug.cgi?id=1756980

編輯：
Firefox 在同一選項卡中打開文件並忽略目標屬性是一個錯誤。

來源： https://bugzilla.mozilla.org/show_bug.cgi?id=1759916

Answer 2

這是對現有 blob 使用提取的示例。 您可能希望首先跳過 URL.createObjectURL 並直接從文件構建新的 Blob。

使用此方法在 Firefox 中下載 pdf，但無論如何都會在新選項卡 PDF 查看器中打開它。

 const blobUrl = URL.createObjectURL(blob); const filename = 'attachment.pdf'; fetch(blobUrl).then(res => res.arrayBuffer()).then(res => { const file = new Blob([res], {type: 'application/octet-stream'}); const fileURL = URL.createObjectURL(file); const link = document.createElement('a'); link.href = fileURL; link.download = filename; link.click(); link.remove(); });