首页 > 其他分享 >纯前端操作文件

纯前端操作文件

时间:2023-06-05 11:58:00浏览次数:28  
标签:function 文件 const 前端 await return 操作 fileHandle

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .panel {
            width: 300px;
            height: 200px;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <textarea class="panel"></textarea>
    <div>
        <button onclick="createFile()">创建文件</button>
        <button onclick="openFile()">选择文件</button>
        <button onclick="saveFile()">保存文件</button>
        <button onclick="saveAsFile()">另存文件</button>
    </div>
</body>
<script>

    let _fileHandle
    function getDom() {
        return document.querySelector(".panel")
    }
    function getVal() {
        const dom = getDom()
        return dom.value
    }
    function setVal(val) {
        const dom = getDom()
        dom.innerText = val
    }
    // 创建文件
    async function createFile() {
        const opts = {
            types: [
                {
                    description: "Text file",
                    accept: { "text/plain": [".txt"] },
                },
            ],
        };
        _fileHandle = await window.showSaveFilePicker(opts);
        return _fileHandle
    }
    // 打开文件
    async function openFile() {
        const pickerOpts = {
            types: [
                {
                    description: "Images",
                    accept: {
                        "image/*": [".png", ".gif", ".jpeg", ".jpg", ".txt"],
                    },
                },
            ],
            excludeAcceptAllOption: true,
            multiple: false,
        };
        // 打开文件选择器,解构返回的数组中的第一个元素
        const [fileHandle] = await window.showOpenFilePicker(pickerOpts);
        console.log('fileHandle:', fileHandle);
        _fileHandle = fileHandle
        // 操作 fileHandle 的后续代码
        const file = await fileHandle.getFile()
        setVal(await file.text())
        return fileHandle
    }
    // 保存文件
    async function saveFile() {
        const fileHandle = _fileHandle ? _fileHandle : await createFile()
        save(fileHandle)
    }
    async function save(handle) {
        if (!handle) return
        const writable = await handle.createWritable();
        await writable.write(getVal());
        await writable.close();
    }
    async function saveAsFile() {
        const fileHandle = await createFile()
        save(fileHandle)
    }
</script>

</html>

标签:function,文件,const,前端,await,return,操作,fileHandle
From: https://www.cnblogs.com/letgofishing/p/17457413.html

相关文章

  • 2021-08-12--Web前端性能指标和性能优化(综述)
    title:网站的几个性能指标和优化(简易)categories:-网络安全与性能优化tags:-性能优化-性能指标-白屏时间-首屏时间-TTFBabbrlink:5c56date:2021-08-1223:42:49updated:2021-08-1223:42:49来源:https://m.sohu.com/a/201865334_509523/关于......
  • 帮你梳理了一份前端知识架构图
    列一份前端知识架构图在上一篇文章中,我们简要地总结了前端的学习路径与方法,我们提到的第一个学习方法就是:建立知识框架。那么,今天我们就一起来列一份前端的知识框架图。在开始列框架之前,我想先来谈谈我们的目标。实际上,我们在网上可以找到很多参考资料,比如MDN这样的参考手册,又比......
  • 系统化学习前端之Vue(vue2 组件通信)
    前言前文vue2基础中聊过,页面本质是DOM树,而在vue2中组件=vm实例对象=DOM。因此,页面其实也是组件树构成,组件之间形成父子关系,兄弟关系等,相互之间通信也是组件树的必须要求。vue2组件通信组件通信即组件之间的数据传递。props和$emit$attrs和$listener$parent......
  • 一个优秀的前端开发相关的博客
         好久没写技术博客了,前段时间离职后,就离开了自己奋斗四年多的公司和城市,踏入新的城市和公司,埋头苦干到现在,网站一期已经上线一段时间了。在新公司完全进行web开发,成天接触js,css等技术,也慢慢开始关注这方面的技术博客,后续会将自己发现的博客记录下来和大家分享。好了,废话......
  • 帮你梳理了一份前端知识架构图
    列一份前端知识架构图在上一篇文章中,我们简要地总结了前端的学习路径与方法,我们提到的第一个学习方法就是:建立知识框架。那么,今天我们就一起来列一份前端的知识框架图。在开始列框架之前,我想先来谈谈我们的目标。实际上,我们在网上可以找到很多参考资料,比如MDN这样的参考手册,又......
  • RabbitMQ配置文件及环境变量
    http://www.rabbitmq.com/configure.htmlMechanismDescriptionConfigurationFile(s)definesserverandpluginsettingsforTCPlistenersandothernetworking-relatedsettingsTLSresourceconstraints(alarms)authenticationandauthorizationbackendsmessagestore......
  • 基于JAVA操作系统在线网站SQL
    随着21世纪的到来,人们更深刻的感受到了计算机在生活和工作中作用的重要,越来越多的职业需要具有计算机的应用技能。掌握计算机是职业的需要,社会的需要,更是事业发展的需要。今天,计算机技术不但广泛地应用在办公自动化中,还全面参与到各行各业。所有与计算机相关的职业都要求工作者有......
  • SpringBoot打包成WAR包的时候把第三方jar包打到LIB文件夹下和把第三方jar包打入到Spri
    SpringBoot打包成WAR包的时候把第三方jar包打到LIB文件夹下和把第三方jar包打入到SpringBootjar包中转载首先我们应该知道我们把SPRINGBOOT项目打包成WAR包和JAR包的时候分别需要何种插件我们最常用的把springBoot打成jar包的插件是下面这样的一个插件,这是把我们的springBoot......
  • Laravel-Excel 导出csv文件 中文乱码处理
    Laravel-Excel导出csv文件中文乱码处理标签(空格分隔):未分类文档地址【https://docs.laravel-excel.com/3.1/exports/settings.html】实现WithCustomCsvSettings接口,或者增加配置文件`excel.php`namespaceApp\Exports;useMaatwebsite\Excel\Concerns\WithCustomCsvSet......
  • 1-4 列出fstab文件的详细信息
    切换到/etc/目录,列出fstab文件的详细信息,详细解决fstab一行,每个或每几个字符的详细含义。【cd/etc;ls-l/etc/fstab】[root@cent6~]#ls-l/etc/fstab-rw-r--r--.1rootroot899May2018:52/etc/fstab[root@cent6~]#1.权限-RW-R--R--;第一部分-RW代表所有......