初识Blob对象

最新推荐文章于 2024-01-12 11:58:01 发布

五花漏

最新推荐文章于 2024-01-12 11:58:01 发布

阅读量384

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 json

本文链接：https://blog.csdn.net/qq_37024887/article/details/122129111

版权

JavaScript 专栏收录该内容

30 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生成文件（JSON、JS、HTML）+ 下载图片</title>
</head>
<style>
    .div {
        width: 30vw;
        text-align: center;
        margin: 3rem auto;
    }

    .div button {
        height: 30px;
        margin: 1rem;
    }
</style>
<div class="div">
    <h3>通过几个例子了解一下Blob对象</h3>
    <button onclick="createFile('json')">生成JSON</button>
    <button onclick="createFile('js')">生成JS</button>
    <button onclick="createFile('html')">生成HTML</button>
    <button onclick="createImg()">下载图片</button>
</div>

<body>
    <script>
        function createFile(type) {
            if (type == 'json') {
                downloadFileByBlob(blobUrl, 'config.json')
            } else if (type == 'js') {
                downloadFileByBlob(blobUrl2, 'config.js')
            } else if (type == 'html') {
                downloadFileByBlob(blobUrl3, 'config.html')
            }
        }

        // JSON
        const config = {
            name: 'admin',
            password: '123456',
            ak: 'XXXXXXXXXX',
            sk: 'XXXXXXXXXX'
        }
        const blobContent = new Blob(
            [JSON.stringify(config, null, 2)],
            { type: 'application/json' }
        );
        const blobUrl = window.URL.createObjectURL(blobContent)
        // 使用 Blob 创建一个指向类型化数组的URL
        // 会产生一个类似 blob:d3958f5c-0777-0845-9dcf-2cb28783acaf 这样的URL字符串
        // 你可以像使用普通 URL 那样使用它，比如用在 img.src 上。

        // JS
        const jsStr = `const jsStr = {
            name: 'lsqy',
            password: 'yourpassword',
            ak: 'XXXXXXXXXX',
            sk: 'XXXXXXXXXX'
        }`
        const blobContent2 = new Blob(
            [jsStr],
            {
                type: 'application/javascript',
                endings: 'native'
            }
        );
        const blobUrl2 = window.URL.createObjectURL(blobContent2)

        // HTML
        const aFileParts = ['<a id="a"><b id="b">hello,world!</b></a>']; // 一个包含DOMString的数组
        const blobContent3 = new Blob(aFileParts, { type: 'text/html' }); // 得到 blob
        const blobUrl3 = window.URL.createObjectURL(blobContent3)

        function downloadFileByBlob(blobUrl, filename) {
            const eleLink = document.createElement('a')
            eleLink.download = filename
            eleLink.style.display = 'none'
            eleLink.href = blobUrl
            // 触发点击
            document.body.appendChild(eleLink)
            eleLink.click()
            // 然后移除
            document.body.removeChild(eleLink)
        }

        // 生成图片
        function createImg() {
            var url = 'https://img-blog.csdnimg.cn/534762daa9654b61a89b341a7a82e123.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LqU6Iqx5ryP,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center'
            var fileName = new Date().valueOf()
            const url2 = url.replace(/\\/g, '/')
            const xhr = new XMLHttpRequest()
            xhr.open('GET', url2, true)
            xhr.responseType = 'blob'
            xhr.onload = () => {
                if (xhr.status === 200) {
                    var blob = xhr.response
                    const urlObject = window.URL || window.webkitURL || window
                    const export_blob = new Blob([blob])
                    //createElementNS() 方法可创建带有指定命名空间的元素节点。此方法可返回一个 Element 对象。
                    const save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a')
                    save_link.href = urlObject.createObjectURL(export_blob);
                    let type = blob.type.split('/')[1] || ''
                    save_link.download = fileName + '.' + type
                    save_link.click()
                }
            }
            xhr.send()
        }

        // 一种从Blob中读取内容的方法是使用 FileReader。以下代码将 Blob 的内容作为类型数组读取：
        // var reader = new FileReader();
        // reader.addEventListener("loadend", function () {
        //     // reader.result 包含被转化为类型数组 typed array 的 blob
        // });
        // reader.readAsArrayBuffer(blob);

        // 另一种读取Blob中内容的方式是使用Response对象。下述代码将Blob中的内容读取为文本：
        // var text = await (new Response(blob)).text();
    </script>
</body>
</html>

在这里插入图片描述

在这里插入图片描述
常用类型：
{ type: ‘application/json’ }
{ type: ‘text/javascript’ }
{ type: ‘text/plain’ }
{ type: ‘image/png’ }
{ type: ‘video/mp4’ }
{ type: ‘blob.type’ }

在这里插入图片描述

参考文档

Blob对象

URL.createObjectURL()

五花漏

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识Blob对象

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>生成
复制链接

扫一扫