前端下载文件

尝试了两种方法：

1.使用download.js直接下载在浏览器，需用户自己转存文件到文件夹

2.使用window接口的 showSaveFilePicker()API

	download.js	showSaveFilePicker()
优点	兼容性强	可直接保存到指定文件夹
缺点	无法保存到指定文件夹	兼容性差且需要安全上下文，window 10,11系统用户较友好
网址	http://danml.com/download.html	https://developer.mozilla.org/zh-CN/docs/Web/API/Window/showSaveFilePicker

下载指令：

// 下载download.js
npm install downloadjs
// 下载api
npm install native-file-system-adapter

两种下载方式代码实现如下：

  // 方案一：api下载到指定文件夹
  // 使用 showSaveFilePicker 保存文件

  try {
   const handle = await showSaveFilePicker({
     suggestedName: fileName.value,
     types: [
       {
         description: "JSON files",
         accept: {
           "application/json": [".json"],
         },
       },
     ],
   });
  
   const writable = await handle.createWritable();
   await writable.write(exportJson);
   await writable.close();
   console.log("文件保存成功");
 } catch (error) {
   console.error("文件保存失败:", error);
 }

  // 方案二：download.js下载到浏览器
  //创建一个文本blob对象
  var blob = new Blob([exportJson], { type: "application/json" });
  download(blob, fileName.value);

还有一种常见的下载方法：

// 示例：以下载一个JSON文件为例
  //创建一个文本blob对象
  var blob = new Blob([exportJson], { type: "application/json" });
  //构造下载连接
  const url = URL.createObjectURL(blob);
  //创建下载连接的A标签
  const a = document.createElement("a");
  a.href = url;
  a.download = "export_sample.json";
  //模拟点击下载连接
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  //释放资源
  URL.revokeObjectURL(url);
};

这种和上面提到的download.js的方式相似，但使用这种方法时，如果是图片、视频、pdf 等格式的文件会直接在浏览器预览，而不是像 docx 、xlsx 一样直接下载。而download.js可以不区分文件格式，全部实现下载