Javascript (HTML) 单击时下载 PDF 文件而不是在浏览器中打开它们

(HTML) Download a PDF file instead of opening them in browser when clicked

提问by 404Error

I was wondering how to make a PDF file link downloadable instead of opening them in the browser? How is this done in html? (I'd assume it's done via javascript or something).

我想知道如何使 PDF 文件链接可下载而不是在浏览器中打开它们？这是如何在 html 中完成的？（我假设它是通过 javascript 或其他东西完成的）。

采纳答案by DA.

You can't do this with HTML. It's a server-based solution. You have to stream the file so that the browser than triggers the save dialog.

你不能用 HTML 做到这一点。这是一个基于服务器的解决方案。您必须流式传输文件，以便浏览器触发保存对话框。

I'd advise not doing this. How a user interacts with a PDF should be left up to the user.

我建议不要这样做。用户如何与 PDF 交互应该由用户决定。

UPDATE (2014):

更新（2014）：

So...this answer still gets plenty of downvotes. I assume part of that is that this was answered 4 years ago and as Sarim points out, there is now the HTML 5 downloadattributethat can handle this.

所以......这个答案仍然得到了很多反对票。我认为部分原因是 4 年前回答了这个问题，正如 Sarim 指出的那样，现在有HTML 5download属性可以处理这个问题。

I agree, and think Sarim's answer is good (it probably should be the chosen answer if the OP ever returns). However, this answer is still the reliable way to handle it (as Yi?it Yener's answer points out and--oddly--people agree with). While the download attribute has gained support, it's still spotty:

我同意，并认为萨里姆的回答很好（如果 OP 回归，它可能应该是选择的答案）。然而，这个答案仍然是处理它的可靠方法（正如 Yi?it Yener 的回答所指出的那样——奇怪的是——人们同意）。虽然下载属性获得了支持，但它仍然参差不齐：

http://caniuse.com/#feat=download

http://caniuse.com/#feat=download

回答by Sarim

With html5, it is possible now. Set a "download" attr in element.

有了 html5，现在就可以了。在元素中设置“下载”属性。

<a href="http://link/to/file" download="FileName">Download it!</a>

Source : http://updates.html5rocks.com/2011/08/Downloading-resources-in-HTML5-a-download

来源：http: //updates.html5rocks.com/2011/08/Downloading-resources-in-HTML5-a-download

回答by Yi?it Yener

This is only possible with setting a http response header by the server side code. Namely;

这只能通过服务器端代码设置 http 响应头来实现。即；

Content-Disposition: attachment; filename=fname.ext

回答by php guy

You need to change the http headers sent. Depending on your server, you can modify your .htaccess as follows:

您需要更改发送的 http 标头。根据您的服务器，您可以按如下方式修改 .htaccess：

<FilesMatch "\.(?i:pdf)$">
  ForceType application/octet-stream
  Header set Content-Disposition attachment
</FilesMatch>

回答by beardhatcode

you will need to use a PHP script (or an other server side language for this)

您将需要使用 PHP 脚本（或其他服务器端语言）

<?php
// We'll be outputting a PDF
header('Content-type: application/pdf');

// It will be called downloaded.pdf
header('Content-Disposition: attachment; filename="downloaded.pdf"');

// The PDF source is in original.pdf
readfile('original.pdf');
?>

and use httacces to redirect (rewrite) to the PHP file instead of the pdf

并使用 httacces 重定向（重写）到 PHP 文件而不是 pdf

回答by mihsathe

You can use

您可以使用

Response.AddHeader("Content-disposition", "attachment; filename=" + Name);

Check out this example:

看看这个例子：

http://www.codeproject.com/KB/aspnet/textfile.aspx

http://www.codeproject.com/KB/aspnet/textfile.aspx

This goes for ASP.NET. I am sure you can find similar solutions in all other server side languages. However there's no javascript solution to the best of my knowledge.

这适用于 ASP.NET。我相信您可以在所有其他服务器端语言中找到类似的解决方案。但是，据我所知，没有 javascript 解决方案。

回答by hlozancic

Without html5 attribute one can achieve this by using php:

如果没有 html5 属性，可以使用 php 实现这一点：

Create php file named download.phpwith this code:

使用以下代码创建名为download.php 的php 文件：

<?php
ob_start();
$file = "yourPDF.pdf"

if (file_exists($file)) 
{
    header('Content-Description: File Transfer');
    header('Content-Type: application/octet-stream');
    header('Content-Disposition: attachment; filename='.basename($file));
    header('Content-Transfer-Encoding: binary');
    header('Expires: 0');
    header('Cache-Control: must-revalidate');
    header('Pragma: public');
    header('Content-Length: ' . filesize($file));
    ob_clean();
    flush();
    readfile($file);
    exit();
}

Now if you want to automatically start downloading pdf write this javascript:

现在如果你想自动开始下载 pdf 写这个 javascript:

<script>window.location = "download.php";</script>

If you want this to work on a link, use this...

如果您希望它在链接上工作，请使用此...

<a href='javascript:window.location = "download.php"'>
    Download it!
</a>

回答by Prasad Joshi

When you want to direct download any image or pdf file from browser instead on opening it in new tab then in javascript you should set value to download attribute of create dynamic link

当您想直接从浏览器下载任何图像或 pdf 文件而不是在新选项卡中打开它时，您应该在 javascript 中将值设置为创建动态链接的下载属性

    var path= "your file path will be here"; 
    var save = document.createElement('a');  
    save.href = filePath; 
    save.download = "Your file name here"; 
    save.target = '_blank'; 
    var event = document.createEvent('Event');
    event.initEvent('click', true, true); 
    save.dispatchEvent(event);
   (window.URL || window.webkitURL).revokeObjectURL(save.href);

For new Chrome update some time event is not working. for that following code will be use

对于新的 Chrome 更新，某些时间事件不起作用。因为下面的代码将被使用

  var path= "your file path will be here"; 
    var save = document.createElement('a');  
    save.href = filePath; 
    save.download = "Your file name here"; 
    save.target = '_blank'; 
    document.body.appendChild(save);
    save.click();
    document.body.removeChild(save);

Appending child and removing child is useful for Firefox, Internet explorer browser only. On chrome it will work without appending and removing child

添加子项和删除子项仅适用于 Firefox、Internet Explorer 浏览器。在 chrome 上，它可以在不附加和删除子项的情况下工作

回答by Sarim

As the html5 way (my previous answer) is not available in all browsers, heres another slightly hack way.

由于 html5 方式（我之前的答案）并非在所有浏览器中都可用，因此这是另一种稍微黑客的方式。

This solution requires you are serving the intended file from same domain, OR has CORS permission.

此解决方案要求您提供来自同一域的预期文件，或者具有 CORS 权限。

1. First download the content of the file via XMLHttpRequest(Ajax).
2. Then make a data URI by base64 encoding the content of the file and set media-type to application/octet-stream. Result should look like

1. 首先通过 XMLHttpRequest(Ajax) 下载文件的内容。
2. 然后通过base64编码文件内容生成数据URI，设置media-type为application/octet-stream. 结果应该是这样的

data:application/octet-stream;base64,SGVsbG8sIFdvcmxkIQ%3D%3D

data:application/octet-stream;base64,SGVsbG8sIFdvcmxkIQ%3D%3D

Now set location.href = data. This will cause the browser to download the file. Unfortunately you can't set file name or extension this way. Fiddling with the media-type could yield something.

现在设置location.href = data。这将导致浏览器下载文件。不幸的是，您不能以这种方式设置文件名或扩展名。摆弄媒体类型可能会有所收获。

See details: https://developer.mozilla.org/en-US/docs/Web/HTTP/data_URIs

查看详情：https: //developer.mozilla.org/en-US/docs/Web/HTTP/data_URIs

回答by Strixy

The solution that worked best for me was the one written up by Nick on his blog

最适合我的解决方案是Nick 在他的博客上写的

The basic idea of his solution is to use the Apache servers header mod and edit the .htaccess to include a FileMatch directive that the forces all *.pdf files to act as a stream instead of an attachment. While this doesn't actually involve editing HTML (as per the original question) it doesn't require any programming per se.

他的解决方案的基本思想是使用 Apache 服务器头模块并编辑 .htaccess 以包含一个 FileMatch 指令，该指令强制所有 *.pdf 文件充当流而不是附件。虽然这实际上并不涉及编辑 HTML（根据原始问题），但它本身不需要任何编程。

The first reason I preferred Nick's approach is because it allowed me to set it on a per folder basis so PDF's in one folder could still be opened in the browser while allowing others (the ones we would like users to edit and then re-upload) to be forced as downloads.

我更喜欢 Nick 的方法的第一个原因是因为它允许我在每个文件夹的基础上设置它，这样一个文件夹中的 PDF 仍然可以在浏览器中打开，同时允许其他人（我们希望用户编辑然后重新上传的那些）强制下载。

I would also like to add that there is an option with PDF's to post/submit fillable forms via an API to your servers, but that takes awhile to implement.

我还想补充一点，PDF 有一个选项可以通过 API 将可填写的表单发布/提交到您的服务器，但这需要一段时间才能实现。

The second reason was because time is a consideration. Writing a PHP file handler to force the content disposition in the header() will also take less time than an API, but still longer than Nick's approach.

第二个原因是因为时间是一个考虑因素。编写一个 PHP 文件处理程序来强制处理 header() 中的内容也将比 API 花费更少的时间，但仍然比 Nick 的方法更长。

If you know how to turn on an Apache mod and edit the .htaccss you can get this in about 10 minutes. It requires Linux hosting (not Windows). This may not be appropriate approach for all uses as it requires high level server access to configure. As such, if you have said access it's probably because you already know how to do those two things. If not, check Nick's blog for more instructions.

如果您知道如何打开 Apache mod 并编辑 .htaccss，您可以在大约 10 分钟内完成。它需要 Linux 主机（不是 Windows）。这可能不适用于所有用途，因为它需要高级服务器访问权限才能配置。因此，如果您说访问，那可能是因为您已经知道如何做这两件事。如果没有，请查看 Nick 的博客以获取更多说明。