Wix Velo多文件Zip下载功能失效，求技术解决方案

针对你在Wix Velo中开发多文件Zip下载时遇到的代码无法运行问题，结合Velo环境特性，以下是具体排查和修复方案：

核心问题分析 #

1. 第三方库兼容性：axios在Velo环境可能存在跨域或适配问题，更推荐使用原生fetch API；file-saver可替换为浏览器原生下载逻辑，避免依赖兼容问题。
2. Zip实例复用问题：原代码中zip实例在页面加载时创建，多次点击按钮会重复添加相同文件，导致Zip包异常。
3. CORS限制：如果目标文件URL的服务器未配置跨域允许头，请求会被浏览器拦截，需确认资源的跨域权限。

修复后的代码 #

import JSZip from 'jszip';

$w.onReady(function () {
    const fileArr = [
        {
            name: "file1.png",
            url: "https://logos-download.com/wp-content/uploads/2016/05/Wix_com_logo_black.png",
        },
        {
            name: "file2.png",
            url: "https://logos-download.com/wp-content/uploads/2016/05/Wix_com_logo_black.png",
        },
        {
            name: "file3.png",
            url: "https://logos-download.com/wp-content/uploads/2016/05/Wix_com_logo_black.png",
        },
    ];

    // 单个文件下载逻辑，用fetch替代axios
    const downloadFile = async (item) => {
        const response = await fetch(item.url, {
            method: 'GET',
            mode: 'cors',
        });
        if (!response.ok) throw new Error(`Failed to fetch ${item.url}`);
        const blob = await response.blob();
        return { name: item.name, blob };
    };

    // 批量下载并生成Zip
    const downloadAll = async () => {
        try {
            // 每次点击重新创建Zip实例，避免重复添加文件
            const zip = new JSZip();
            // 并行下载所有文件
            const fileBlobs = await Promise.all(fileArr.map(item => downloadFile(item)));
            // 将文件添加到Zip
            fileBlobs.forEach(file => {
                zip.file(file.name, file.blob);
            });
            // 生成Zip Blob
            const zipBlob = await zip.generateAsync({ type: "blob" });
            // 原生方式触发下载，替代file-saver
            const url = window.URL.createObjectURL(zipBlob);
            const a = document.createElement('a');
            a.href = url;
            a.download = "hello.zip";
            document.body.appendChild(a);
            a.click();
            // 清理资源
            window.URL.revokeObjectURL(url);
            document.body.removeChild(a);
        } catch (err) {
            console.error('下载失败:', err);
        }
    };

    $w('#downloadBtn').onClick(() => {
        downloadAll();
    });
});

额外注意事项 #

• CORS问题处理：如果目标文件URL的服务器拒绝跨域请求，需通过Wix后端函数代理请求，将后端作为中间层获取文件资源再返回给前端。示例后端函数（backend/zip-proxy.jsw）：

import {fetch} from 'wix-fetch';

export async function getFileBlob(url) {
    const response = await fetch(url);
    const arrayBuffer = await response.arrayBuffer();
    return arrayBuffer;
}

前端调用时替换downloadFile函数：

import { getFileBlob } from 'backend/zip-proxy';

const downloadFile = async (item) => {
    const arrayBuffer = await getFileBlob(item.url);
    const blob = new Blob([arrayBuffer]);
    return { name: item.name, blob };
};

• 依赖安装确认：确保已通过Velo的Package Manager正确安装jszip，无需再安装axios和file-saver。

内容的提问来源于stack exchange，提问作者Coder