首页
前端开发
Webpack
基于Blob对象的JavaScript文件下载方法

基于Blob对象的JavaScript文件下载方法

27 次浏览 0 条评论
pdf
pdf

传统的JavaScript文件下载方式依赖于服务端生成文件链接，而利用Blob对象，前端能够直接处理二进制数据并创建下载链接。该方法通常应用于以下场景：

  • 动态生成文件: 例如，根据用户输入生成CSV或PDF文件。
  • 处理大文件: 避免直接传输大量数据到前端，而是将数据处理为Blob后下载。
  • 安全性要求高的场景: 可以对生成的Blob数据进行加密处理，提高安全性。

以下代码演示了如何使用Blob对象下载文件：

function downloadFile(data, filename, mimeType) {
  const blob = new Blob([data], { type: mimeType });
  const url = window.URL.createObjectURL(blob);

  const link = document.createElement('a');
  link.href = url;
  link.setAttribute('download', filename);

  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  window.URL.revokeObjectURL(url);
}

// 使用示例：下载一个文件
const data = '这是一段示例文本。';
const filename = 'example.txt';
const mimeType = 'text/plain';

downloadFile(data, filename, mimeType);

上述代码首先创建了一个Blob对象，并将要下载的数据存储在其中。然后，使用URL.createObjectURL方法创建了一个指向Blob对象的URL。接着，创建了一个隐藏的标签，并将其href属性设置为生成的URL，download属性设置为文件名。最后，模拟点击标签触发下载，并在下载完成后清理资源。

pdf 文件大小：290.98KB