在Koa请求处理程序中触发下载
Trigger a download in Koa request handler
我试图从Koa与koa-router
的POST请求处理程序触发下载。基本上,我想做这样的事情:
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)
然而,当发送POST请求时,什么都没有发生。我在服务器控制台或浏览器控制台也没有得到任何错误。任何帮助将不胜感激!
您应该在正文中设置文件流,并将内容处理发送到带有该文件名的附件。使用以下代码
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;
更新:完整的工作代码:
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);
客户:<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>
您可以尝试使用https://github.com/koajs/send
router.post('/generate', function * (next) {
yield send(this, 'file.txt');
});
在客户端,您需要创建并触发通过post请求接收文件内容的下载。将此代码放入请求回调
中fetch('/generate', request)
.then(res => { return res.text() })
.then(content => {
uriContent = "data:application/octet-stream," + encodeURIComponent(content);
newWindow = window.open(uriContent, 'somefile');
});
使用标签下载可以实现相同的功能。我更喜欢这个。它可以在没有JS的情况下工作,但在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
相关文章:
- 将下载链接从web浏览器传递给第三方应用程序
- 下载HTML5/Javascript MOBILE应用程序中的PDF文件
- 如何下载图像并将其显示在NativeScript应用程序中
- Chrome APP/扩展程序从网址下载文件
- 如何在BlueImp jQuery下载程序中过滤要下载的文件
- “无法下载此文件”时尝试在主屏幕Web应用程序中访问ics文件
- 如何在android应用程序中下载图像
- 可下载或在线使用的Css和javascript迷你程序
- 通过拖动接受部分播放列表&下载Spotify应用程序
- 如何使用chrome文件系统api从chrome应用程序中的url下载图像
- 建议facebook好友下载手机应用程序
- 如何在不下载的情况下将谷歌字体加载到chrome打包的应用程序中
- 用于下载 apk 文件的 Web 应用程序
- 通过Chrome扩展程序静默下载
- 下载多张图片,而无需在Chrome扩展程序中询问
- 下载并存储在电子应用程序中的文件
- 为什么YouTube-dl下载链接来自YouTube在meteorjs应用程序中
- 下载文件卡住安卓应用程序:工作灯
- 获取通过chrome扩展程序下载的文件的绝对路径
- JavaScript下载程序