使用JavaScript实现保存文件，用户可以自己选择本地路径

GUO_YYDS

已于 2024-04-06 18:02:24 修改

阅读量3.9k

点赞数 2

文章标签： javascript 开发语言 ecmascript

于 2023-09-28 22:58:51 首次发布

本文链接：https://blog.csdn.net/m0_53063391/article/details/133394827

版权

一句话：使用File System Access API

但是，此API目前仍处于实验阶段，可能并不在所有浏览器中都得到完全支持。

浏览器的权限是很低的，是不能与操作系统实现交互，只有少量的api可以与操作系统交互，例如文件上传。但是，软件是有很高的权限的，例如，迅雷下载就可以轻松实现，下载到指定目录。

但是，我们可以发现，在某度图片上，右键，可以选择另存为，就能够弹出本地文件目录，不禁让我们深思，到底是怎么实现的，但没有查到，kukuku，不管了，给出我们的实现方法。

<!DOCTYPE html>
<html>
<head>
  <title>选择保存目录示例</title>
</head>
<body>
  <h2>选择保存目录示例</h2>

  <button onclick="saveFile()">保存文件</button>

  <script>
    async function saveFile() {
      try {
        const opts = {
          types: [
            {
              description: '文件',
              accept: {
                'text/plain': ['.txt'],
                'application/pdf': ['.pdf'],
                'image/jpeg': ['.jpg', '.jpeg'],
                'image/png': ['.png']
              }
            }
          ],
          excludeAcceptAllOption: true
        };

        const handle = await window.showSaveFilePicker(opts); // 打开保存文件对话框
        const writable = await handle.createWritable(); // 创建可写入的文件对象

        // 在这里写入文件内容
        await writable.write('这是文件的内容');
        await writable.close();

        console.log('文件保存成功');
        windows.alert('success');
      } catch (error) {
        console.error('文件保存失败:', error);
      }
    }
  </script>
</body>
</html>

GUO_YYDS

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
9
评论
使用JavaScript实现保存文件，用户可以自己选择本地路径

浏览器的权限是很低的，是不能与操作系统实现交互，只有少量的api可以与操作系统交互，例如文件上传。但是，软件是有很高的权限的，例如，迅雷下载就可以轻松实现，下载到指定目录。// 创建可写入的文件对象。// 打开保存文件对话框。// 在这里写入文件内容。
复制链接

扫一扫