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

 点击导出按钮弹出文件框导出文件，点击导入选择文件获取文件数据，以下我保存的是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 IE10let 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 unsupportedif (typeof navigator !== "undefined" &&/MSIE [1-9]\./.test(navigator.userAgent)) {return;}vardoc = 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 URLget_URL().revokeObjectURL(file);} else { // file is a Filefile.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 URLsvarfilesaver = 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 neededif (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/1kZffRIview.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=389642if (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=65440if (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 existsfile.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 windowif (typeof module !== "undefined" && module !== null) {module.exports = saveAs;
} else if ((typeof define !== "undefined" && define !== null) && (define.amd != null)) {define([], function() {return saveAs;});
}

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

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Docker 数据卷

Docker 数据卷

1、什么是数据卷 通过镜像创建一个容器。容器一旦被销毁&#xff0c;则容器内的数据将一并被删除。但有些情况下&#xff0c;通过服务器上传的图片出会丢失。容器中的数据不是持久化状态的。这个时候可以通过数据卷来解决这个问题。 数据卷是一个可供一个或多个容器使用的特殊目…
阅读更多...
GAMES101 OpenCV环境安装

GAMES101 OpenCV环境安装

文章目录 Opencv 库编译Step 1.下载源码Step 2. 使用CMake编译Step3. 解决CMake 过程中的报错错误1&#xff1a; 错误的Python版本:错误1 解决办法 错误2&#xff1a;下载ippicv_2020_win_ia32_20191018_general.zip失败错误2 解决办法 错误3&#xff1a;ffmpeg相关文件下载失败…
阅读更多...
时间序列的季节性：3种模式及8种建模方法

时间序列的季节性：3种模式及8种建模方法

分析和处理季节性是时间序列分析中的一个关键工作&#xff0c;在本文中我们将描述三种类型的季节性以及常见的8种建模方法。 什么是季节性? 季节性是构成时间序列的关键因素之一&#xff0c;是指在一段时间内以相似强度重复的系统运动。 季节变化可以由各种因素引起&#xf…
阅读更多...
C++——map和set（multimap和multiset）

C++——map和set（multimap和multiset）

目录 1.关联式容器 2.键值对 3.树形结构的关联式容器 3.1 set 3.1.1 set的介绍 3.1.2 set的使用 3.2 multiset 3.2.1 multiset的介绍 3.2.2 multiset的使用 3.3 map 3.3.1 map的介绍 3.3.2 map的使用 3.4 multimap 3.4.1 multimap的介绍 3.4.2 multimap的使用 …
阅读更多...
（五）「消息队列」之 RabbitMQ 主题（使用 .NET 客户端）

（五）「消息队列」之 RabbitMQ 主题（使用 .NET 客户端）

0、引言 先决条件 本教程假设 RabbitMQ 已安装并且正在 本地主机 的标准端口&#xff08;5672&#xff09;上运行。如果您使用了不同的主机、端口或凭证&#xff0c;则要求调整连接设置。 获取帮助 如果您在阅读本教程时遇到问题&#xff0c;可以通过邮件列表或者 RabbitMQ 社区…
阅读更多...
简单工厂模式（java）

简单工厂模式（java）

目录 结构 案例 类图 代码实现 简单咖啡工厂类 咖啡店类 咖啡类 具体咖啡类 简单工厂方法的优缺点 优点 缺点 结构 简单工厂包含如下角色&#xff1a; 抽象产品 &#xff1a;定义了产品的规范&#xff0c;描述了产品的主要特性和功能。具体产品 &#xff1a;实现或者…
阅读更多...
Spring Boot Helper插件免费版的下载

Spring Boot Helper插件免费版的下载

在使用idea的社区版的时候&#xff0c;我们创建springboot项目就要下载springboot helper插件&#xff0c;下载是很简单&#xff0c;但是呢&#xff0c;有一个问题就是&#xff1a; 可以看到它是收费的&#xff0c;要想免费创建spring boot项目那么我们第一可以采用网页版创建&…
阅读更多...
Java线程池

Java线程池

目录 线程池 一、Java构建线程的方法 二、线程池的7个参数 三、线程池的执行流程 四、线程池属性标识 4.1.核心属性 4.2.线程池状态变化 五、线程池的 execute 方法执行 六、Worker的封装 七、线程执行的后续处理 线程池 线程池ThreadPoolExecutor源码剖析 // Execu…
阅读更多...
B071-项目实战-用户模块--手机注册 管理员登录

B071-项目实战-用户模块--手机注册 管理员登录

目录 完成注册功能后端开发完成UserControllerUserServiceImplLogininfoMapper 前端页面完成绑定数据绑定事件准备登录页 管理员登录1需求分析登录设计页面设计表设计流程设计所需技术 员工新增级联操作登录信息EmployeeServiceImplShopServiceImpl 管理员登录2前端页面后端接口…
阅读更多...
MacOS使用USB接口与IPhone进行Socket通信

MacOS使用USB接口与IPhone进行Socket通信

演示效果如下: 开源地址: GitHub - rsms/peertalk: iOS and Mac Cocoa library for communicating over USB 克隆源码: git clone https://github.com/rsms/peertalk.git 克隆后打开peertalk然后启动xcode工程 先启动MacOS服务端工程,再启动iOS客户端工程 客户端 服务端
阅读更多...
php代码逻辑题

php代码逻辑题

<?php error_reporting(0); show_source(__FILE__); $guess $_POST[guess]; $data (array)json_decode($_GET[data]); if(substr(md5($guess),0,27)797ed5077436dc8abaec64750e2)if ($data[aaa] !666 && intval($data[aaa],0) 666 &‮⁦!!⁩⁦& "h…
阅读更多...
AtcoderABC249场

AtcoderABC249场

A - JoggingA - Jogging 题目大意 高桥和青木一起慢跑&#xff0c;高桥每隔 ACAC 秒钟走 BB 米&#xff0c;然后休息 CC 秒钟&#xff0c;青木每隔 DFDF 秒钟走 EE 米&#xff0c;然后休息 FF 秒钟。现在已经过去了 XX 秒钟&#xff0c;问谁跑得更远。 思路分析 模拟来解决这…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023