How do I get expressjs app with ejs client to download pdf file with no issue?

Question

I am using expressjs framework to download a file from server. The pdf file should download in response to an "a" tag click event on the ejs front-end. When event occurs I am getting an "undefined" text file instead of the expected pdf file. My head is spinning...what could be the issue with my code?

ejs client html body

<a href="javascript:void(0);" class="download-file" data-id="<%= book._id%>">Download Book</a>

ejs client script

            const getFile = document.querySelector("a.download-file");
            getFile.addEventListener("click", () => {
                const endPoint = `/pages/${getFile.dataset.id}`;
                if (confirm(`Confirm PDF download to your computer`)) {
                    fetch(
                        endPoint, 
                        {method: "GET"}
                        )
                    .then((response) => response.blob())
                    .then((res) => {
                        console.log(res)
                        const url = window.URL.createObjectURL(new Blob([res.data]));
                        const link = document.createElement("a");
                        link.href = url;
                        link.setAttribute("download", "Pdf Book");
                        document.body.appendChild(link);
                        link.click();
                    })
                    .catch((err) => console.log("Error:", err));
                } else {
                    return;
                }
            });
        

back-end route

bookRouter.get("/:id", bookController.downloadSingleBook);

back-end controller

  const downloadSingleBook = (req, res) => {
    let bookID = req.params.id;
    Book.findById(bookID)
        .then((response) => {
            const file = path.resolve(response.bookfile);
            res.download(file);
        })
        .catch((err) => {
            console.log(err);
        });
};

Answer 1

Issue has finally been resolved. It was here on the client new Blob([res.data]) and here on the server const file = path.resolve(response.bookfile);

This is how the final updated working code looks:

ejs client script (wrapped in js script tag)

const getFile = document.querySelector("a.download-file");

getFile.addEventListener("click", () => {
  const endPoint = `/pages/${getFile.dataset.id}`;
  if (confirm(`Confirm PDF download to your computer`)) {
    fetch(
      endPoint, 
      { method: "GET" }
    )
      .then((response) => response.blob())
      .then((res) => {
        const url = window.URL.createObjectURL(res);
        const link = document.createElement("a");
        link.href = url;
        link.setAttribute("download", "Pdf Book");
        document.body.appendChild(link);
        link.click();
      })
      .catch((err) => console.log("Error:", err));
  } else {
    return;
  }
});

expressjs back-end controller

const downloadSingleBook = (req, res) => {
let bookID = req.params.id;
Book.findById(bookID)
  .then((response) => {
    const file = response.bookfile;
    res.download(file);
  })
  .catch((err) => {
    console.log(err);
  })};