前端的二进制
- 文件类型 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>
