使用视频文件 url 从 azure blob 存储下载视频文件时遇到问题

Question

我正在尝试使用文件保护程序 npm 模块从 azure blob 存储下载视频文件。你可以看到我的代码here 我做了什么。我想在单击下载按钮时开始下载 blob 视频文件，但文件保护程序首先在内部下载文件，然后在下载后显示另存为窗口，此过程适用于小文件，但如果文件大小过大，对用户来说体验不佳.请建议使用视频 url 从 blob 下载视频文件。

import ReactDOM from "react-dom";
import { saveAs } from "file-saver";

import "./styles.css";

const onDownload = async () => {
  console.log("download start");
  let blob = "media-url"
      saveAs(blob, "video.mp4");
};

function App() {
  return (
    <div className="App">
      <button onClick={onDownload}>Download</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

更新

vijay kasar 的评论非常正确，我会更新我的答案。

下载过程通过onDownloadProgress方法进行，下载完成后回调使用响应进行数据处理。 file-saver 中的 saveAs 函数看起来像一个内部下载操作。 It is better to support the callback method。有兴趣的也可以查看官方文档。因为不知道file-saver，所以推荐使用axios。

axios({
    url: 'MediaUrl',
    responseType:'blob',
    onDownloadProgress(progressEvent) {
        progress = Math.round((progressEvent.loaded / progressEvent.total) * 100);

        setPercentage(progress);

        documentStyles.setProperty('--progress', `${progress}%`);
    }
}).then(response => {
        setProgress('finished');
        const downloadUrl = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = downloadUrl;
        link.setAttribute('download', 'video.mp4'); //any other extension
        document.body.appendChild(link);
        link.click();
        link.remove();
});

建议使用axios下载，使用onDownloadProgress增加下载用户体验。

相关博客：
How to Make a Download Progress Indicator in React

您可以根据博客中的示例代码download my modified test code参考。

测试效果图（.gif）和代码：

const download = () => {
    const documentStyles = document.documentElement.style;
    let progress = 0;

    setProgress('in-progress');

    axios({
        url: 'MediaUrl',
        onDownloadProgress(progressEvent) {
            progress = Math.round((progressEvent.loaded / progressEvent.total) * 100);

            setPercentage(progress);

            documentStyles.setProperty('--progress', `${progress}%`);
        }
    }).then(response => {
        setProgress('finished');
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', 'video.mp4'); //or any other extension
        document.body.appendChild(link);
        link.click();
    });
};