How can we print. about react-pdf-js

[gabteles]

I'm currently using an hidden iframe to do this.

HTML:

<iframe name="my-frame" id="my-frame" title="my-frame" style="display: none"></iframe>

JS:

// In my case, I had only blobData from PDF, but you can ignore this and set fileURL directly if it is not yours.
const file = new Blob([blobData], { type: 'application/pdf' });
const fileURL = window.URL.createObjectURL(file);

// As the URL is dynamic, we must set src here, but if it's not, just leave it direct on the HTML. 
// Also, be careful with React literals. If you do this in a <iframe> defined in JSX, it won't work 
// as React will keep src property undefined.
window.frames["my-frame"].src = fileURL;

// Then print:
window.frames["my-frame"].print();

Hope to help :D

---

Just as a note, I tried to read canvas content as image and print it; the problem is the resolution. As my canvas was resized, the image quality was so bad. :(

[gapipro]

I am also wondering on how to print pdf without opening it in new tab.

[NjordTech]

@gapipro do you have a solution for download or print?

[gapipro]

My current way of printing is that I open base64 encoded pdf in new tab.

var pdf = "data:application/pdf;base64,"+base64EncodedPdfContent;
window.open(pdf, '_blank');

This forces browser to render PDF with his viewer and then you can print it out.

[NjordTech]

great!! for get base64EncodedPdfContent you need to call the url again right?
first you show the preview..
letter you need to call the url again for get the base64 file and then print. ?

[gapipro]

Well what you can do is fetch PDF once to gets its binary. Load that into react-pdf-js using content property and then use same content in function written above to show it in new tab. This results only in 1 fetch of PDF but side effect it that full PDF is loaded in JS memory.

[lawreenas]

@gapipro do you know if there is a limit to length of base64EncodedPdfContent string? My current pdf is over 2 million characters and does not open..

[lawreenas]

Apparently there's a chrome bug with large files: https://bugs.chromium.org/p/chromium/issues/detail?id=69227

[quytang]

@gabteles this doesn't work with file from other domains (cross file sharing resources)

[singleclown]

@gapipro base64EncodedPdfContent怎么获取

[mikecousins]

I think this is a bit outside the bounds of this library.