使用视频文件 url

如何解决使用视频文件 url

我正在尝试使用文件保护程序 npm 模块从 azure blob 存储下载视频文件。你可以看到我的代码 here 我做了什么。我想在点击下载按钮时开始下载 blob 视频文件，但文件保护程序首先在内部下载文件，然后在下载后显示另存为窗口，这个过程适用于小文件，但如果文件变大，用户体验不好.请建议使用视频网址从 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);

解决方法

更新

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();
    });
};