二进制文件下载html//前端的二进制文件类型Blob 二进制文件类型 //input type file file

<!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>Document</title>
</head>
<body>
    <input type="file" id="file">
    <script>
        //前端的二进制 文件类型Blob 二进制文件类型
        //input type file file 类型 =》 继承 Blob

        //前端下载功能

        // let str = `<div>hello<span>world</span></div>`
        //包装成文件类型 包装后的文件不能直接修改
        // const bolb = new Blob([str],{
        //     type:'text/html'
        // })
        // const a = document.createElement(`a`)

        // a.setAttribute(`download`,`index.html`)
        // a.href = URL.createObjectURL(bolb)
        // a.click()
        //前端实现下载，将字符串包装成二进制

        //前端实现预览功能 读取二进制中的内容 fileReader
        // file.addEventListener('change',(e) => {
        //     let file = e.target.files[0] //这个是二进制类型

        //     let fileReader = new FileReader()//创建一个文件读取的对象
            
        //     fileReader.readAsDataURL(file)//读取的文件转为url base64编码
        //     //监听fileReader的load事件
        //     fileReader.onload = function() {
        //         let img = document.createElement('img')
        //         img.src = fileReader.result //将读取的结果复制给图片的src
        //         document.body.appendChild(img)
        //     }
        // })

        //可以直接用URL.createObjectURL 常用
        // file.addEventListenter('change',(e)=>{
        //     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)//取消链接的效果
        // })

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