在 JavaScript 中动态下载不同的文件类型

在 Web 开发中，动态下载不同类型的文件是一个非常普遍的需求。比如，我们需要下载图片、视频、PDF、文本文件等等。而 JavaScript 提供了一些 API 和技术，让我们可以很方便地实现这个功能。

前置条件

为了演示如何动态下载文件，我们需要先准备一个文件，可以是图片、视频、PDF 或其他类型的文件。这里以一张图片为例，用于演示。

下载图片

要下载一张图片，我们可以使用 JavaScript 提供的 XMLHttpRequest 对象，将图片获取到本地，然后使用浏览器提供的下载 API 将其下载到本地。

const xhr = new XMLHttpRequest();
xhr.responseType = 'blob';

xhr.onload = function() {
  const url = window.URL.createObjectURL(xhr.response);
  const a = document.createElement('a');
  a.style.display = 'none';
  a.href = url;
  a.download = 'image.png';
  document.body.appendChild(a);
  a.click();
  window.URL.revokeObjectURL(url);
}

xhr.open('GET', 'https://example.com/image.png');
xhr.send();

在这个代码中，我们使用了 XMLHttpRequest 对象，这个对象用于异步加载图片数据。当图片数据加载完成后，我们将获取到的二进制数据转化为 URL，然后通过创建一个 <a> 标签，将 URL 挂载到 <a> 标签的 href 属性上，最后模拟点击 <a> 标签，触发下载的操作。

下载PDF和其他文件类型

PDF 和其他文件类型的下载方式和图片下载略有不同。对于 PDF 文件，我们需要使用 PDFObject 这个库来实现下载。这个库基于 jQuery，提供了一个简单的 API，让我们可以很容易地下载 PDF 文件。

PDFObject.embed('https://example.com/document.pdf', '#pdf-viewer');
$('#pdf-viewer').append('<a href="https://example.com/document.pdf" download>Download</a>');

在这个代码中，我们先使用 PDFObject 将 PDF 文件嵌入到页面中，然后通过 jQuery 选择器获取到 PDF 文件所在的元素，将 <a> 标签挂载到这个元素上，从而实现下载的功能。

同样的，下载其他类型的文件也可以使用类似的方式实现。只需要将下载的链接放到一个 <a> 标签中，将 download 属性设置为文件名称，以及将这个标签添加到页面中即可。

总结

动态下载不同类型的文件是一个非常常见的需求，在 JavaScript 中，我们可以使用 XMLHttpRequest 对象和浏览器提供的下载 API，将文件下载到本地。对于 PDF 文件，我们可以使用 PDFObject 这个库实现下载。对于其他类型的文件，只需要将下载链接放入一个 <a> 标签中即可实现下载。