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

野性酷女 2023-02-12 12:25 16阅读 0赞

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

<!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>