如何使用JavaScript或jQuery下载已创建的File对象文件？

当然可以实现！不管是原生JavaScript还是借助jQuery，都能轻松完成这个File对象的下载操作，下面给你两种实用的方案：

原生JavaScript方案 #

这是最直接的方式，不需要依赖任何库：

// 注意：建议不要用File作为变量名，避免覆盖内置的File构造函数，这里改成myFile
var myFile = new File(["aa"], "dek_iv");

// 创建文件的临时URL
const fileUrl = URL.createObjectURL(myFile);

// 创建一个隐藏的<a>标签
const link = document.createElement('a');
link.href = fileUrl;
link.download = myFile.name; // 指定下载后的文件名

// 触发点击事件来启动下载
document.body.appendChild(link);
link.click();

// 清理资源，避免内存泄漏
document.body.removeChild(link);
URL.revokeObjectURL(fileUrl);

jQuery方案 #

jQuery本身没有专门的下载API，但可以用它的DOM操作方法来简化代码，逻辑和原生一致：

var myFile = new File(["aa"], "dek_iv");
const fileUrl = URL.createObjectURL(myFile);

// 用jQuery创建<a>标签并设置属性
$('<a>', {
  href: fileUrl,
  download: myFile.name,
  style: 'display:none'
}).appendTo('body').click(function() {
  // 点击后清理资源
  $(this).remove();
  URL.revokeObjectURL(fileUrl);
}).click();

小提醒 #

• 变量名尽量别用File，因为这是浏览器的内置构造函数，容易造成命名冲突；
• URL.revokeObjectURL一定要调用，不然会占用浏览器内存，尤其是频繁创建File对象下载的时候更要注意。

内容的提问来源于stack exchange，提问作者ravindra reddy