blob收到的pdf文件未使用iframe/ embed出现

Question

我是完整堆栈开发的新手，并且在检索和显示PDF的内容时面临这个问题。我正在使用ReactJ并表达。

问题声明： 我想从后端检索PDF文档并将其发送到前端。显示它时，我想在每个文档的第1页的预览中创建一个滚动列表。 目前，我使我的问题声明变得更简单，并正在从我的Express应用程序的“公共”文件夹中发送PDF，并在我的ReactJS应用程序中检索它。

快递代码： express代码

app.get("/pdf-templates", (req, res) => {
  let pdf = fs.createReadStream("./public/templates/final_look.pdf");
  pdf.pipe(res);
});

前端代码： reactjs code

function GetCertificateTemplates() {
  const [pdfUrl, setPdfUrl] = useState("");
  const getTemplateHandler = async () => {
    axios("http://localhost:3030/pdf-templates", {
      method: "GET",
      responseType: "blob",
    }).then((res) => {
      const file = new Blob([res.data], { type: "application/pdf" });
      const fileURL = URL.createObjectURL(file);
      setPdfUrl(fileURL);
      //   console.log(res.data);
      //   window.open(
      //     fileURL,
      //     "pdfwindow",
      //     "left=100,top=100,width=300,height=300"
      //   );
    });
  };
  return (
    <div className="Get-Certificate-Template">
      <button onClick={getTemplateHandler}>Get Templates</button>
      {/* <iframe src={pdfUrl} />; */}
      <embed src={pdfUrl} type="application/pdf" />;
    </div>
  );
}

在评论的行中，'window'命令''''''但是同一URL不适用于iframe或嵌入铬中。 iframe代码正在为Edge工作。 我没有使用“窗口”作为我的最终目标是在同一窗口中显示多个PDF预览。

问题是：

1. 这是获得和预览PDF的推荐方法吗？
2. 如果不是这样，请指导我了解最好的方法。
3. 如果这种方法还可以，那么我缺少什么。

谢谢您提前的时间。