背景
通过程序主动生成了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，并没有解决带来的问题。明天算是瞎鼓捣了，也胜利了，记录一下吧。