blob对象实现文件的下载和图片预览

最新推荐文章于 2024-05-08 14:21:21 发布

小桥流水人家丶

最新推荐文章于 2024-05-08 14:21:21 发布

阅读量599

点赞数

文章标签： html javascript 前端

本文链接：https://blog.csdn.net/xu568110526/article/details/130291117

版权

<!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>
    前端的blob对象-- 文件的下载*图片的预览
    <a id="btn">跳转</a> <br />

    <input type="file" id="input" />
    <!-- 下载文件 -->
  </body>
</html>
<script>
  // var str = "33332222";
  var str = `<div>
      <div>
        <p>123</p>
      </div>
    </div>`;
  var blob = new Blob([str], {
    // type: "text/plain",
    type: "text/html",
  }); //得到字符串长度size    type:文本类型
  blob.text().then((res) => console.log(2222, res)); //获取文本内容

  //点击下载 123.html 文本
  btn.onclick = function (e) {
    this.setAttribute("download", "123.html");
    this.href = URL.createObjectURL(blob);
  };

  //上传本地保存的html文件---然后下载html文件
  input.onchange = function (e) {
    var file = e.target.files[0];
    // var a = document.createElement("a");
    // a.setAttribute("download", "myBaidu.html");
    // a.href = window.URL.createObjectURL(file);
    // a.click();

    //图片预览
    var img = new Image();
    var fileRead = new FileReader(); //异步需要 new FileReader()
    //同步方式
    // img.src = URL.createObjectURL(file);
    document.body.appendChild(img);

    //异步方式
    fileRead.onload = function () {
      img.src = fileRead.result;
    };
    fileRead.readAsDataURL(file);
  };
</script>