文件的下载与图片的预览

文件的下载

a标签指定了download属性时会下载跳转的链接，前提是同源

<h2>前端的blob对象 --- 文件的下载 && 图片的预览</h2>
<br>
<a id="btn">下载文件</a>
<script>
	var str = `
	     <div>
	         <p>文件的下载</>
	     </div>
	 `;
	 var blob = new Blob([str], {
	     type: 'text/html'
	 });
	
	 btn.onclick = function (e) {
	     this.setAttribute('download', '123.html');
	     this.href = URL.createObjectURL(blob);
	 }
</script>

图片的预览

    <input type="file" id="input1">
    <input type="file" id="input2">
    <script>
        // 同步
        input1.onchange = function (e) {
            var file = e.target.files[0];
            var img = new Image();
            img.src = URL.createObjectURL(file)
            document.body.appendChild(img)
        }
		// 异步
        input2.onchange = function (e) {
            var file = e.target.files[0];
            var img = new Image();
            var fileRead = new FileReader();
            document.body.appendChild(img)
            fileRead.onload = function () {
                img.src = fileRead.result
            }
            fileRead.readAsDataURL(file)
        }
    </script>