使用React/Node.js下载pdf

Question

我已经为作业创建了react前端和node.js API。react前端显示我可能感兴趣的工作，并为每个工作提供一个按钮，上面写着下载求职信。单击后，此按钮会向我的node.js API发送一个axios POST请求，然后接收请求主体，并为我创建一个个性化的求职信，我可以使用该求职信申请工作。我的问题是node.js API似乎在做它的工作，然而我的react应用程序并没有将我的求职信下载到我的本地机器上。我有点困惑为什么它不起作用，因为我相信我的节点API中的响应头是正确的。

这是我的反应代码：

import React from 'react';
import axios from 'axios';
const Job = (props) => {
const onClickHandler = async () => {
try {
const payload = JSON.stringify({"position": props.position,"company": props.company,"fileTitle": "Ryan_Test"});

const config = {
method: 'post',
//   url: 'http://test-with-nedal.herokuapp.com/cover-letter',
url: 'http://localhost:1234/cover-letter',
headers: { 
'Content-Type': 'application/json'
},
data : payload
};

const { data } = await axios(config)
//console.log(data);
} catch (err) {
console.log(err);
}
}
return (
<div className="col-sm-4">
<div className="card my-3">
<div className="card-body">
<h5 className="card-title">{props.position}</h5>
<h6 className="card-subtitle mb-2 text-muted">{props.company}</h6>
<p className="card-text">{props.description.substring(0, 100)}...</p>
<a href="#" className="btn btn-primary">View Job</a>
</div>
<div className="d-flex justify-content-end">
<button onClick={onClickHandler} className="btn btn-success">Download Cover Letter</button>
<span>Found on <span style={{color: 'green', paddingRight: '10px'}}>{props.poster}</span></span>
</div>
</div>
</div>
)
}
export default Job;

这是我在Node:中的API端点

const express = require('express');
const dotenv = require('dotenv');
const dateFormat = require('./utils/dateFormat');
const cors = require('cors');
const app = express();
dotenv.config();
app.use(cors());
app.use(express.json());
async function generatePdf(html) { 
const puppeteer = require("puppeteer");
const browser = await puppeteer.launch({
args: ['--no-sandbox'],
headless: true
});
const page = await browser.newPage();
await page.goto(`data:text/html,${html}`, {
waitUntil: 'networkidle0'
});
const options = {
format: 'A4',
margin: { top: "60px", bottom: "60px", left: "15px", right: "15px" },
printBackground: true,
}
const pdf = await page.pdf(options);
await browser.close();
return pdf;
}
app.post('/cover-letter', async (req, res) => {
console.log(req.body);
const {position, company, fileTitle} = req.body;
const date = dateFormat(new Date());
const coverLetter = `Way too long to include in a code snippet, but pretend a cover letter HTML is here that uses ${position} and ${company}`;

const pdfBuffer = await generatePdf(coverLetter);
const fileName = `attachment; filename="${fileTitle}.pdf"`;
res.setHeader("Content-Type", "application/octet-stream");
//res.setHeader("Content-Disposition","inline; filename="test_resume_company_name.pdf"");
res.setHeader('Content-Disposition', `attachment; filename="test.pdf"`);
res.status(200).send(pdfBuffer);
});
app.listen(process.env.PORT, () => {
console.log(`Listening on port ${process.env.PORT}...`)
})

Answer 1

您似乎没有使用API返回的数据。我认为你应该尝试将你的按钮更改为锚点，并添加如下下载属性：

<a href={file} className="btn btn-success" download="file_name">Download Cover Letter</a>

并在页面加载到按钮上引用后立即在useEffect上生成文件。