js自动下载文件到本地的实现代码

实现js自动下载文件到本地需要几个关键步骤，包括创建Blob对象、创建URL对象、创建下载链接和模拟点击下载链接。以下是详细的实现代码攻略。

创建Blob对象和URL对象

需要先将文件内容转化成一个Blob对象，并通过URL.createObjectURL()方法创建一个URL对象。代码示例如下：

let fileData = 'file contents';
let blob = new Blob([fileData], { type: 'text/plain' });
let url = URL.createObjectURL(blob);

在这个示例中，我们将文件内容保存在变量fileData中，创建一个Blob对象，指定文件内容和文件类型。然后使用URL.createObjectURL()方法来创建URL对象。

创建下载链接

为了将文件下载到本地，我们需要创建一个下载链接。这可以通过创建一个元素，并将下载链接设置为其href属性来实现。代码示例如下：

let downloadLink = document.createElement('a');
downloadLink.href = url;
downloadLink.download = 'file.txt';

在这个示例中，我们创建了一个元素，将URL对象设置为其href属性。我们还设置了一个“download”属性，指定下载链接的名称。

模拟点击下载链接

最后一步是模拟点击下载链接。这可以通过调用downloadLink.click()方法来实现。代码示例如下：

document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);

在这个示例中，我们将创建的元素添加到文档中，并调用了它的click()方法，模拟用户点击了下载链接。完成下载后，我们将其从文档中移除，以避免对页面的影响。

示例1：下载文本文件

假设我们有一个按钮，当用户单击时下载一个文本文件。以下是一个完整的示例代码：

// HTML
<button id="downloadBtn">Download File</button>

// JavaScript
let downloadBtn = document.getElementById('downloadBtn');
downloadBtn.addEventListener('click', function() {
  let fileData = 'file contents';
  let blob = new Blob([fileData], { type: 'text/plain' });
  let url = URL.createObjectURL(blob);

  let downloadLink = document.createElement('a');
  downloadLink.href = url;
  downloadLink.download = 'file.txt';

  document.body.appendChild(downloadLink);
  downloadLink.click();
  document.body.removeChild(downloadLink);
});

该代码通过添加一个事件监听器，当用户单击按钮时，动态创建一个元素并模拟点击下载链接。这将导致浏览器下载一个名为“file.txt”的文本文件。文件内容为“file contents”。

示例2：下载图片文件

另一个常见的任务是从JavaScript中下载图像文件。这也遵循相同的方法来创建Blob对象和URL对象，但链接的设置有所不同。以下是一个完整的示例代码：

// HTML
<button id="downloadBtn">Download Image</button>

// JavaScript
let downloadBtn = document.getElementById('downloadBtn');
downloadBtn.addEventListener('click', function() {
  let imgData = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAIBAQIBAwICAg...'; // 图像数据URI
  let blob = new Blob([imgData], { type: 'image/jpeg' });
  let url = URL.createObjectURL(blob);

  let downloadLink = document.createElement('a');
  downloadLink.href = url;
  downloadLink.download = 'image.jpg';

  document.body.appendChild(downloadLink);
  downloadLink.click();
  document.body.removeChild(downloadLink);
});

该代码与示例1相似，但使用一个图像数据URI来创建Blob对象。因此，下载链接必须使用图像文件类型“image/jpeg”。这将导致浏览器下载一个名为“image.jpg”的JPEG文件。图片内容为指定的图像数据URI所代表的图像文件内容。