js 实现导入导出功能(FileSave.js)

news2024/11/26 10:03:41

 点击导出按钮弹出文件框导出文件，点击导入选择文件获取文件数据，以下我保存的是json。

html： 

<div class="layui-inline">  
    <div class="layui-btn-group">
         <button type="button" class="layui-btn layui-btn-normal layui-btn-sm"  onclick="exportEditFile()">导入</button>
         <input type="file" id="importEditFile" accept=".json" onchange="uploadEditFile(this)" style="width:0;visibility:hidden;opacity: 0">
         <button type="button" class="layui-btn layui-btn-normal layui-btn-sm"  onclick="importEditFile()">导出</button>
     </div>
</div>


//需要引用 FileSaver.js

js： 

function SceneFileSaveAs(obj, name) {
    let content = JSON.stringify(obj, null, 4);
    let blob = new Blob([content], { type: "text/plain;charset=utf-8" });
    saveAs(blob, name);
}

//导出文件
function exportEditFile() { 
    //文件的json数据
    let testobj = {
        "id": 1,
        "name": "11"
    };
    //保存的文件名
    let fileName =  "file_" + localStorage.getItem("ip") + ".json";
    SceneFileSaveAs(testobj, fileName);
}
//导入文件
function importEditFile() {
    $("#importEditFile").click();
}
// 导入
function uploadEditFile(input) {
    //支持chrome IE10
    let file = input.files[0];//获取读取的File对象
    let filepath = file.name;//读取选中文件的文件名
    let filename = file.name.split(".")[0];
    let size = file.size;//读取选中文件的大小
    console.log("文件名:" + filepath + "大小：" + size); 
    if (window.FileReader) {
        console.log("window.FileReader")
        var reader = new FileReader();
        console.log(" reader.onload");
        reader.readAsText(file);//读取文件的内容
        reader.onload = function () {
            console.log(" reader.onload----------------")
            let myresult = this.result;//当读取完成之后会回调这个函数，然后此时文件的内容存储到了result中。直接操作即可。
            input.value = "";
            if(isJSON(myresult)){
                let myresult1 = JSON.parse(myresult);
                console.log(myresult1);
                SceneEditSend(myresult1);
            }else {
                console.log("文件内容格式异常");
            }
        }
        // reader.readAsText(file);
    }
}
//拿到json文件里的数据
function SceneEditSend(data) {
    console.log(data.name);
}

 FileSaver.js 框架代码：

/* FileSaver.js
 * A saveAs() FileSaver implementation.
 * 2014-11-29
 *
 * By Eli Grey, http://eligrey.com
 * License: X11/MIT
 *   See https://github.com/eligrey/FileSaver.js/blob/master/LICENSE.md
 */

/*global self */
/*jslint bitwise: true, indent: 4, laxbreak: true, laxcomma: true, smarttabs: true, plusplus: true */

/*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js */

var saveAs = saveAs
    // IE 10+ (native saveAs)
    || (typeof navigator !== "undefined" &&
        navigator.msSaveOrOpenBlob && navigator.msSaveOrOpenBlob.bind(navigator))
    // Everyone else
    || (function(view) {
        "use strict";
        // IE <10 is explicitly unsupported
        if (typeof navigator !== "undefined" &&
            /MSIE [1-9]\./.test(navigator.userAgent)) {
            return;
        }
        var
            doc = view.document
            // only get URL when necessary in case Blob.js hasn't overridden it yet
            , get_URL = function() {
                return view.URL || view.webkitURL || view;
            }
            , save_link = doc.createElementNS("http://www.w3.org/1999/xhtml", "a")
            , can_use_save_link = "download" in save_link
            , click = function(node) {
                var event = doc.createEvent("MouseEvents");
                event.initMouseEvent(
                    "click", true, false, view, 0, 0, 0, 0, 0
                    , false, false, false, false, 0, null
                );
                node.dispatchEvent(event);
            }
            , webkit_req_fs = view.webkitRequestFileSystem
            , req_fs = view.requestFileSystem || webkit_req_fs || view.mozRequestFileSystem
            , throw_outside = function(ex) {
                (view.setImmediate || view.setTimeout)(function() {
                    throw ex;
                }, 0);
            }
            , force_saveable_type = "application/octet-stream"
            , fs_min_size = 0
            // See https://code.google.com/p/chromium/issues/detail?id=375297#c7 and
            // https://github.com/eligrey/FileSaver.js/commit/485930a#commitcomment-8768047
            // for the reasoning behind the timeout and revocation flow
            , arbitrary_revoke_timeout = 500 // in ms
            , revoke = function(file) {
                var revoker = function() {
                    if (typeof file === "string") { // file is an object URL
                        get_URL().revokeObjectURL(file);
                    } else { // file is a File
                        file.remove();
                    }
                };
                if (view.chrome) {
                    revoker();
                } else {
                    setTimeout(revoker, arbitrary_revoke_timeout);
                }
            }
            , dispatch = function(filesaver, event_types, event) {
                event_types = [].concat(event_types);
                var i = event_types.length;
                while (i--) {
                    var listener = filesaver["on" + event_types[i]];
                    if (typeof listener === "function") {
                        try {
                            listener.call(filesaver, event || filesaver);
                        } catch (ex) {
                            throw_outside(ex);
                        }
                    }
                }
            }
            , FileSaver = function(blob, name) {
                // First try a.download, then web filesystem, then object URLs
                var
                    filesaver = this
                    , type = blob.type
                    , blob_changed = false
                    , object_url
                    , target_view
                    , dispatch_all = function() {
                        dispatch(filesaver, "writestart progress write writeend".split(" "));
                    }
                    // on any filesys errors revert to saving with object URLs
                    , fs_error = function() {
                        // don't create more object URLs than needed
                        if (blob_changed || !object_url) {
                            object_url = get_URL().createObjectURL(blob);
                        }
                        if (target_view) {
                            target_view.location.href = object_url;
                        } else {
                            var new_tab = view.open(object_url, "_blank");
                            if (new_tab == undefined && typeof safari !== "undefined") {
                                //Apple do not allow window.open, see http://bit.ly/1kZffRI
                                view.location.href = object_url
                            }
                        }
                        filesaver.readyState = filesaver.DONE;
                        dispatch_all();
                        revoke(object_url);
                    }
                    , abortable = function(func) {
                        return function() {
                            if (filesaver.readyState !== filesaver.DONE) {
                                return func.apply(this, arguments);
                            }
                        };
                    }
                    , create_if_not_found = {create: true, exclusive: false}
                    , slice
                ;
                filesaver.readyState = filesaver.INIT;
                if (!name) {
                    name = "download";
                }
                if (can_use_save_link) {
                    object_url = get_URL().createObjectURL(blob);
                    save_link.href = object_url;
                    save_link.download = name;
                    click(save_link);
                    filesaver.readyState = filesaver.DONE;
                    dispatch_all();
                    revoke(object_url);
                    return;
                }
                // Object and web filesystem URLs have a problem saving in Google Chrome when
                // viewed in a tab, so I force save with application/octet-stream
                // http://code.google.com/p/chromium/issues/detail?id=91158
                // Update: Google errantly closed 91158, I submitted it again:
                // https://code.google.com/p/chromium/issues/detail?id=389642
                if (view.chrome && type && type !== force_saveable_type) {
                    slice = blob.slice || blob.webkitSlice;
                    blob = slice.call(blob, 0, blob.size, force_saveable_type);
                    blob_changed = true;
                }
                // Since I can't be sure that the guessed media type will trigger a download
                // in WebKit, I append .download to the filename.
                // https://bugs.webkit.org/show_bug.cgi?id=65440
                if (webkit_req_fs && name !== "download") {
                    name += ".download";
                }
                if (type === force_saveable_type || webkit_req_fs) {
                    target_view = view;
                }
                if (!req_fs) {
                    fs_error();
                    return;
                }
                fs_min_size += blob.size;
                req_fs(view.TEMPORARY, fs_min_size, abortable(function(fs) {
                    fs.root.getDirectory("saved", create_if_not_found, abortable(function(dir) {
                        var save = function() {
                            dir.getFile(name, create_if_not_found, abortable(function(file) {
                                file.createWriter(abortable(function(writer) {
                                    writer.onwriteend = function(event) {
                                        target_view.location.href = file.toURL();
                                        filesaver.readyState = filesaver.DONE;
                                        dispatch(filesaver, "writeend", event);
                                        revoke(file);
                                    };
                                    writer.onerror = function() {
                                        var error = writer.error;
                                        if (error.code !== error.ABORT_ERR) {
                                            fs_error();
                                        }
                                    };
                                    "writestart progress write abort".split(" ").forEach(function(event) {
                                        writer["on" + event] = filesaver["on" + event];
                                    });
                                    writer.write(blob);
                                    filesaver.abort = function() {
                                        writer.abort();
                                        filesaver.readyState = filesaver.DONE;
                                    };
                                    filesaver.readyState = filesaver.WRITING;
                                }), fs_error);
                            }), fs_error);
                        };
                        dir.getFile(name, {create: false}, abortable(function(file) {
                            // delete file if it already exists
                            file.remove();
                            save();
                        }), abortable(function(ex) {
                            if (ex.code === ex.NOT_FOUND_ERR) {
                                save();
                            } else {
                                fs_error();
                            }
                        }));
                    }), fs_error);
                }), fs_error);
            }
            , FS_proto = FileSaver.prototype
            , saveAs = function(blob, name) {
                return new FileSaver(blob, name);
            }
        ;
        FS_proto.abort = function() {
            var filesaver = this;
            filesaver.readyState = filesaver.DONE;
            dispatch(filesaver, "abort");
        };
        FS_proto.readyState = FS_proto.INIT = 0;
        FS_proto.WRITING = 1;
        FS_proto.DONE = 2;

        FS_proto.error =
            FS_proto.onwritestart =
                FS_proto.onprogress =
                    FS_proto.onwrite =
                        FS_proto.onabort =
                            FS_proto.onerror =
                                FS_proto.onwriteend =
                                    null;

        return saveAs;
    }(
        typeof self !== "undefined" && self
        || typeof window !== "undefined" && window
        || this.content
    ));
// `self` is undefined in Firefox for Android content script context
// while `this` is nsIContentFrameMessageManager
// with an attribute `content` that corresponds to the window

if (typeof module !== "undefined" && module !== null) {
    module.exports = saveAs;
} else if ((typeof define !== "undefined" && define !== null) && (define.amd != null)) {
    define([], function() {
        return saveAs;
    });
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/765545.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

文心一言 VS 讯飞星火 VS chatgpt （61）-- 算法导论6.4 5题

文心一言 VS 讯飞星火 VS chatgpt （61）-- 算法导论6.4 5题

文心一言 VS 讯飞星火 VS chatgpt &#xff08;61&#xff09;-- 算法导论6.4 5题 五、证明:在所有元素都不同的情况下&#xff0c;HEAPSORT 的时间复杂度是 Ω (nlgn)。 文心一言&#xff1a; 要证明在所有元素都不同的情况下&#xff0c;HEAPSORT 的时间复杂度是 Ω(n log…
阅读更多...
音视频H265编码； Socket通信实现N对N连接代码示例

音视频H265编码； Socket通信实现N对N连接代码示例

H.265编码和Socket通信是两个不同的概念&#xff0c;它们分别涉及视频编码和网络通信。在实现N对N连接时&#xff0c;您可以将它们结合起来&#xff0c;但要注意每个方面的具体实现。 H.265编码&#xff08;视频编码&#xff09;&#xff1a; H.265编码涉及将视频数据进行压缩…
阅读更多...
速腾robosense-sdk配置和使用方法

速腾robosense-sdk配置和使用方法

官方的安装和配置教程https://github.com/RoboSense-LiDAR/rslidar_sdk/ 1.手动下载sdk&#xff0c;下载tar.gz&#xff0c;然后解压缩:Releases RoboSense-LiDAR/rslidar_sdk GitHub 2.个人电脑连接速腾激光雷达后&#xff0c;确保能够ping通。当连接网线后&#xff0c;电…
阅读更多...
使用 appium 进行微信小程序的自动化测试

使用 appium 进行微信小程序的自动化测试

目录 前言&#xff1a; 微信小程序结构 自动化用例的调整 示例代码 后记 前言&#xff1a; 微信小程序是一种流行的移动应用程序&#xff0c;它在移动设备上提供了丰富的功能和用户体验。为了确保微信小程序的质量和稳定性&#xff0c;自动化测试是必不可少的一环。Appiu…
阅读更多...
视频融合平台EasyCVR级联后上级平台播放失败的问题排查与优化

视频融合平台EasyCVR级联后上级平台播放失败的问题排查与优化

EasyCVR视频融合平台基于云边端智能协同架构&#xff0c;具有强大的数据接入、处理及分发能力&#xff0c;平台可提供视频监控直播、云端录像、云存储、录像检索与回看、智能告警、平台级联、云台控制等视频能力与服务&#xff0c;可支持多协议、多类型的海量设备接入与分发。 …
阅读更多...
MATLAB数据类型及代码实现

MATLAB数据类型及代码实现

本推文是MATLAB基础与统计实战课程中的S02-1数据类型及代码实现 矩阵(Matrix) MATLAB最基础的数据单位是矩阵。什么是矩阵&#xff1f; 如下图可以看作M行乘以N列的数的组。这就是矩阵最基础的显示 ■区别于其他数据分 析软件或者编程语言的最大一 个特点(如&#xff0c;转…
阅读更多...
DOM4j及源码分析

DOM4j及源码分析

文章目录 DOM4jXML 解析技术原理XML 解析技术介绍 DOM4J 介绍DOM4j 中&#xff0c;获得 Document 对象的方式有三种源码增删改查代码 DOM4j 文档: https://dom4j.github.io/javadoc/1.6.1/ 本地文档: dom4j-1.6.1\docs\index.html XML 解析技术原理 不管是 html 文件还是 x…
阅读更多...
OAuth2.0详细介绍与实践(通俗易懂)

OAuth2.0详细介绍与实践(通俗易懂)

一、OAuth2.0介绍 1.1 概述 OAUTH协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是OAUTH的授权不会使第三方触及到用户的帐号信息&#xff08;如用户名与密码&#xff09;&#xff0c;即第三方无需使用用户的用户名与密码就可以申请获…
阅读更多...
[Juc进阶]Callable、Future和FutureTask

[Juc进阶]Callable、Future和FutureTask

一、Callable 与 Runnable 先说一下java.lang.Runnable吧&#xff0c;它是一个接口&#xff0c;在它里面只声明了一个run()方法&#xff1a; public interface Runnable {public abstract void run(); }由于run()方法返回值为void类型&#xff0c;所以在执行完任务之后无法返…
阅读更多...
多个文件保存位置不同：如何一键批量重命名为相同名称

多个文件保存位置不同：如何一键批量重命名为相同名称

在日常工作中&#xff0c;我们会经常遇到需要修改文件名称&#xff0c;文件改名方法也是很多种呢&#xff0c;可以手动修改或使用工具批量重命名&#xff0c;一般大家修改文件或文件夹重命名&#xff0c;都是在同一个保存位置&#xff0c;有没有遇到多个文件保存位置不同&#…
阅读更多...
抖音账号矩阵系统源码.搭建技术开发分享

抖音账号矩阵系统源码.搭建技术开发分享

技术自研框架开发背景&#xff1a; 抖音账号矩阵系统是一种基于数据分析和管理的全新平台&#xff0c;能够帮助用户更好地管理、扩展和营销抖音账号。 部分源码分享&#xff1a; //计算分页$active_list_all $Video_model->getCount($where);$page_libs new Libs_Pagin…
阅读更多...
Android平台如何高效率实现GB28181对接？

Android平台如何高效率实现GB28181对接？

技术背景 GB28181协议是一种用于设备状态信息报送的协议&#xff0c;可以在不同设备之间进行通信和数据传输。 在安卓系统上实现GB/T 28181非常必要&#xff0c;GB28181协议实现分两部分&#xff0c;一部分是信令&#xff0c;另外一部分就是媒体数据的编码。 信令主要包括S…
阅读更多...
CenterNet Objects as Points 论文学习

CenterNet Objects as Points 论文学习

论文链接&#xff1a;Objects as Points 1. 解决了什么问题&#xff1f; 目标检测的任务是从图像中检出目标的矩形框。现有的检测方法大多会穷举所有潜在的目标位置&#xff0c;然后做分类。这非常浪费资源、低效率&#xff0c;并且依赖后处理。单阶段方法会在图像上放置大量…
阅读更多...
049、事务设计之分布式基本原理

049、事务设计之分布式基本原理

隔离级别 iso定义的隔离级别 可串行化 可重复读 读已提交 读未提交 隔离级别区分的现象 脏读&#xff1a; 一个事务读取另一个未提交的事务所做更改 不可重复度 &#xff1a;同一事务中&#xff0c;前后执行相同的语句&#xff0c;出来的记录不一样 幻读&#xff1a; 同一事务…
阅读更多...
ImVoxelNet 论文学习

ImVoxelNet 论文学习

论文链接&#xff1a;ImVoxelNet: Image to Voxels Projection for Monocular and Multi-View General-Purpose 3D Object Detection 1. 解决了什么问题&#xff1f; RGB 图像成本低、数据源丰富&#xff0c;可以提供场景和物体的视觉信息&#xff0c;但不包括场景几何结构的…
阅读更多...
guitar pro2023最新专业的吉他制谱、扒谱软件

guitar pro2023最新专业的吉他制谱、扒谱软件

guitar pro8是一款打谱编曲软件。我们是会在guitar pro8里面去得到更多自由的打谱设置操作。软件中的改变都很强大好用&#xff0c;是会等等更轻松的编曲制作和设置等等。这里面的所有使用都是很精彩的&#xff0c;是能够去随意的使用更多不同的音符节拍的设置。想要自己进行打…
阅读更多...
全志F1C200S嵌入式驱动开发（spi-nand驱动）

全志F1C200S嵌入式驱动开发（spi-nand驱动）

【 声明：版权所有，欢迎转载，请勿用于商业用途。 联系信箱：feixiaoxing @163.com】 和v3s一样，f1c200s也支持tf卡、spi-nor、spi-nand启动。前面也说过，tf卡由于机械结构的原因，更适合拿来学习，spi-nor和spi-nand比较适合用来进行工业部署和消费娱乐领域。只是s…
阅读更多...
使用3DS Max 创建未来派螺栓枪模型

使用3DS Max 创建未来派螺栓枪模型

推荐&#xff1a; NSDT场景编辑器助你快速搭建可二次开发的3D应用场景 步骤 1 创建一个框并将其转换为可编辑多边形&#xff08;右键单击>转换为&#xff1a;>转换为可编辑多边形&#xff09;&#xff0c;然后使用连接添加一系列边循环&#xff0c;如下图所示。 步骤 2 …
阅读更多...
vue往window里存数据

vue往window里存数据

1、存 window._getAction () > {return actions}2、取 const parentAction window._getAction()
阅读更多...
使用openvpn docker及frp docker工具构建虚拟专业网络(V-P-N)

使用openvpn docker及frp docker工具构建虚拟专业网络(V-P-N)

使用openvpn docker及frp docker工具构建虚拟专业网络(V-P-N) 借助Docker和OpenVPN技术&#xff0c;您可以在短时间内设置并运行VPN服务器&#xff0c;并保证您的服务器安全。 运行环境 Ubuntu 16.04 TLS Docker version 19.03.8, build afacb8b7f0 OpenVPN Android Client …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023