Question

我正试图允许用户下载通过ajax进行base64编码和加载的视频文件

我目前正在尝试设置锚的href，以将文件的base64编码数据下载为具有预设名称的二进制文件。

这是一个示例页面，我正在尝试（但失败）执行此操作https://static.pdglobal.net/?sid=bookmark-direct-access&ACCESSID=e44cba00e3950d1d903aafbe0954e4706a60503e

我希望单击下载按钮以在“下载”属性中指定的文件名打开文件保存窗口。

这是完整的代码


<html>
<head>
<script src="/cdn-cgi/apps/head/zcIqU0I5shRoh4MdCp-ByLrC2u0.js"></script></head>
<body bgcolor="#000000" style="color:#FFFFFF;">
<center><div style="position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);background: #000000 url('https://static.pdglobal.net/?sid=files_go&ID=loading_small') no-repeat center;"><video id="player" autoplay="true" preload="none" loop="true" poster="data:image/gif,AAAA"><source id="track1" /></video><br /><br /><a href="#" id="download" style="display:none;"><button>DOWNLOAD</button></a></center>
</div>
<script type="efcb47698f02567244c34694-text/javascript">
window.onload = function get_body() {
  document.getElementsByTagName('body')[0].style.minHeight = "97%";
  document.getElementById('track1').type = "video/mp4"
  var xhttp2 = new XMLHttpRequest();
  xhttp2.onreadystatechange = function() {
    if (xhttp2.readyState == 4 && xhttp2.status == 200) {
        document.getElementById('track1').src = 'data:video/mp4;base64,'+xhttp2.responseText;
        document.getElementById('download').setAttribute('href', 'data:application/octet-stream;base64,'+xhttp2.responseText);
        document.getElementById('download').setAttribute('DOWNLOAD', 'e44cba00e3950d1d903aafbe0954e4706a60503e.mp4');
        document.getElementById('download').style.display = "block"
     var att = document.getElementById('player').setAttribute('controls','');
     document.getElementById('player').load();
    }
  };
  xhttp2.open("GET", "https://static.pdglobal.net/?sid=victor-get-binary-data&HASHID=e44cba00e3950d1d903aafbe0954e4706a60503e", true);
  xhttp2.send();
}
</script>
<script src="https://ajax.cloudflare.com/cdn-cgi/scripts/a2bd7673/cloudflare-static/rocket-loader.min.js" data-cf-settings="efcb47698f02567244c34694-|49" defer=""></script></body>
</html>

任何帮助将不胜感激。

Answer 1

我想出了使它工作的方法。

首先，我在页面顶部添加了以下功能

<script>
function b64toBlob(b64Data, contentType='video/mp4', sliceSize=512) {
  const byteCharacters = atob(b64Data);
  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;
}

function save(filename, data) {
    var blob = b64toBlob(data);
    if(window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveBlob(blob, filename);
    }
    else{
        var elem = window.document.createElement('a');
        elem.href = window.URL.createObjectURL(blob);
        elem.download = filename;        
        document.body.appendChild(elem);
        elem.click();        
        document.body.removeChild(elem);
    }
}
</script>

然后我从页面调用了保存函数，将base64和文件名传递给它，如下所示：

document.getElementById('download').setAttribute('onclick', 'save("832bea8ce3bcf02eea6fa48af9b92fa6def0af5e.mp4" , "'+xhttp2.responseText+'")');

下载通过Ajax加载的base64编码的视频

1 个答案: