JS前端创建html或json文件并浏览器导出下载

在JS前端中，我们可以使用Blob对象和URL.createObjectURL()方法来创建并导出HTML或JSON文件供用户下载。

javascript 复制代码

function createAndExportFile(data, filename) {
  // 创建一个Blob对象，数据类型为text/plain
  const blob = new Blob([data], { type: 'text/plain' });

  // 创建一个临时的URL，用于生成下载链接
  const url = URL.createObjectURL(blob);

  // 创建一个隐藏的a标签，设置下载链接和文件名，然后模拟点击进行下载
  const link = document.createElement('a');
  link.href = url;
  link.download = filename;

  document.body.appendChild(link);
  link.click();

  // 下载完成后，释放URL对象
  setTimeout(() => {
    URL.revokeObjectURL(url);
    document.body.removeChild(link);
  }, 0);
}

// 示例数据
const htmlData = '<html><head><title>My HTML File</title></head><body><h1>Hello, World!</h1></body></html>';
const jsonData = JSON.stringify({ name: 'John', age: 28, city: 'New York' }, null, 2);

// 导出HTML文件
createAndExportFile(htmlData, 'my-file.html');

// 导出JSON文件
createAndExportFile(jsonData, 'my-file.json');

上述代码中，我们定义了一个createAndExportFile函数，接受文件内容和文件名作为参数。函数首先创建一个Blob对象，其中包含了数据和数据类型。然后通过调用URL.createObjectURL()方法生成一个临时的URL，该URL指向Blob对象。接下来，我们创建一个隐藏的a标签，并设置下载链接和文件名。将a标签添加到页面中后，模拟点击a标签进行下载。最后，在一个延迟调用中，我们释放URL对象并从页面中移除a标签。

你可以根据需要修改htmlData和jsonData变量的值来包含实际的HTML或JSON数据。

为了支持较大的文件，我们可以使用分块下载的方式，将文件分成多个小块进行下载。这样可以避免一次性下载大文件所带来的性能问题。下面是一个改进后的示例：

javascript 复制代码

function createAndExportFile(data, filename) {
  // 将数据分割成每个块的大小（这里假设每个块大小为1KB）
  const chunkSize = 1024;
  const chunks = [];

  for (let i = 0; i < data.length; i += chunkSize) {
    chunks.push(data.slice(i, i + chunkSize));
  }

  // 创建一个Blob对象，数据类型为text/plain
  const blob = new Blob(chunks, { type: 'text/plain' });

  // 创建一个临时的URL，用于生成下载链接
  const url = URL.createObjectURL(blob);

  // 创建一个隐藏的a标签，设置下载链接和文件名，然后模拟点击进行下载
  const link = document.createElement('a');
  link.href = url;
  link.download = filename;

  document.body.appendChild(link);
  link.click();

  // 下载完成后，释放URL对象
  setTimeout(() => {
    URL.revokeObjectURL(url);
    document.body.removeChild(link);
  }, 0);
}

// 示例数据
const loremIpsum = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat sagittis semper.';

// 生成一个3000字以上的文本数据
const longTextData = loremIpsum.repeat(150);

// 导出文本文件
createAndExportFile(longTextData, 'my-file.txt');

在这个改进后的示例中，我们首先将要导出的数据分成了每个块大小为1KB的小块。然后，通过循环将这些小块添加到chunks数组中。接下来，我们创建Blob对象时传入了chunks数组及相关的参数。其余部分的代码与之前的示例相同。