前端 react + js實現 靜態文件下載 流式下載 文件下載的方法和代碼封裝

在現代網頁開發中，提供靜態檔案下載的功能已經成為了一個常見的需求。React作為一個流行的前端框架，可以輕易地結合JavaScript來實現這個功能。本文將介紹如何在React應用程式中實作靜態檔案的流式下載，以及如何封裝一個可重用的下載邏輯。

首先，我們需要了解一些基礎知識，如`fetch()` API和`Blob`物件的使用。`fetch()` API可以用於從伺服器上獲取資料，而`Blob`物件則是一個二進位的大型資料表示，可以用於建立或代表任何類型的檔案。

接下來，我們將分步驟說明如何使用這些技術來實作一個簡單的靜態檔案下載功能。

Step 1: 設定路由和基本結構

在你的React應用程式中，創建一個新的路徑（例如/download）用於處理下載請求。

import React from 'react';
import { Route, Redirect } from 'react-router-dom';

const DownloadPage = () => (
<div>
<h1>Downloads</h1>
<p>This page allows you to download static files.</p>
{/* Your file downloading component would go here */}
<Redirect to="/" />
</div>
);

export default DownloadPage;

Step 2: 撰寫下載檔案組件

現在，我們將創建一個專門負責下載檔案的組件。這可能會包含一個選擇檔案的按鈕，或者直接指向特定檔案的連結。

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function FileDownloadComponent() {
// 使用狀態管理下載進度
const [progress, setProgress] = useState(0);

useEffect(() => {
async function fetchFile() {
try {
const response = await axios.get('/path/to/file', {
responseType: 'blob' // 指定回應為 Blob 格式
});

if (response) {
// 使用 createObjectURL 和 URL.revokeObjectURL 來達成流式下載的效果
const url = window.URL.createObjectURL(new Blob([response.data]));
setProgress(50); // 更新進度條到一半的位置

const a = document.createElement('a');
a.href = url;
a.style.display = 'none';
document.body.appendChild(a);
a.click();

window.URL.revokeObjectURL(url); // 釋放記憶體
}
} catch (error) {
console.log(error);
} finally {
setTimeout(() => {
setProgress(100); // 在完成後更新進度條至100%
}, 3000); // 等待三秒再更新進度條，避免過快導致使用者體驗不佳
}
}

fetchFile();
}, []);

return (
<div className="download-container">
<h2>File Download</h2>
<div className="progress-bar" style={{ width: `${progress}%` }}></div>
</div>
);
}

export default FileDownloadComponent;

在上述代碼中，我們使用了`axios`庫來發送HTTP請求。我們還利用了`Blob`物件和`Window.URL`介面來實現流式下載。當用戶點擊“下載”時，系統會先從伺服器上下載檔案，然後生成一個臨時的URL指向該檔案。最後，我們添加了一個隱藏的下載元素（``標籤）並觸發其Click事件以啟動下載流程。

import axios from 'axios';

const downloadFile = async (url, filename) => {
try {
let resp = null;
resp = await axios({
method: 'GET',
url: url,
responseType: 'blob'
});

saveAs(resp.data, filename);
} catch (err) {
console.error(`Error while trying to download ${filename}`, err);
}
};

export default downloadFile;