时间戳

首页 > 解决方案 > PDF 文件未使用 HTML5 下载属性下载

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

问题描述

我在两个不同的锚标签上有一个下载属性。一个用于 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>

标签： htmlpdfdownloadanchor

解决方案

下载基础

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

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

可能的解决方案

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

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

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

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

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

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

推荐阅读