下载和预览文件 ---使用blob二进制大对象

blob是一个二进制大对象，和数组类似。可以通过new Blob()来创建。第一个参数传入一个数组，第二个参数是配置对象，可以告诉创建的blob对象里的内容是什么类型的。

可以通过blob.text()方法来读取到内容，他返回的是一个promise，所以想要读取内容需要在他的成功的回调里面去读取

        let str = '123'
        let blob = new Blob([str], { type: 'text/plain' })
        blob.text().then((res) => { console.log(res); })

当给a标签指定了downlad属性的时候，如果它的href指向的地址是同源的，那么就会下载指向地址的资源。不是同源的话会跳转。

所谓访问url地址，其实也就是访问资源。而blob就是二进制资源，可以通过h5新增的一个方法URL.createObjectURL(blob) 来将blob资源转成地址，这样就可以做到下载资源了。

<a id="btn">跳转</a>
    <script>
        let html = ` <div>
                        <span>
                            这是html
                        </span>
                    </div>`
        let blob2 = new Blob([html], { type: 'text/html' })
        const btn = document.getElementById('btn')
        btn.onclick = function (e) {
            this.setAttribute('download', '123.html')
            this.href = URL.createObjectURL(blob2)
        }

    </script>

 

下载文件

 <input id="file" type="file">
    <script>
        const file = document.getElementById('file')
        file.onchange = function (e) {
            const file1 = e.target.files[0]
            const a = document.createElement('a')
            a.setAttribute('download', 'myBaidu.html')
            a.href = URL.createObjectURL(file1)
            a.click()
        }
    </script>

图片预览

使用h5新增的FileReader()方法

    <input id="file" type="file">
    <script>
        const file = document.getElementById('file')
        file.onchange = function (e) {
            const file = e.target.files[0]
            const img = new Image()
            const fileRead = new FileReader()
            document.body.appendChild(img)
            fileRead.onload = function () {
                img.src = fileRead.result
            }
            fileRead.readAsDataURL(file)
        }
    </script>