在javascript中使用https路径下载pdf文件答案

【问题标题】：Download a pdf file using https path in javascript在javascript中使用https路径下载pdf文件
【发布时间】：2018-11-09 01:27:21
【问题描述】：

我有一个对控制器的 ajax 调用，它在成功块中返回作为 pdf 文件的路径，看起来像这样www. bts.abcd.com/ReportPdf/BH00118051710501_1_1.pdf，现在我想用 javascript 编写一些代码来下载这个文件。我尝试了各种方法，例如winodw.location.href="path"，但这只会在新窗口中打开文件，而不是下载它。这是我的代码。

$.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
                }
            });

` 获得相同结果的不同方法也将受到赞赏。

【问题讨论】：

您可以强制下载文件，而不是通过.htaccess 文件显示。
感谢您的回复，是的，我只想从其路径下载文件。我如何强制文件下载，我的工作代码会很棒。
通过将这一行 (AddType application/octet-stream .pdf) 添加到 .htaccess 文件中，您可以强制下载 pdf 文件而不是显示。你知道如何编辑.htaccess 文件吗？
@kavian-k，不确定.htaccess 到底是什么？您能否分享一些为此的工作代码或任何链接，以进一步了解这种方法如何解决问题。谢谢。
看这个：Forcing a file to download in a browser via htaccess

标签： javascript jquery pdf download

【解决方案1】：

"winodw.location.href" 不能在 ajax 块中工作。您可以创建一个元素，然后单击它。

【讨论】：

【解决方案2】：

已经提到的一种方法是在 JS 中附加一个不可见的<iframe> 并附加一个URL，但会出现一些安全错误。

在下面的方法中，我使用了Axios.js 让我可以安全地下载还包括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");
  }
});

确保将MIME 参数包装为字符串，或更改上面的代码以验证MIME Type

这里是 JSFiddle：https://jsfiddle.net/5mnethL1/2/

【讨论】：

谢谢。这对我有用。很好地解释和演示了:)。
@Vinod 没问题！希望将来您会发现此代码更可重用，这只是一个快速模型。