在 Web 开发中，我们经常需要提供一些文件供用户下载。对于 PDF 文件，浏览器通常会直接打开它们而不是下载。这可能会导致用户无法保存文件或者出现其他问题。本文将介绍如何使用 HTML 元素和属性来确保 PDF 文件被下载而不是在浏览器中打开。
使用 a 标签下载 PDF 文件
最简单的方法是使用 HTML 的 a 标签，并设置 download 属性为 PDF 文件的名称：
<a href="path/to/file.pdf" download>Download PDF</a>
当用户单击链接时，文件将自动下载到他们的计算机上，而不是在浏览器中打开。
在新标签页中打开 PDF 文件
如果你想让用户在新标签页中打开 PDF 文件而不是在当前页面中打开，可以添加 target="_blank" 属性：
<a href="path/to/file.pdf" target="_blank">Open PDF in New Tab</a>
使用 JavaScript 下载 PDF 文件
如果你需要更复杂的下载功能，例如为 PDF 文件添加自定义标题或扩展名，你可以使用 JavaScript 来实现。以下是一个使用 JavaScript 下载 PDF 文件的示例代码：
-- -------------------- ---- -------
------- -------------------------------- ------------
--------
-------- ------------- -
----- -------- - ----------------------- -- ------
-------------------------
-------------- -- ----------------
---------- -- -
----- --- - ---------------------------------
----- - - ----------------------------
------ - ----
---------- - --------- -- --------
-----------------------------
----------
-----------------------------
---
-
---------这个代码片段使用 fetch 函数获取 PDF 文件，并将其转换为 blob 对象。然后，它创建一个 a 标签，并将 URL 和自定义文件名设置到 download 属性中。最后，它模拟点击链接来下载文件。
结论
通过使用 HTML 的 a 标签和属性，以及 JavaScript 的 fetch 函数和 Blob API，我们可以轻松地实现 PDF 文件的下载功能。无论你需要简单的下载链接还是更复杂的下载功能，都有相应的解决方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12094
