未使用 HTML5 下载属性下载 PDF 文件

Question

我在两个不同的锚标签上有一个下载属性。一个用于 Excel 文件，一个用于 PDF。 Excel 文件下载。 PDF 在新选项卡中打开。为什么会这样？代码如下：

        <div class="col-2 center">
            <a download href="files/excel-sample.xlsx">
                <img src="img/excel-logo.png" />
            </a>
        </div>
        <div class="col-2 center">
            <a download href="files/pdf-sample.pdf">
                <img src="img/pdf-logo.png" />
            </a>
        </div>

Answer 1

下载基础知识

所以基本上发生的事情是，当您 link 到一个文件 URL 时，浏览器会打开那个 URL 并且如果它可以显示内容，它几乎总是将要。一些最常见的示例是图像文件（.png、.jpg 等）。但是，如果浏览器无法读取文件类型 (.zip)，那么它几乎总是会下载内容。强制浏览器下载文件的一种好方法是在 <a> 标记中添加 download 属性。

大多数现代浏览器都可以读取和访问 PDF，因此默认情况下，浏览器设置为打开文件而不是下载文件。由于这种可访问性，大多数现代浏览器都引入了设置，允许用户在一台机器上决定 PDF（或任何其他可读文件）是否应该在另一个 window 中打开或默认下载。在许多情况下，即使使用 download 属性，浏览器仍然可以自行决定如何处理文件。

可能的解决方案

1 - 如果你只是想在你的浏览器上实现下载功能（看起来你不是，但我想我应该包括在内），你可以打开 chrome，转到设置 -> 高级设置 -> 内容设置 -> PDF 文档 -> 下载时切换

2 - 您可以压缩文件，以便浏览器强制下载文件。

3 - 如果您可以访问您网站的根服务器并且它使用的是 Apache，您可以将以下内容添加到您的 .htaccess

ForceType application/octet-stream
Header set Content-Disposition attachment

如果您使用的是 NGINX 网络服务器，您可以添加以下重定向

location ~* (.*\.pdf) {
types { application/octet-stream .pdf; }
default_type application/octet-stream;
}

Answer 2

你不能使用<a download href="files/pdf-sample.pdf"> 但您可以使用 <a href="files/pdf-sample.pdf"> 预览您的文件

Answer 3

所以解决方案是：

<a href="pdf-sample"  download="pdf-samle.pdf">

请注意，“href”的值没有减少 .pdf，但“下载”的值减少了 .pdf。请记住，您还必须从目标文件中删除 .pdf 缩减。浏览器似乎将下载的文件视为非 pdf 文件，因此默认情况下不会打开它。

未使用 HTML5 下载属性下载 PDF 文件

PDF file not downloading with HTML5 download attribute

html

pdf

anchor

download