前端下载base64格式视频

前端下载base64格式视频

需求：后台传回base64格式视频，前端下载视频

一、base64转blob

/**
 *  base64 to Blob
 **/
export function base64toBlob(base64Data, contentType = "", sliceSize = 512) {
  const byteCharacters = atob(base64Data);
  const byteArrays = [];
  for (
    let offset = 0; offset < byteCharacters.length; offset += sliceSize
  ) {
    const slice = byteCharacters.slice(offset, offset + sliceSize);
    const byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }
    const byteArray = new Uint8Array(byteNumbers);
    byteArrays.push(byteArray);
  }
  const blob = new Blob(byteArrays, {
    type: contentType
  });
  return blob;
}

二、下载blob视频

/**
 *  下载视频
 **/
export function download(blob, filename) {
  if ("download" in document.createElement("a")) {
    const elink = document.createElement("a");
    elink.download = filename;
    elink.style.display = "none";
    elink.href = URL.createObjectURL(blob);
    document.body.appendChild(elink);
    elink.click();
    URL.revokeObjectURL(elink.href);
    document.body.removeChild(elink);
  } else {
    navigator.msSaveBlob(blob, filename);
  }
}

调用一下就哦可了

    async downloadVideo(cache_key) {
      const res = await api.getAnimation(cache_key);
      let filecontent = res.result.filecontent;
      let filename = res.result.filename;
      const blob = base64toBlob(filecontent);
      download(blob, filename);
      console.log("end 完成下载");