在同一页面中将 PDF 链接下载为文件，而不是在浏览器中打开

Question

In my application written in Ionic 5 and Angular 8, I am in need to download multiple PDF links (file) in the same page on click of the link. I tried but the PDF links are opening in browser. Request to help me achieve this functionality.

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

Answer 1

The download attribute appears normal when same-origin, otherwise it will appear the same as without download attribute. list three solutions:

1. Package the file into a file type that cannot be opened directly by the browser, such as ZIP
2. Through forwarding by the back end, the back end requests a third-party resource and returns it to the front end, which saves the file using tools such as file-Saver
3. If the third-party resource the URL points to has CORS configured, you can request the file through 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()