我正在学习如何使用 React/NodeJS 生成 PDF 的教程。PDF 正在我的文件中生成,但我收到一个标题错误,该错误阻止了 GET 请求的工作。
0] 错误 [ERR_HTTP_HEADERS_SENT]:发送到客户端后无法设置标头
代理工作正常。我猜我没有正确处理 ajax 请求。
节点
const express = require('express');
const router = express.Router();
const { check, validationResult } = require('express-validator/check');
const pdf = require('html-pdf');
const pdfTemplate = require('../../documents');
// PDFs
router.post('/create', [
check('text', 'Text field is required').not().isEmpty()
], (req, res) => {
const errors = validationResult(req);
if (!errors.isEmpty()) {
return res.status(400).json({ errors: errors.array() });
}
const { text } = req.body;
res.json(text);
pdf.create(pdfTemplate(req.body), {}).toFile('result.pdf', (err) => {
if(err) {
return res.send(Promise.reject());
}
return res.send(Promise.resolve());
});
});
router.get('/fetch', (req, res) => {
return res.sendFile(path.resolve('result.pdf'));
});
module.exports = router;
反应
import React, { Component } from 'react';
import axios from 'axios';
import { saveAs } from 'file-saver';
class Form extends Component {
constructor(props) {
super(props);
this.onChange = this.onChange.bind(this);
this.handleForm = this.handleForm.bind(this);
this.state = {
text: ''
}
}
onChange(e) {
this.setState({
[e.target.name]: e.target.value
})
}
handleForm(e) {
e.preventDefault();
const body = this.state;
axios.post('/api/pdfs/create', body)
.then(() => axios.get('/api/pdfs/fetch', { responseType: 'blob' }))
.then((res) => {
const pdfBlob = new Blob([res.data], { type: 'application/pdf' });
saveAs(pdfBlob, 'newPdf.pdf');
})
}
render() {
return (
<form onSubmit={this.handleForm}>
<input type="text" name="text" onChange={this.onChange} />
<button type="submit">Submit</button>
</form>
);
}
}
您不需要在 POST 请求中发出 GET 请求来获取 POST 请求很容易返回的内容。您可以尝试确保服务器中的POST路由返回pdf。
然后你的ajax调用看起来像这样
axios.post('/api/pdfs/create', body)
.then(res => {
const pdfBlob = new Blob([res.data], { type: 'application/pdf' });
saveAs(pdfBlob, 'newPdf.pdf');
})
在您的POST
路线控制器内,您可以执行此操作...
(req, res) => {
const errors = validationResult(req);
if (!errors.isEmpty()) {
return res.status(400).json({ errors: errors.array() });
}
const { text } = req.body;
pdf.create(pdfTemplate(req.body), {}).toFile('result.pdf', (err, result) => {
if(err) {
return res.status(400).send(err);
}
return res.json({
text: text,
result: result // this contains the pdf file that is generated.
});
});
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句