Sauvegarder une image de readStream de Node avec le client Javascript

Question

J'ai lutté avec celui-ci pendant un moment maintenant, et ai besoin de votre aide les gars! J'essaie de rationaliser le processus de téléchargement d'un rapport de mon site Web. Avec ce nœud est assez simple avec un ReadStream, comme ceci:

router.post('/report', (req, res) => { 
    const filename = 'test.png'; 
    const filePath = path.join(__dirname, filename); 
    fs.exists(filePath, exists => { 
     if (exists) { 
      const stat = fs.statSync(filePath); 
      res.writeHead(200, { 
       'Content-Type': 'image/png', 
       'Content-Length': stat.size, 
       'Content-Disposition': 'attachment; filename=' + filename, 
      }); 
      fs.createReadStream(filePath).pipe(res); 
     } else { 
      res.writeHead(400, { 'Content-Type': 'text/plain' }); 
      res.end('ERROR File does NOT Exists'); 
     } 
    }); 
}); 

Maintenant, si j'essayer avec Postman ou d'un autre appareil de contrôle de l'API, il fonctionne parfaitement, le fichier est téléchargé et enregistré correctement. Maintenant, j'ai du mal à faire en sorte que cela fonctionne pour mon interface. Je cours actuellement AngularJS et ai essayé d'employer FileSaver.js comme manière de prendre ces données et de l'enregistrer, cependant cela ne fonctionne jamais. Le fichier est sauvegardé, mais les données sont illisibles, c'est-à-dire que le visualiseur d'image dit que l'image est cassée. Je pense que je crée le blob incorrectement?

function exportReport(_id) { 
    this.$http 
     .post(
      '/api/report', 
      { _id }, 
      { 
       headers: { 
        'Content-type': 'application/json', 
        Accept: 'image/png', 
       }, 
      } 
     ) 
     .then(data => { 
      console.log(data); 
      const blob = new Blob([data], { 
       type: 'image/png', 
      }); 
      this.FileSaver.saveAs(blob, 'testing.png'); 
     }); 
} 

Le résultat du journal de la console est comme ceci:

Object {data: "�PNG 
↵↵ 
IHDRRX��iCCPICC Profi…g�x @� @������Z��IEND�B`�", status: 200, config: Object, statusText: "OK", headers: function} 

Suis-je suppose que pour décoder le object.data?

Answer 1

Essayez d'ajouter responseType: 'blob' à la demande sans indiquer la création d'une nouvelle blob:

function exportReport(_id) { 
    this.$http 
     .post(
      '/api/report', 
      { _id }, 
      { 
       headers: { 
        'Content-type': 'application/json', 
        Accept: 'image/png', 
       }, 
       responseType: 'blob' 
      } 
     ) 
     .then(data => { 
      console.log(data); 
      this.FileSaver.saveAs(data.data, 'testing.png'); 
     }); 
}