使用 React 下載 pdf / Node.js

Question

我為工作創建了一個反應前端和一個 node.js API。 React 前端顯示我可能感興趣的工作，並為每個工作提供一個按鈕，上面寫着下載求職信。 單擊后，此按鈕會向我的 node.js API 發送一個 axios POST 請求，然后獲取請求正文，並為我創建一封個性化的求職信，我可以用它來申請工作。 我的問題是 node.js API 似乎在做它的工作，但是我的反應應用程序沒有將我的求職信下載到我的本地機器。 我有點困惑為什么它不起作用，因為我相信我的節點 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 上生成您的文件以引用您的按鈕。