纯JS生成并下载各种文本文件或图片

2023-12-27 18:00:31

大家好，欢迎来到我的博客，今天我要分享一个非常实用的技巧，那就是如何使用纯JavaScript生成并下载各种文本文件或图片。这个技巧非常有用，可以在很多场景下使用，比如从服务器下载数据，生成并下载报告，或者保存页面截图等。

纯JS生成并下载各种文本文件或图片

1. 准备工作

在开始之前，我们需要做一些准备工作。首先，我们需要创建一个HTML文件，在这个文件中，我们将放置我们的JavaScript代码。其次，我们需要创建一个JavaScript文件，在这个文件中，我们将编写我们的代码。最后，我们需要将这两个文件链接起来，这样JavaScript代码才能在HTML文件中运行。

2. 生成文本文件

现在，我们可以开始编写我们的JavaScript代码了。首先，我们要创建一个函数来生成文本文件。这个函数将接受两个参数：第一个参数是文本文件的名称，第二个参数是文本文件的内容。

function generateTextFile(fileName, content) {
  // 创建一个Blob对象
  const blob = new Blob([content], { type: "text/plain" });

  // 创建一个指向Blob对象的URL
  const url = URL.createObjectURL(blob);

  // 创建一个a标签
  const a = document.createElement("a");

  // 将Blob对象的URL设置为a标签的href属性
  a.href = url;

  // 将文本文件的名称设置为a标签的download属性
  a.download = fileName;

  // 触发a标签的点击事件
  a.click();

  // 撤销Blob对象的URL
  URL.revokeObjectURL(url);
}

3. 生成图片文件

接下来，我们要创建一个函数来生成图片文件。这个函数将接受两个参数：第一个参数是图片文件的名称，第二个参数是图片文件的内容。

function generateImageFile(fileName, content) {
  // 创建一个Blob对象
  const blob = new Blob([content], { type: "image/png" });

  // 创建一个指向Blob对象的URL
  const url = URL.createObjectURL(blob);

  // 创建一个a标签
  const a = document.createElement("a");

  // 将Blob对象的URL设置为a标签的href属性
  a.href = url;

  // 将图片文件的名称设置为a标签的download属性
  a.download = fileName;

  // 触发a标签的点击事件
  a.click();

  // 撤销Blob对象的URL
  URL.revokeObjectURL(url);
}

4. 下载动态内容

现在，我们可以下载动态内容了。比如，我们要下载页面分享的实时截图。我们可以使用以下代码：

const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");

// 将页面内容绘制到canvas上
ctx.drawWindow(window, 0, 0);

// 将canvas转换为图片
const imageData = canvas.toDataURL("image/png");

// 使用generateImageFile函数下载图片
generateImageFile("screenshot.png", imageData);