1. 在文本域中输出文本，而后存在文件中，点击下载按钮，即可把文件下载下来。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body >
<textarea id="textarea"></textarea><a id="downLoad"> 把文本域中的文本存储到文件中，点击此按钮能够下载这个文件 </a>
<script>
downLoad.onclick = function(){
let textareaVal = textarea.value;
// 把文本域中的字符串转化成二进制字符串
const blob = new Blob([textareaVal],{type:'text/html'});
console.log('blob', blob);
// 把二进制内容生成一个连贯
downLoad.href = URL.createObjectURL(blob);
downLoad.setAttribute('download', 'index.html');
}
</script>
</body>
</html>2. 点击上传文件，把图片上传，并且显示进去（办法一：读取文件内容）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="file" id="file">
<script>
// 办法一：读取图片文件，而后把图片显示进去
file.addEventListener('change', (e)=>{let file = e.target.files[0]; // 二进制文件内容
console.log(file);
// 异步写法
let fileReader = new FileReader();
fileReader.readAsDataURL(file);
fileReader.onload = function(){console.log(fileReader.result);
let img = document.createElement('img');
img.src = fileReader.result;
document.body.appendChild(img);
}
});
</script>
</body>
</html>3. 点击上传文件，把图片上传，并且显示进去（办法二：把文件作为一个路劲，把路劲给 src 显示~~~~）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="file" id="file">
<script>
// 办法一：读取图片文件，而后把图片显示进去
file.addEventListener('change', (e)=>{let file = e.target.files[0]; // 二进制文件内容
// 同步写法
let url = URL.createObjectURL(file);
console.log(url);
let img = document.createElement('img');
img.src = url;
document.body.appendChild(img);
});
</script>
</body>
</html>