Фон
Я создаю PDF на экспресс-сервере и сохраняю его в локальном каталоге. В обратном вызове я пытаюсь отправить PDF обратно на сервер, чтобы он загрузился, но он отображается в ответе вкладки сети как то, что выглядит как двоичный файл и не загружается.
Пример
РЕДАКТИРОВАТЬ Функция моего клиента делает запрос к серверу
Этот вызов извлечения достигает конечной точки экспресса, которая должна вернуть PDF. Экспресс маршрут ниже,
function setImage() {
html2canvas(document.querySelector('#chart')).then(canvas => {
canvas.toBlob(
function(blob) {
const url = 'http://localhost:3000/api/v1/pdf';
fetch(url, {
method: 'POST',
headers: {
'Content-type': 'application/octet-stream',
},
body: blob,
})
.then(response => response.json())
.then(success => console.log(success))
.catch(error => console.log(error));
},
'image/png',
1,
);
document.body.appendChild(canvas);
});
}
// Создает PDF и сохраняет его на сервере в filePath
router.post('/', (req, res, next) => {
pdf.create(html, options).toFile(filePath, err => {
if (err) {
return console.log(err);
}
const stat = fs.statSync('./downloads/report.pdf');
res.contentType('application/pdf');
res.setHeader('Content-Length', stat.size);
res.setHeader('Content-Type', 'application/pdf');
res.setHeader('Content-Disposition', 'attachment; filename=report.pdf');
// *Should force download the file to the browser*
res.download('../downloads/report.pdf', 'report.pdf', function(e) {
if (e) {
// Handle error, but keep in mind the response may be partially-sent
// so check res.headersSent
} else {
// It worked, do something else.
}
});
});
});
РЕДАКТИРОВАТЬ Я также пробовал это на сервере, он показывает ответ в браузере, но не загружает файл.
router.post('/', (req, res, next) => {
const img = req.body;
const filepath = 'uploads/chart.png';
fs.writeFile(filepath, img, err => {
if (err) {
throw err;
}
console.log('The file was succesfully saved!');
});
const html = tmpl.replace('{{chart}}', `file://${require.resolve('../uploads/chart.png')}`);
const options = { format: 'Letter' };
const fileName = 'report.pdf';
const filePath = './downloads/report.pdf';
pdf.create(html, options).toFile(filePath, err => {
if (err) {
return console.log(err);
}
const stat = fs.statSync('./downloads/report.pdf');
res.setHeader('Content-Description', 'File Transfer');
res.setHeader('Content-Length', stat.size);
res.setHeader('Content-type', 'application/octet-stream');
res.setHeader('Content-type', 'application/pdf');
res.setHeader('Content-Type', 'application/force-download');
res.setHeader('Content-disposition', 'attachment;filename=report.pdf');
res.sendFile('/downloads/report.pdf');
});
Пример вывода в браузер
Вопрос
Как правильно в Express 4 заставить браузер загружать PDF?