文件的下载与图片的预览

文件的下载

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>