How to serve pdf to the client?

Question

onClick of a button I'm trying to GET a generated PDF (by Pdfmake library) file from server, although I'm getting really long base64 codes in preview & response section of chrome dev console like --

JVBERi0xLjMKJf////8KNyAwIG9iago8PAovVHlwZSAvRXh0R1N0YXRlCi9jYSAxCj4+CmVuZG9iago4IDAgb2JqCjw8Ci9UeXBlIC9FeHRHU3RhdGUKL2NhIDEKL0NBIDEKPj4KZW5kb2JqCjExIDAgKL0luZm8gMTMgMCBSCi9JRCBbPGIzZjEyYjhkYWYwN2Q4ZWZkZjFjYTkzOWE3YTQ2NjZiPiA8YjNmMTJiOGRhZjA3ZDhlZmRmMWNhOTM5YTdhNDY2NmI+XQo+PgpzdGFydHhyZWYKMjA5Nj . ............very long....

I'm expecting to get the pdf on new browser window tab, after manually typing this base64 code prefixed with data:application/pdf;base64, then its showing the pdf, but I need it to popout on a new tab as soon as onClick occurs...

data:application/pdf;base64,JVBERi0xLjMKJf////8KNyAwIG9iago8PAovVHlwZSAvRXh0R1N0YXRlCi9jYSAxCj4+CmVuZG9iago4IDAgb2JqCjw8Ci9UeXBlIC9FeHRHU3RhdGUKL2NhIDEKL0NBIDEKPj4KZW5kb2JqCjExIDAgb2JqCjw8Ci9UeXBlIC9FeHRHU3RhdGUKL0NBIDEKPj4KZW5kb2JqgKI189+A10wPsfByPuXwnyXtcO17zDJBaRJTFEFLPpHqYmHEniQ7Wjpe/E/iXwbhHf8B6XIZX4gskibxEvuIM8G8E9zIfwk/kt/OfCYXCcuFT4YxqlOp11Tl1sVrSxGlqNa9pftQO1oo

Please answer as easy & detailed as possible, I have no idea how stream, buffer, base64, filesystem everything works and how to work around with, I'm new to the development.

Client Side --->

handleOrderInvoice(event) {
const orderid = event.currentTarget.id;
fetch(`/api/payment/order/${orderid}`, {
  method: "GET",
  headers: {
    Accept: "application/pdf",
    Authorization: localStorage.getItem("bearerToken")
  }
})
  .then(response => {

    //HOW to work with pdf response???

  })
  .catch(err => console.log(`Error in fetching this order. -- ${err}`));

Server side (Express) -->

    router.get(
  "/order/:orderid",
  passport.authenticate("jwt", { session: false }),
  (req, res) => {
        //Create PDF Document
        const pdfDoc = pdfMake.createPdf(documentDefinition);
        pdfDoc.getBase64(data => {
          res.writeHead(200, {
            "Content-Type": "application/pdf",
            "content-Disposition": "inline; filename='invoice.pdf'"
          });
          const doc = Buffer.from(data.toString("utf-8"), "base64");
          res.end(doc);
        });
      })
      .catch(err =>
        console.log(`Error in fetching user order response. -- ${err}`)
      );
  }
);

score 0 · Answer 1 · answered Feb 10 '19 at 12:33

0

pdfs, Images are usually not stored in base64 as size of these files can be large. Instead use a file system to store as it is cheaper (you don't have to convert back and forth)

Assuming you have stored pdf on a file system, you can simply use

response.sendFile(url-for-pdf);

And you can open a new window to display a pdf on client side using

window.open('_link is here_', '_blank');

answered Feb 10 '19 at 12:33

Mahendra suthar

401
5
18

As far as I know, `.sendFile()` is used to send static files to the client. What if i don't want to store pdfs anywhere and then send it as response. Just want to send dynamically generated single page (user specifc) pdf from backend to the client as response, hope you understood what i'm trying.. – Shashank Feb 11 '19 at 09:14
https://stackoverflow.com/questions/742271/generating-pdf-files-with-javascript this should help – Mahendra suthar Feb 11 '19 at 14:22

How to serve pdf to the client?

1 Answers1