42 # 前端 blob 类型

news2024/12/23 9:56:16

前端的二进制

文件类型 Blob：二进制文件类型
input 的 type=file：file 类型，继承于 Blob

前端实现下载功能

实现下载字符串到文件里，需要将字符串包装成二进制类型

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>前端实现下载功能</title>
    </head>
    <body>
        <script>
            let str = "<div><h1>凯小默的博客</h1><span>专注前端领域开发</span></div>";
            // 包装后的文件类型不能直接修改
            const blob = new Blob([str], {
                type: "text/html"
            });
            const a = document.createElement("a");
            a.setAttribute("download", "index.html");
            a.href = URL.createObjectURL(blob);
            a.click();
        </script>
    </body>
</html>

在这里插入图片描述

前端实现预览功能

读取二进制中的内容

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>前端实现预览功能</title>
    </head>
    <body>
        <input type="file" id="file" />
        <script>
            file.addEventListener("change", (e) => {
                console.log(e.target.files);
                // 二进制文件类型
                let file = e.target.files[0];

                // 方式一：同步读取
                let img = document.createElement("img");
                let url = URL.createObjectURL(file);
                img.src = url;
                document.body.appendChild(img);
                // 销毁使用
                // URL.revokeObjectURL(url);

                // 方式二：异步读取内容
                let fileReader = new FileReader();
                fileReader.onload = function () {
                    console.log(fileReader.result);
                    let img = document.createElement("img");
                    img.src = fileReader.result;
                    document.body.appendChild(img);
                };
                fileReader.readAsDataURL(file);
            });
        </script>
    </body>
</html>