JS实现数据导入及导出下载

master336

52300人浏览 · 2020-05-26 10:16:58

master336 · 2020-05-26 10:16:58 发布

直接上代码吧，解释都在代码里了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js-文件导入导出</title>
	<style type="text/css">
	input,textarea {
		display:block;
		margin-top:20px;
	}
	</style>
</head>
<body>
<div>
    <input type="file" id="files" style="display: none" onchange="fileImport();">
    <input type="button" id="fileImport" value="导入">
	<input type="button" id="fileDownload" value="导出">
	<span id="showfileinfo">文件信息：</span>
	<textarea id="showvalue" style="height: 280px;width: 500px;"></textarea>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    //文件选取 (读取)
    $("#fileImport").click(function () {
        $("#files").click();
    })  
	// 文件下载（写入下载）
	$("#fileDownload").click(fileDownload)
    function fileImport() {
        //获得文件对象
        var selectedFile = $('#files')[0].files[0];
		//读取文件名
        var name = selectedFile.name;
		//读取大小
        var size = selectedFile.size;
        $("#showfileinfo").text("文件名:"+name+"     大小:"+size);
		//读取操作
        var reader = new FileReader();
		//读取,也可以读取文件的URL
        reader.readAsText(selectedFile);
        reader.onload = function () {
            //回调函数,存储文件内容到result
			$("#showvalue").val(this.result)
        }
    }
	function fileDownload () {
		// 获取导出文件内容
		var text = $("#showvalue").val();
		// 创建隐藏的下载文件链接
        var element = document.createElement('a');
		element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
		element.setAttribute('download', "下载.json");
		element.style.display = 'none';
		document.body.appendChild(element);
		// 手动触发下载
		element.click();
		// 清理dom
		document.body.removeChild(element);
    }
</script>
</body>
</html>

智能机器人开发者大赛社区

「智能机器人开发者大赛」官方平台，致力于为开发者和参赛选手提供赛事技术指导、行业标准解读及团队实战案例解析;聚焦智能机器人开发全栈技术闭环，助力开发者攻克技术瓶颈，促进软硬件集成、场景应用及商业化落地的深度研讨。加入智能机器人开发者社区iRobot Developer，与全球极客并肩突破技术边界，定义机器人开发的未来范式！

更多推荐