Node-html-pdf: how to open pdf from ajax in client side.

Created on 26 Sep 2017  Â·  10Comments  Â·  Source: marcbachmann/node-html-pdf

router.get('/', function(req, res) {
    pdf.create(html).toBuffer(function(err, buffer){
        res.send(buffer);
    });
});

I can receive buffer string from server after pdf generation.
buffer string is

%PDF-1.4
1 0 obj
<<
/Title (��)
/Creator (��)
...
/Root 2 0 R
>>
startxref
5732
%%EOF

I want to display this pdf in new tab.
Is there any solution?

Thanks in advance

Most helpful comment

hi @joassouza @starcraft0429, you can return the stored PDF file path using ajax and render it in client side within an iframe, or opening a new tab using the file path

All 10 comments

I've had the same problem of you. What I did it was open a new tab then call the get request.

var windowObjectReference = window.open( 'GET_URL', '_blank' );
windowObjectReference.location;

This is a temporary solution.
What happens if you change
from:
res.send(buffer);

to:

res.type('pdf');
res.send(buffer, 'binary'));

Hi @joassouza
please see this and let me know whether it is working

313

Sure @starcraft0429! As I told you my solution was temporary maybe #313 fixes my problem. =)

Hey @starcraft0429, I tried it but it didn't work!
In my case I only need to download the PDF, so I've took a different approach.
I think you should close this issue and ask how do it on _stackoverflow.com_, maybe it's the right place since it isn't a problem of the library. =)

Thanks. but I have no account in stackoverflow

hi @joassouza @starcraft0429, you can return the stored PDF file path using ajax and render it in client side within an iframe, or opening a new tab using the file path

@starcraft0429 Found solution for this issue ? am facing the same problem!

I created pdf file in server side and get it client side via ajax call.

Did anyone gto this working, after trying various suggestions for hours, my head is aching by now :-
... tried both toBuffer, toStream

                htmlPdf.create(html).toBuffer((err, stream) => {
                    if (err) return next(err);
                    // res.setHeader('Content-type', 'application/pdf')
                    // res.setHeader('Content-Encoding', 'binary')
                    // res.set('Content-disposition', `attachment; filename=${filename}`);
                    res.type('application/pdf');
                    // res.type('pdf');
                    // res.status(200);
                    // stream.pipe(fs.createWriteStream('./foo.pdf'));
                    // res.setHeader('Content-disposition', 'inline; filename="Test.pdf"');
                    // stream.pipe(createGzip()).pipe(res);
                    // stream.pipe(res);
                    // res.send(stream);
                    // res.write(stream,'binary');
                    res.end(stream, 'binary');
                    // res.end(null);                    
                });
%PDF-1.4↵1 0 obj↵<<↵/Title (��)↵/Creator (��)↵/Pro…/Info 1 0 R↵/Root 2 0 R↵>>↵startxref↵13809↵%%EOF↵", status: 200, statusText: "OK",

Solved. Mentioning it here if someone finds it usefeul.

In the ajax call (axios) need to set responseType: "blob",

On client side

      const pdfURL = `${process.env.API}/pdf`;
      const postHeaders = new Headers();
      //   postHeaders.append("Content-Type", "application/pdf");
      postHeaders.append("Authorization", this.Authorization);
      return this.$axios({
        method: "post",
        url: pdfURL,
        headers: postHeaders,
        mode: "cors",
        redirect: "error", // manual, *follow, error
        responseType: "blob",   // Important
        data: itemData
      })
        .then(response => {
          debug("pdf", response);
          const blob = new Blob(["\ufeff", response.data]);
          const url = URL.createObjectURL(blob);
          const downloadLink = document.createElement("a");
          downloadLink.href = url;
          downloadLink.download = `${invoiceId}.pdf`;
          document.body.appendChild(downloadLink);
          downloadLink.click();
          document.body.removeChild(downloadLink);
        })
        .catch(e => {

On server side

                htmlPdf.create(html).toBuffer((err, stream) => {
                    if (err) return next(err);
                    res.send(new Buffer(stream, 'binary'));
                });
Was this page helpful?
0 / 5 - 0 ratings

Related issues

aminjoharinia picture aminjoharinia  Â·  4Comments

B-StS picture B-StS  Â·  5Comments

vivekiyer114 picture vivekiyer114  Â·  5Comments

Messilimeng picture Messilimeng  Â·  4Comments

RodolfoSilva picture RodolfoSilva  Â·  3Comments