导出文件
利用a标签和HTML5中的Blob对象实现：
// 导出功能
// str 导入的内容 字符串类型
// fileName 导出内容的文件名例如（test.js）
function download(str, fileName){
var link = document.createElement("a");
link.target = "_blank";
link.download = fileName;
link.rel = "noopener";
var blob = new Blob([str], {type: "text/plain;charset=utf-8"})
link.href = URL.createObjectURL(blob);
setTimeout(function () { URL.revokeObjectURL(link.href) }, 4E4) // 40s
setTimeout(function () { link.click(); }, 0);
}
导入文件
利用表单和HTML5中的FileReader对象实现：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>
<input type="file" id="files" style="display: none" onchange="fileImport();">
<input type="button" id="fileImport" value="导入">
</div>
<script src="../js/jQuery/jquery-1.11.1.js"></script>
<script>
//点击导入按钮,使files触发点击事件,然后完成读取文件的操作
$("#fileImport").click(function () {
$("#files").click();
})
function fileImport() {
//获取读取我文件的File对象
var selectedFile = document.getElementById('files').files[0];
var name = selectedFile.name;//读取选中文件的文件名
var size = selectedFile.size;//读取选中文件的大小
console.log("文件名:"+name+"大小:"+size);
var reader = new FileReader();//这是核心,读取操作就是由它完成.
reader.readAsText(selectedFile);//读取文件的内容,也可以读取文件的URL
reader.onload = function () {
//当读取完成后回调这个函数,然后此时文件的内容存储到了result中,直接操作即可，this.result就是我们导入文件的内容
console.log(this.result);
}
}
</script>
</body>
</html>
网友评论