点击按钮时强制下载PDF文件

Question

我有一个使用backbonejs编写的视图，其中包含一个按钮，上面写着“下载PDF”。我也知道PDF文件所在的URL。我希望用户单击该按钮时可以下载PDF文件。这是可能的吗？

编辑：我的backbone.js视图代码如下：

savendownload: function () {
  this.$("#saveanddownload").button('loading');

  var that = this;
  var formData = this.fetchData();
  if (formData) window.invoices.create({
    buyer: formData.buyer,
    items: formData.items,
    company: formData.company,
    action: "savendownload"
  }, {
    wait: true,
    success: function (model) {
      var data = model.toJSON();

      var filename = data.filename;
      //download code here
    }
  });
}

- beNerd

---

可能是重复问题：https://dev59.com/znA75IYBdhLWcg3w1sz2 - Chris

Answer 1

不要使用按钮，而是使用链接，并将href属性设置为您的PDF文件的URL。浏览器会为您处理文件下载，并尊重用户的浏览器偏好设置。

<a href="your/file.pdf" />

如果您需要将链接看起来像按钮，可以使用CSS进行样式设置。例如，请参阅此SO线程。 编辑：据我所知，您无法可靠地从javascript初始化文件下载。您可以做的是打开一个带有pdf URL的新窗口/选项卡：

window.open("http://domain.com/document.pdf",'_blank');

但是用户的浏览器可能会阻止新窗口的创建。您可以考虑生成一个下载链接:

$('<a>Click here to download PDF</a>').attr('href', filename).appendTo(that.$el);

让用户点击链接来启动文件下载。

- jevakallio

---

@beNerd，你可能应该在最初的问题中包含这个...无论如何，我已经编辑了答案。没有银弹。 - jevakallio

这个方法可以实现，但是如果你想强制下载，响应服务器也需要设置Content-Disposition头为“attachment”：https://dev59.com/6Gox5IYBdhLWcg3w74u3 - Ben

@Ben，没错，但我认为让浏览器做决定更有意义。这是大多数用户期望的，如果他们想要强制下载，可以使用“另存为...”选项。 - jevakallio

Answer 2

使用“下载”标签

<a href="assets/pdfs/yourdocument.pdf" download>Download PDF</a>

但在IE浏览器上不起作用 ;)

- Murat Kezli