javascript - 使用post请求获取的视频文件流，js如何转成视频文件并下载？

Question

使用post请求获取的视频文件流，js如何转成视频文件并下载，试了很多方法都不行

Answer 1

使用 responseData: 'blob' 这样可以在 ajax 的回调里面就收到 blob，然后用 URL.createObjectURL 转为 bloburl，放在 a 标签用 download 属性触发下载。

但是这个的缺点就是不支持移动端，且不支持后台下载需要页面一直开着

所以一般我们会直接通过 form target 来触发浏览器的默认下载来下载资源。这种方案的缺点是不能携带 headers。所以这里一般会改成临时授权 url 来解决。

这样就能实现一个安全的，支持移动端的，支持后台下载的下载功能。

Answer 2

在JavaScript中，当你通过POST请求获取视频文件流时，你可以使用Blob对象和URL.createObjectURL()方法将文件流转换为视频文件，并使用a标签实现下载。以下是一个简单的示例代码，展示了如何完成这个过程：

// 假设你已经通过POST请求获取了视频文件流，并将其存储在变量response中let response; // 这是一个包含视频文件流的响应对象// 创建一个Blob对象，将视频文件流转换为Bloblet blob = new Blob([response], {type: 'video/mp4'}); // 根据你的视频格式修改MIME类型// 创建一个指向Blob的URLlet url = URL.createObjectURL(blob);// 创建一个a标签用于下载let a = document.createElement('a');a.href = url;a.download = 'video.mp4'; // 设置下载文件的名称a.style.display = 'none'; // 隐藏a标签// 将a标签添加到DOM中document.body.appendChild(a);// 模拟点击a标签以开始下载a.click();// 清理document.body.removeChild(a);URL.revokeObjectURL(url);

这段代码首先创建一个Blob对象，将POST请求获取的视频文件流作为参数传递给它，并指定MIME类型为'video/mp4'（根据你的视频格式进行相应的修改）。然后，它使用URL.createObjectURL()方法创建一个指向Blob的URL。

接下来，代码创建一个隐藏的a标签，并将其href属性设置为Blob的URL。它还设置了download属性，以指定下载文件的名称。然后，将a标签添加到DOM中，并通过模拟点击它来开始下载。

最后，为了清理资源，代码从DOM中移除了a标签，并撤销了之前创建的Blob URL。

请注意，上述代码假设你已经通过POST请求获取了视频文件流，并将其存储在变量response中。你需要根据实际情况调整代码，以便正确获取和处理文件流。此外，还要确保在适当的时机执行此代码，例如在POST请求的回调函数中。