2016-09-25 3 views
5

Ich versuche, einen Download von einem POST-Anfrage-Handler in Koa mit koa-router auszulösen. Im Wesentlichen, ich versuche, so etwas zu tun:Laden Sie eine Datei von POST-Anfrage in Koa

app.js

const Koa = require('koa') 
const router = require('./router') 

const app = new Koa() 

app.use(router.routes()) 
app.use(router.allowedMethods()) 

app.listen(3000) 

router.js

const fs = require('fs') 
const Router = require('koa-router') 

const router = new Router() 

router.post('/generate', function *() { 
    const path = `${__dirname}/test.txt` 
    this.body = fs.createReadStream(path) 
    this.set('Content-disposition', 'attachment; filename= test.txt') 
}) 

module.exports = router 

Client.js

const { fetch } = window; 

const request = { 
    method: 'POST', 
    body: JSON.stringify({ fake: 'data' }) 
} 

// Make the POST request 
fetch('/generate', request) 

Wenn die POST-Anforderung gesendet wird, passiert jedoch nichts. Ich bekomme auch keinen Fehler in der Server-Konsole oder der Browser-Konsole. Jede Hilfe wäre willkommen!

+0

Ich denke, Ihr Problem nicht auf serverseitigen Code ist aber clientseitige. Können Sie zeigen, was Sie mit den abgerufenen Daten machen? Fetch funktioniert nicht als Formularübergabe, SIE müssen die Antwort verarbeiten und wenn Sie es herunterladen möchten, tun Sie, was Vedran auf seinem clientseitigen Code getan hat. –

Antwort

4

Sie könnten versuchen, https://github.com/koajs/send

router.post('/generate', function * (next) { 
    yield send(this, 'file.txt'); 
}); 

Und in Client-Seite verwenden, müssen Sie erstellen und Trigger-Download auf Dateiinhalt per Post Anfrage erhält. Setzen Sie diesen Code in Request Callback

+0

Dieser Code scheint nicht für mich zu funktionieren. Haben Sie ein funktionierendes '' '' 'durch ein einfaches Beispiel? – saadq

+0

Ich habe öffentliche github Repo erstellt https://github.com/vedranjukic/downloadkoademo Nur klonen und npm installieren. Führen Sie die App mit dem Knoten app.js aus und öffnen Sie chrome localhost: 3000 und klicken Sie auf den Download-Button, um zu testen. Ich habe versucht, es so einfach wie möglich zu machen. Lass es mich wissen, wenn es für dich funktioniert. –

+0

Wow, ich habe gerade herausgefunden, was das Problem war. Ich hatte "uBlock Origin" als meinen Popup-Blocker installiert, und es sieht so aus, als verhindere es die Downloads. Entschuldige die dumme Frage und danke für die Antwort! – saadq

4

Sie sollten Datei-Stream in den Rumpf und senden Sie Content-Disposition Anhang mit diesem Dateinamen. Verwenden Sie die folgende Code

const Router = require('koa-router'); 
const router = new Router(); 

router.post('/generate', function *() { 
    const path = `${__dirname}/file.txt`; 
    this.body = fs.createReadStream(path); 
    this.set('Content-disposition', 'attachment; filename= file.txt'); 
}); 

module.exports = router; 

UPDATE: Komplette Arbeitscode:

var app = require('koa')(); 
var router = require('koa-router')(); 
const fs = require('fs'); 
router.post('/generate', function() { 
    const path = `${__dirname}/file.txt`; 
    this.body = fs.createReadStream(path); 
    this.set('Content-disposition', 'attachment; filename= file.txt'); 
}); 

app 
    .use(router.routes()) 
    .use(router.allowedMethods()); 

    app.listen(3000); 

Auftraggeber:

<button id="btnDownload">Download</button> 

<script type="text/javascript"> 
    const request = { 
     method: 'POST', 
     body: JSON.stringify({ 
      fake: 'data' 
     }) 
    } 

    document.getElementById('download').onclick =() => { 
     fetch('/generate', request) 
      .then(res => { 
       return res.text() 
      }) 
      .then(content => {}); 
    } 
</script> 
+0

Dies ist im Grunde, was ich versucht habe zu tun, aber es scheint nicht zu funktionieren. Ich habe meinen Beitrag aktualisiert, um meinen vollständigen Code hinzuzufügen. Bitte lassen Sie mich wissen, wenn Sie wissen, worum es sich handelt. – saadq

+0

Grundsätzlich, wenn die POST-Anfrage gesendet wird, geschieht nichts in meinem Browser. Ich dachte, die Datei würde herunterladen? – saadq

+0

@meh_programmer es ist, weil die Schreibweise, die Sie von Anhang verwenden. This.set ('Content-disposition', 'attchment; filename = test.txt'). Ändern Sie "Attachment" zu "Attachment"; :) – Sachin

0

gleiche Funktionalität erreicht werden kann, um einen Tag mit download.I diese bevorzugen. Es funktioniert ohne JS aber nicht in Safari.

<!DOCTYPE html> 
<html> 
<body> 

<p>Click on the w3schools logo to download the image:<p> 

<a href="http://www.w3schools.com/images/myw3schoolsimage.jpg" download> 
    <img border="0" src="http://www.w3schools.com/images/myw3schoolsimage.jpg" alt="W3Schools" width="104" height="142"> 
</a> 

<p><b>Note:</b> The download attribute is not supported in Edge version 12, IE, Safari or Opera version 12 (and earlier).</p> 

</body> 
</html> 

refernce: http://www.w3schools.com/tags/att_a_download.asp