在同一頁面中將 PDF 鏈接下載為文件，而不是在瀏覽器中打開

Question

在我用 Ionic 5 和 Angular 8 編寫的應用程序中，我需要在單擊鏈接時在同一頁面中下載多個 PDF 鏈接（文件）。 我試過了，但 PDF 鏈接正在瀏覽器中打開。 請求幫助我實現此功能。

https://stackblitz.com/edit/ionic-yzzwov?file=pages%2Fhome%2Fhome.html

Answer 1

同源時有下載屬性正常顯示，否則顯示為無download屬性。 列出三個解決方案：

1. Package 將文件改成瀏覽器無法直接打開的文件類型，如ZIP
2. 通過后端轉發，后端請求第三方資源返回給前端，前端使用file-Saver等工具保存文件
3. 如果URL指向的第三方資源配置了CORS，可以通過XHR請求文件

downloadFileXHR(filePath, fileName) {
   var xhh = new XMLHttpRequest()
   xhh.open('get', filePath)
   xhh.responseType = 'blob'
   xhh.onreadystatechange = function () {
     if (xhh.readyState === 4 && xhh.status === 200) {
       var blob = new Blob([xhh.response])
       var csvUrl = URL.createObjectURL(blob)
       var link = document.createElement('a')
       link.href = csvUrl
       link.download = fileName
       link.click()
     }
   }
   xhh.send()