在JavaScript中使用https路径下载pdf文件

Question

I have an ajax call to the controller which returns in success block as a path to the pdf file which something looks like this www. bts.abcd.com/ReportPdf/BH00118051710501_1_1.pdf www. bts.abcd.com/ReportPdf/BH00118051710501_1_1.pdf , now i want to write some code in javascript that would download this file. I have tried various methods like winodw.location.href="path" but this only opens the file in new window not downloading it. here's my code.

`

$.ajax({
      type: "POST",
     url: "/Reporting/ReportAPI",
     data: '{PatientId:"BH0012"}',
    contentType: "application/json,utf=charset-8",
    datatype: "JSON",
     success: function (response) {
//response= www.bts.abcd.com/ReportPdf/BH00118051710501_1_1.pdf
//Code for downloading the file
                }
            });

` Different methods to achieve the same result will also be appreciated.

Answer 1

One of the ways that were already mentioned would be by appending an invisible <iframe> and appending a URL in JS but there will be some security errors that will creep up.

---

In my method below, I have used Axios.js to allow me to safely download the file which also includes Promises .

---

Axios.JS CDN: <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>

---

function DownloadFromUrl(url, mime) {
  axios({
    url: url,
    method: 'GET',
    responseType: 'blob', // important
  }).then((response) => {
    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', 'file.' + mime);
    document.body.appendChild(link);
    link.click();
  });
}

$.ajax({
  type: "POST",
  url: "/Reporting/ReportAPI",
  data: '{PatientId:"BH0012"}',
  contentType: "application/json,utf=charset-8",
  datatype: "JSON",
  success: function(response) {
    // Response = URL
    // Mime     = File Type - pdf, jpeg, png, bmp, exe, js...
    DownloadFromUrl(response, "pdf");
  }
});

---

Make sure to wrap the MIME parameter as a string, or change the code above to validate the MIME Type

Here's JSFiddle: https://jsfiddle.net/5mnethL1/2/

Answer 2

"winodw.location.href" cannot work in the ajax block. you can create a element, then click this.