В моем проекте я хочу, чтобы пользователь мог загружать документ, когда он нажимает на кнопку.
Структура проекта:
публичный / client.js
console.log('Client-side code running');
const button = document.getElementById('myButton');
button.addEventListener('click', function(e) {
console.log('button was clicked');
fetch('/clicked', {method: 'POST'})
.then(function(response) {
if(response.ok) {
console.log('Click was recorded');
return;
}
throw new Error('Request failed.');
})
.catch(function(error) {
console.log(error);
});
});
публичный / index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Report Generation</title>
</head>
<body>
<h1>Download your document!</h1>
<button id="myButton">Click me!</button>
</body>
<script src="client.js"></script>
</html>
server.js
console.log('Server-side code running');
const express = require('express');
const createDocumentService =
const app = express();
// serve files from the public directory
app.use(express.static('public'));
// start the express web server listening on 8080
app.listen(8081, () => {
console.log('listening on 8080');
});
// serve the homepage
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
app.get('/download', function(req, res){
setTimeout(() => {
res.download(path.join(__dirname, 'docs/doc1.txt'), function (err) {
console.log(err);
});
}, 500)
});
app.post('/clicked', (req, res) => {
const click = {clickTime: new Date()};
console.log(click);
setTimeout(() => {
res.download(path.join(__dirname, 'docs/doc1.txt'), function (err) {
console.log(err);
});
}, 500)
});
После запуска приложения и нажатия кнопки:
Когда пользователь нажимает кнопку, он должен увидеть загружаемый файл отчета благодаря:
В client.js
button.addEventListener('click', function(e) {
console.log('button was clicked');
fetch('/clicked', {method: 'POST'})
.then(function(response) {
if(response.ok) {
console.log('Click was recorded');
return;
}
throw new Error('Request failed.');
})
.catch(function(error) {
console.log(error);
});
});
В service.js:
app.post('/clicked', (req, res) => {
const click = {clickTime: new Date()};
console.log(click);
setTimeout(() => {
res.download(path.join(__dirname, 'docs/doc1.txt'), function (err) {
console.log(err);
});
}, 500)
});
Но документ не загружается.
Тем не менее, когда я подключаюсь к
локальный: 5353 / скачать
Тот же код / логика, которую я написал для загрузки документа и которая написана внутри кнопки POST route, отлично работает, и документ действительно загружается.
Поэтому я не понимаю, почему один и тот же код работает для одного «нормального» маршрута и не работает для другого маршрута, который зависит от кнопки.
Спасибо!