关于node.js:使用-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，并没有解决带来的问题。明天算是瞎鼓捣了，也胜利了，记录一下吧。