如何使用快速服务器将 zip 文件从后端发送到前端

Question

我正在构建一个应用程序，需要将数据保存到单独的位置并将这些文件压缩到 zip 文件中。 这些文件在后端，我无法将这个后端创建的 zip 文件发送到前端，这在这种情况下是有反应的

表达js代码

app.post("/download",function(request,response,next){
    let sheets=request.body["sheets"];
    let charts=request.body["charts"];
    let compressedSheets=LZString.compress(JSON.stringify(sheets));

    fs.writeFile(__dirname+'/public/dataModel.txt', compressedSheets, function (err) {
        if (err) throw err;
        console.log('Replaced!');

      },()=>{
        fs.writeFile(__dirname+'/public/Report.json',charts,function(err){
            if(err){
                console.log(err);
            }
        },()=>{
            var archiver = require('archiver');
            var output = fs.createWriteStream(__dirname+'/public/example.zip');
            var archive = archiver('zip', {
                gzip: true,
                zlib: { level: 9 } // Sets the compression level.
            });

            archive.on('error', function(err) {
            throw err;
            });
            archive.pipe(output);
            archive.file(__dirname+'/public/dataModel.txt', {name: 'dataModel.txt'});
            archive.file(__dirname+'/public/Report.json', {name: 'Report.json'});


            archive.finalize().then(()=>{
                response.setHeader('Content-disposition', 'attachment; filename=example.zip');
                response.download(__dirname+'/public/example.zip');
            });

        })
      });

反应代码

handleSaveAs=function(){


    let data=new FormData();
    data.append('sheets',JSON.stringify(this.state.sheets));
    data.append('charts',JSON.stringify(this.state.charts));


    axios
    .post("http://localhost:4001/download",data)
    .then(res=>{
      console.log(res);
      const element = document.createElement("a");
      const file = new Blob([res.data], {type: 'application/zip'});
      element.href = URL.createObjectURL(file);
      element.download = "untitled.zip";
      document.body.appendChild(element);
      element.click();
    })

前提是所有导入都得到妥善处理，并且在后端正确创建了 zip 文件。 问题仅在于将其发送到前端

任何帮助将不胜感激谢谢

Answer 1

您可以使用 Node.js 的内置fs到 stream 的数据到前端。

//Filestream middleware that takes in the file path as the parameter

const streamW = (pathToZip) => {
 return (req, res, next) => {

//Create a readable stream
const readableStream = fs.createReadStream(pathToZip, 'the_encoding_here');

//Pipe it into the HTTP response
readableStream.pipe(res)

  next();

}};

//The route that you want to hit using the front-end to get the file
//Call the middleware and pass in the path to the zip
router.get('/downloadRoute', streamW('path_to_zip'), (req, res) => {

     //Send the data to the front end by calling res
     res

// });

Answer 2

这个你在node.js下载路径中做

     archive.finalize().then(()=>{
  let filetext = fs.readFileSync(__dirname+'/public/example.zip');

  return res.end(new Buffer(filetext ).toString('base64'));
});

在前端做这样的事情

handleSaveAs=函数(){

let data=new FormData();
data.append('sheets',JSON.stringify(this.state.sheets));
data.append('charts',JSON.stringify(this.state.charts));


axios
.post("http://localhost:4001/download",data)
.then(res=>{
  console.log(res);
  let elem = window.document.createElement('a');
    elem.href = "data:application/zip;base64,"+res;
    elem.download = "my.zip";        
    document.body.appendChild(elem);
    elem.click();        
    document.body.removeChild(elem);
})