使用 jszip 实现文件打包下载

背景

通过程序自动生成了jsx和css文件，我们需要将它们下载下来拿到别的项目中去使用，单个下载很麻烦，因此我们将这些文件打成zip包，直接解压放到已有项目即可。以前这种下载都是后端同学提供支持，或者给到数据，在前端自己拼接数据生成zip包，这种需求还是第一次做开发。经过一系列的尝试的，最后使用 jszip 来实现。

node server端实现代码

const fs = require('fs');
const path = require('path');
const JSZip = require('jszip');

const jsxPath = path.join(__dirname, '../output/taro.jsx');
const cssPath = path.join(__dirname, '../output/index.less');

router.get('/download', (req, res) => {

    res.setHeader('Content-Type', 'application/zip');

    const zip = new JSZip();
    // 声明一个压缩文件夹
    const folder = zip.folder("code");
    
    // 为文件夹添加文件
    // 如果是需要压缩一个目录下文件夹，那么循环当前这个文件夹，
    // 为文件夹挨个添加文件名以及文件内容
    folder.file('taro.jsx', fs.readFileSync(jsxPath));
    folder.file('index.less', fs.readFileSync(cssPath));
    // 通过 base64 类型生成zip的内容
    zip.generateAsync({type: 'base64'})
        .then(content => {
            res.status(200).send(content);
        });
});

client 端实现

handleDownload = async () => {
    // 与server交互使用封装的 axios
    const { data } = await http('/download');
    const zip = new JSZip();
    // 获取到的数据使用 base64 加载
    await zip.loadAsync(data, { base64: true });
    // 生成blob形式的文件
    const blob = await zip.generateAsync({ type: 'blob' });
    const url = window.URL.createObjectURL(blob);
    // 常规下载操作
    const link = document.createElement('a');
    link.setAttribute('href', url);
    link.setAttribute('download', 'code.zip');
    document.body.appendChild(link);
    link.click();
    link.remove();
}

总结

小小的一个功能，捣鼓了半下午，按照自己原来想法，直接使用node生成zip文件，然后使用res.download(filepath)扔出去，结果下载之后解压，一直提示格式错误，导致耗费了很多时间去解决这个问题，看到有提示使用原生xmlhttprequest，并没有解决带来的问题。今天算是瞎鼓捣了，也成功了，记录一下吧。