JavaScript下载功能_javascript文件操作

admin 百科 14
前端可通过Blob和a[download]实现文件下载,如文本、JSON、CSV等;利用URL.createObjectURL创建临时链接,动态触发下载,适用于导出数据场景。

JavaScript下载功能_javascript文件操作-第1张图片-佛山资讯网

在前端开发中,JavaScript 本身不能直接操作用户的文件系统,出于安全考虑,浏览器限制了对本地文件的读写权限。但可以通过一些方法实现“下载文件”的功能,比如将文本、JSON、CSV 等内容生成文件并触发浏览器下载。

1. 使用 Blob 和 URL.createObjectURL 实现文件下载

这是最常用的方式,适用于导出文本类数据(如 TXT、CSV、JSON)或二进制数据(如图片、PDF)。

原理: 将数据包装成 Blob 对象,创建一个临时的 URL,然后通过动态创建的 标签触发下载。

示例:下载一段文本为 .txt 文件

立即学习“Java免费学习笔记(深入)”;

function downloadText(content, filename) {
  const blob = new Blob([content], { type: 'text/plain' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  a.click();
  URL.revokeObjectURL(url); // 释放内存
}

// 调用
downloadText('Hello, 这是要保存的内容', 'note.txt');

登录后复制

示例:下载 JSON 数据

标签: javascript java js 前端 json 浏览器 app 前端开发 中文乱码 csv ai pdf 跨域

发布评论 0条评论)

还木有评论哦,快来抢沙发吧~