尝试使用 React 和 Express 在另一个选项卡中打开 .pdf 时显示空白内容

Question

我正在尝试在存储在服务器文件系统中的另一个选项卡中打开 .pdf（我正在使用 Express、React 和 MySQL）。当用户单击“查看”按钮时，displayCV将执行该函数，并打开一个新选项卡，但 .pdf 内容为空白，即使新选项卡显示 .pdf 包含的正确页数。

流程是这样的：

作业项目.jsx

const displayCV = async (e) => {
   e.preventDefault();
   await displayCurriculum();
};

JobContext.js

const displayCurriculum = async () => {
  const { id } = params;

  const response = await axios.get(`/api/jobs/${id}/cv`);
  // console.log(response);

  const file = new Blob([response.data], {
    type: "application/pdf",
  });

  const fileURL = URL.createObjectURL(file);
  const pdfWindow = window.open();
  pdfWindow.location.href = fileURL;
};

后端看起来像这样：

jobRoutes.js

const express = require("express");
const router = express.Router();
const { displayCurriculum } = require("../controllers/jobController");
router.route("/:id/cv").get(displayCurriculum);

jobController.js

const displayCurriculum = asyncHandler(async (req, res) => {
  try {
    const { id } = req.params,
      q = `SELECT curriculum FROM jobs WHERE idjobs = ?`,
      doc = await pool.query(q, [id]);

    const fileName = doc[0].curriculum;

    // const data = fs.readFileSync(filesPath + "\\" + fileName);
    res.setHeader("Content-Type", "application/pdf");
    res.sendFile(fileName, { root: filesPath }, (err) => {
      if (err) console.log(err);
      else console.log("Sent: ", fileName);
    });
  } catch (error) {
    console.log(error);
  }
});

如果我使用 Postman 并点击 API 的端点 ( /api/jobs/${id}/cv)，.pdf 将在 Postman 中正确显示。当从前端点击端点时，我得到以下 带有空白 .pdf 内容的图像

如何在新选项卡中显示 .pdf 内容？

Answer 1

在这种情况下，事实证明，responseType需要将 from Axios 设置"blob"为才能读取 .pdf。

JobContext.js

 const displayCurriculum = async () => {
    const { id } = params;
    const response = await axios.get(`/api/jobs/${id}/cv`, {
      method: "GET",
      responseType: "blob",
    });

    const file = new Blob([response.data], {
      type: "application/pdf",
    });

    const fileURL = URL.createObjectURL(file);
    window.open(fileURL);
 };

.pdf 现在在新选项卡中打开并显示其内容。但是，URL 中的文件名设置为由 .创建的DOMStringURL.createObjectURL()。如果用户尝试下载 .pdf，默认文件名将是生成的 DOMString。

示例网址：

斑点：http://localhost:3000/c6430bc7-99b3-4dae-9caf-79997f801752