前端获取blob文件格式的两种格式

第一种,后台传递给前台是base64格式的JSON数据

这时候前台拿到base64格式的数据可以通过内置的atob解码方法结合new Uint8Array和new Blob方法转换成blob类型的数据格式,然后可以使用blob数据格式进行操作,虽然base64转换成blob要经过很多步骤,但幸运的是这些步骤都是固定的,因此可以写成一个公共的函数

function base64ToBlob(base64) {
  let decoded = atob(base64);
   return new Blob(
     [new Uint8Array(decoded.split("").map((char) => char.charCodeAt(0)))],
     { type: "application/octet-stream" }
   );
 }

示例:

<script>
  let btn2 = document.querySelector(".btn2");
  btn2.addEventListener("click", function () {
    axios.get("http://127.0.0.1:3001/blob").then((res) => {
      console.log(res.data.data);
      let base64Data = res.data.data;
      let decoded = atob(base64Data);
      let imageBlob = new Blob(
        [new Uint8Array(decoded.split("").map((char) => char.charCodeAt(0)))],
        { type: "application/octet-stream" }
      );
      console.log("imageBlob", imageBlob);
      let url = URL.createObjectURL(imageBlob);
      let img = document.createElement("img");
      img.src = url;
      document.body.appendChild(img);
    });
  });
</script>

第二种,后台传递给前台的直接是二进制数据

注意,这里传递的需要直接是二进制数据才行,不能是JSON数据.

像nodejs中直接将读取到的Excel二进制数据返回,不要返回一个JSON.因为这要跟前台的axios请求进行配合.

fs.readFile(path.resolve(__dirname, "../resource/test.xlsx"), (err, data) => {
    if (err) {
      res.status(500).send(err);
      return;
    } else {
      res.send(data);
    }
  });

前台使用axios的添加一个参数responseType: "blob",这样可以直接拿到一个blob类型的数据.

let btn2 = document.querySelector(".btn2");
btn2.addEventListener("click", function () {
  axios({
    url: "http://127.0.0.1:3001/blob",
    method: "get",
    responseType: "blob",
  }).then((res) => {
    let blob = res.data;
    let url = URL.createObjectURL(blob);
    let img = document.createElement("img");
    img.src = url;
    document.body.appendChild(img);
  });