blob对象实现文件的下载

最新推荐文章于 2024-04-29 15:39:31 发布

ZOE^V1

最新推荐文章于 2024-04-29 15:39:31 发布

阅读量479

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_52568554/article/details/123961744

版权

html css 前端 javascript

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

blob对象实现文件的下载

https://developer.mozilla.org/zh-CN/docs/Web/API/Blob

<!DOCTYPE html>
<html>
    <head>
        <script type = "text/javascript" src = "../js/jquery-1.11.0.min.js"></script>
        <title>blob对象实现文件的下载和图片预览</title>
    </head>
    <body>
        <script>
            // Blob定义
            var str = '123'
            var blob = new Blob([str],{type:'text/plain'});
            console.log(blob)
            // Blob {size: 3, type: 'text/plain'}
            console.log(blob.text())
            // Promise 
            // {<pending>}[[Prototype]]: Promise[[PromiseState]]: "fulfilled"[[PromiseResult]]: "123"
                blob.text().then(res =>console.log(res))
                // 123
                blob.text().then(function(res){
                    console.log(res)
                })
                 // 123
        </script>
        <a id="btn">跳转</a>
        <!-- <div>
                <div><p>123</p></div>
        </div> -->
        <script>
            // blob下载文件
            var str = `<div>
                <div><p>123</p></div>
        </div>`
        var blob  = new Blob([str],{type:'text/html'})
        btn.onclick = function(e){
            // 给a标签增加download属性
            this.setAttribute('download','123.html')
            this.href = URL.createObjectURL(blob)
        }
        </script>
        <br />
        <br />
        <br />
        <input type="file" id="input"> 
        <!-- <a></a> -->
        <script>
            // blob上传下载文件
            input.onchange = function(e){
                var file = e.target.files[0]
                console.log(file)
                var a = document.createElement('a')
                // 同源文件
                a.setAttribute('download','01.练习.html')
                a.href = URL.createObjectURL(file)
                a.click()
            }

        </script>
    </body>
</html>

ZOE^V1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
blob对象实现文件的下载

blob对象实现文件的下载https://developer.mozilla.org/zh-CN/docs/Web/API/Blob<!DOCTYPE html><html> <head> <script type = "text/javascript" src = "../js/jquery-1.11.0.min.js"></script> <title>blob对象实现文件的下载和图
复制链接

扫一扫

专栏目录