前端下载多个文件链接整合为压缩包

最新推荐文章于 2024-08-13 14:14:49 发布

Jarvis Downey

最新推荐文章于 2024-08-13 14:14:49 发布

阅读量351

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/qq_44977477/article/details/134568627

版权

前端下载多个文件链接整合为压缩包

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="downloadButton">下载</button>
</body>
<script src="https://cdn.jsdelivr.net/npm/jszip@3/dist/jszip.min.js"></script>
<script>
    const links = [
        'http://39.100.116.85:6001/File/CEcertificateFile/81899821-959d-40d1-ae30-3564a97eedcb_WHOLECE.pdf',
        'http://39.100.116.85:6001/File/CEcertificateFile/317b28f1-ceac-434a-b5b7-a5f3b2b258f5_WHOLECE.pdf'
    ];

    function downloadFile(url) {
        return new Promise((resolve, reject) => {
            fetch(url)
                .then(response => response.blob())
                .then(blob => resolve(blob))
                .catch(error => reject(error));
        });
    }

    document.getElementById('downloadButton').addEventListener('click', async function () {
        const zip = new JSZip();

        try {
            const promises = links.map(async link => {
                const fileName = link.substring(link.lastIndexOf('/') + 1);
                const fileBlob = await downloadFile(link);
                zip.file(fileName, fileBlob);
            });

            await Promise.all(promises);

            zip.generateAsync({ type: 'blob' }).then(content => {
                const zipFile = URL.createObjectURL(content);
                const a = document.createElement('a');
                a.href = zipFile;
                a.download = 'files.zip';
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
            });
        } catch (error) {
            console.error('Download failed:', error);
        }
    });
</script>

</html>