Javascript 如何将表单以PDF格式发送到电子邮件（nodeEmailer、React、Node.js）
有一种反应形式。我想要达到的目标是：填写表格。我点击提交按钮。然后，此表单应生成一个PDF，并通过NodeEmailer作为附件发送。我已经实现了发送电子邮件和生成PDF（可以下载），但我不知道如何将PDF附加到电子邮件中。还有一个签名，我已经可以附加到PDF了。我只想把这个PDF作为附件发送到电子邮件中。现在当我提交时，它只为我下载PDF（这很好），只发送一封简单的电子邮件（没有PDF附件） 服务器：Javascript 如何将表单以PDF格式发送到电子邮件（nodeEmailer、React、Node.js）,javascript,node.js,reactjs,axios,nodemailer,Javascript,Node.js,Reactjs,Axios,Nodemailer,有一种反应形式。我想要达到的目标是：填写表格。我点击提交按钮。然后，此表单应生成一个PDF，并通过NodeEmailer作为附件发送。我已经实现了发送电子邮件和生成PDF（可以下载），但我不知道如何将PDF附加到电子邮件中。还有一个签名，我已经可以附加到PDF了。我只想把这个PDF作为附件发送到电子邮件中。现在当我提交时，它只为我下载PDF（这很好），只发送一封简单的电子邮件（没有PDF附件） 服务器： app.post('/create-pdf', (req, res) => {
app.post('/create-pdf', (req, res) => {
pdf.create(pdfTemplate(req.body), {}).toFile('result.pdf', (err) => {
if (err) {
res.send(Promise.reject());
}
res.send(Promise.resolve());
});
});
app.post('/api/contact', contact);
app.get('/fetch-pdf', (req, res) => {
res.sendFile(`${__dirname}/result.pdf`);
});
exports.contact = async (req, res) => {
const htmlEmail = `
<h1>Hello!</h1>
`;
const mailOptions = {
from: req.body.name,
to: 'xxxxxxxxxxxxxxxxxxx',
subject: 'Message',
html: htmlEmail,
attachments: [{}],
};
const transporter = nodemailer.createTransport({
host: 'smtp.ethereal.email',
port: 587,
auth: {
user: 'xxxxxxxxxxxxxxx',
pass: 'xxxxxxxxxxxxxxx',
},
});
transporter.sendMail(mailOptions, (err, data) => {
if (err) {
res.json({
status: 'fail',
});
} else {
res.json({
status: 'success',
});
}
});
return console.log('email sent');
};
exports.contact=async（请求、回复）=>{
常量htmlEmail=`
你好
`;
常量邮件选项={
from:req.body.name，
致：'XXXXXXXXXXXXXXXX'，
主题:"讯息",，
html:htmlEmail，
附件：[{}]，
};
const transporter=nodemailer.createTransport({
主机：“smtp.ethereal.email”，
港口：587，
认证：{
用户：“XXXXXXXXXX”，
通行证：'xxxxxxxxxxxxx'，
},
});
transporter.sendMail（邮件选项，（错误，数据）=>{
如果（错误）{
res.json({
状态：“失败”，
});
}否则{
res.json({
状态：“成功”，
});
}
});
返回console.log（“已发送电子邮件”）；
};
class Contact extends React.Component {
constructor(props) {
super(props);
this.state = {
name: '',
email: '',
phone: '',
message: '',
trimmedDataURL: null,
file: null,
};
}
sigPad = {};
clear = () => {
this.sigPad.clear();
};
trim = (e) => {
e.preventDefault();
this.setState({ trimmedDataURL: this.sigPad.getTrimmedCanvas().toDataURL('image/png') });
this.fileUpload(this.state.file).then((response) => {
console.log(response);
});
};
fileUpload(file) {
const url = 'http://localhost:3000/create-pdf';
const formData = new FormData();
formData.append('file', file);
const config = {
headers: {
'content-type': 'multipart/form-data',
},
};
return post(url, formData, config);
}
handleSubmit(e) {
e.preventDefault();
axios({
method: 'POST',
url: '/api/contact',
data: this.state,
}).then((response) => {
if (response.data.status === 'success') {
console.log('success');
} else if (response.data.status === 'fail') {
console.log('not success');
}
});
axios
.post('/create-pdf', this.state)
.then(() => axios.get('fetch-pdf', { responseType: 'blob' }))
.then((res) => {
const pdfBlob = new Blob([res.data], { type: 'application/pdf' });
saveAs(pdfBlob, 'newpdf.pdf');
});
}
render() {
return (
<div className="contact">
<h1>GET IN TOUCH</h1>
<div>
<form onSubmit={this.handleSubmit.bind(this)} method="POST">
<label htmlFor="name">NAME</label>
<br />
<input
onChange={this.onNameChange.bind(this)}
value={this.state.name}
type="text"
name="name"
placeholder="Your full name..."
/>
<br />
<label htmlFor="phone">PHONE</label>
<br />
<input
onChange={this.onPhoneChange.bind(this)}
type="text"
name="phone"
placeholder="Your phone number..."
value={this.state.phone}
/>
<br />
<label htmlFor="email">EMAIL</label>
<br />
<input
onChange={this.onEmailChange.bind(this)}
type="text"
name="email"
placeholder="Your email address..."
value={this.state.email}
/>
<br />
<label htmlFor="message">MESSAGE</label>
<br />
<textarea
onChange={this.onMessageChange.bind(this)}
type="text"
name="message"
value={this.state.message}
rows="5"
/>
<button className="contact-button" type="submit">
Send
</button>
<button onClick={this.createAndDownloadPdf}>download</button>
<br />
<SignatureCanvas
canvasProps={{ className: styles.sigPad }}
backgroundColor="gray"
ref={(ref) => {
this.sigPad = ref;
}}
/>
<img
alt=""
className={styles.sigImage}
src={this.state.trimmedDataURL}
style={{ width: '50px' }}
/>
<button className={styles.buttons} onClick={this.clear}>
Clear
</button>
<button
className={styles.buttons}
onClick={this.trim}
onChange={this.onFileChange.bind(this)}
>
Trim
</button>
</form>
</div>
</div>
);
}
onNameChange(event) {
this.setState({ name: event.target.value });
}
onEmailChange(event) {
this.setState({ email: event.target.value });
}
onPhoneChange(event) {
this.setState({ phone: event.target.value });
}
onMessageChange(event) {
this.setState({ message: event.target.value });
}
onFileChange(e) {
this.setState({ file: e.target.files[0] });
}
}
export default Contact;
类联系人扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
名称：“”，
电子邮件：“”，
电话：''，
消息：“”，
trimmedDataURL:null，
文件：null，
};
}
sigPad={}；
清除=（）=>{
this.sigPad.clear（）；
};
修剪=（e）=>{
e、 预防默认值（）；
this.setState（{trimmedataurl:this.sigPad.getTrimmedCanvas（）.toDataURL（'image/png'）}）；
this.fileUpload（this.state.file）。然后（（响应）=>{
控制台日志（响应）；
});
};
文件上传（文件）{
常量url=http://localhost:3000/create-pdf'；
const formData=new formData（）；
formData.append（'file'，file）；
常量配置={
标题：{
“内容类型”：“多部分/表单数据”，
},
};
返回帖子（url、formData、配置）；
}
handleSubmit（e）{
e、 预防默认值（）；
axios({
方法：“POST”，
url:“/api/contact”，
数据：本州，
})。然后（（响应）=>{
如果（response.data.status==='success'）{
console.log（'success'）；
}else if（response.data.status==='fail'）{
console.log（'notsuccess'）；
}
});
axios
.post（'/create pdf'，this.state）
.then（（）=>axios.get（'fetch-pdf'，{responseType:'blob'}））
。然后（（res）=>{
constpdfblob=newblob（[res.data]，{type:'application/pdf'}）；
saveAs（pdfBlob，'newpdf.pdf'）；
});
}
render（）{
返回(
联系
名称
电话
电子邮件
消息
发送
下载
{
this.sigPad=ref；
}}
/>
清楚的
修剪
);
}
onNameChange（事件）{
this.setState（{name:event.target.value}）；
}
onEmailChange（事件）{
this.setState（{email:event.target.value}）；
}
onPhoneChange（事件）{
this.setState（{phone:event.target.value}）；
}
onMessageChange（事件）{
this.setState（{message:event.target.value}）；
}
onFileChange（e）{
this.setState（{file:e.target.files[0]}）；
}
}
导出默认联系人；
attachments: [
{
filename: 'result.pdf',
path: '../grovespine/result.pdf',
},
],