js怎么获取浏览器下载进度

获取浏览器下载进度的方法主要有：使用XHR（XMLHttpRequest）对象、Fetch API配合ReadableStream、以及第三方库。 这些方法允许开发者在前端代码中实时监控和控制下载进度。

使用XHR对象获取下载进度

XHR对象是一个较为传统的方法，但依然非常有效。通过监听progress事件，可以获取下载的进度信息。

function downloadFile(url) {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'blob';
    xhr.onprogress = function (event) {
        if (event.lengthComputable) {
            const percentComplete = (event.loaded / event.total) * 100;
            console.log(`Download progress: ${percentComplete.toFixed(2)}%`);
        }
    };
    xhr.onload = function () {
        if (xhr.status === 200) {
            console.log('Download complete');
            const blob = xhr.response;
            const link = document.createElement('a');
            link.href = window.URL.createObjectURL(blob);
            link.download = 'filename.extension';
            link.click();
        }
    };
    xhr.send();
}

使用Fetch API和ReadableStream

Fetch API是现代浏览器中广泛支持的功能，结合ReadableStream，可以实现更细粒度的控制和更优雅的代码结构。

async function downloadWithFetch(url) {
    const response = await fetch(url);
    const reader = response.body.getReader();
    const contentLength = +response.headers.get('Content-Length');
    let receivedLength = 0;
    const chunks = [];
    while (true) {
        const { done, value } = await reader.read();
        if (done) {
            break;
        }
        chunks.push(value);
        receivedLength += value.length;
        console.log(`Received ${receivedLength} of ${contentLength}`);
    }
    const blob = new Blob(chunks);
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = 'filename.extension';
    link.click();
}

使用第三方库

有一些第三方库可以简化这一过程，比如Axios。Axios虽然主要用于HTTP请求，但也可以用于监控下载进度。

function downloadWithAxios(url) {
    axios({
        url: url,
        method: 'GET',
        responseType: 'blob',
        onDownloadProgress: function (progressEvent) {
            const percentComplete = (progressEvent.loaded / progressEvent.total) * 100;
            console.log(`Download progress: ${percentComplete.toFixed(2)}%`);
        }
    }).then((response) => {
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', 'filename.extension');
        document.body.appendChild(link);
        link.click();
    });
}

实际应用中的注意事项

一、处理跨域问题

在实际应用中，跨域问题是常见的障碍之一。确保服务器端设置了正确的CORS（跨域资源共享）头。

Access-Control-Allow-Origin: *

二、显示友好的进度条

在用户界面上显示下载进度时，使用进度条可以提升用户体验。以下是一个简单的示例：

<progress id="progressBar" value="0" max="100"></progress>

const progressBar = document.getElementById('progressBar');
function downloadFileWithProgress(url) {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'blob';
    xhr.onprogress = function (event) {
        if (event.lengthComputable) {
            const percentComplete = (event.loaded / event.total) * 100;
            progressBar.value = percentComplete;
        }
    };
    xhr.onload = function () {
        if (xhr.status === 200) {
            const blob = xhr.response;
            const link = document.createElement('a');
            link.href = window.URL.createObjectURL(blob);
            link.download = 'filename.extension';
            link.click();
        }
    };
    xhr.send();
}

三、错误处理

无论使用哪种方法，都应该考虑到错误处理，以便在下载失败时给出用户友好的提示。

xhr.onerror = function () {
    console.error('Download failed');
    alert('Failed to download the file. Please try again.');
};

response.catch((error) => {
    console.error('Download failed', error);
    alert('Failed to download the file. Please try again.');
});

总结

通过使用XHR对象、Fetch API配合ReadableStream、以及第三方库，可以在JavaScript中获取浏览器下载进度。在实际应用中，处理跨域问题、显示友好的进度条以及进行错误处理是非常重要的步骤。选择合适的技术和方法可以极大地提升用户体验和应用的稳定性。