Print.js: Base64 Pdf string

[rexkenley]

Hi

Does print.js have the ability to print base64 pdf string? Thanks!

[crabbly]

Hi @rexkenley , the library currently does not support base64 pdf strings.

[PabloSzx]

What workaround do i have if i get the pdf in base64 and i have to print it?

Solved

//data = pdf
const pdfBlob = new Blob([data], { type: "application/pdf" });
const url = URL.createObjectURL(pdfBlob);
printJS(url);

[crabbly]

@PabloSzx Hi Pablo,
That's correct, you will need to create an object Url and pass that to the printJS function.

Eventually we should add this functionality the library, where it will handle this for us and just accept the base64 string instead.

[fjavier]

@PabloSzx It just open a new window with the PDF, but it doesn't show the dialog to print inside the page where the pdf was generated.
The solution is the same that:

 var blob = new Blob([byteArray],{type:'application/pdf'});
var url = URL.createObjectURL(blob);
window.open(url);

[crabbly]

@fjavier Hi Francisco,
This has nothing to do with the blob data. It will happen if the browser is not supported when printing pdf files. Better than leaving the user stuck with a console error message.

Please take a look at the documentation page, there is a Browser Compatibility table there.
http://printjs.crabbly.com/#browsers

[fjavier]

@crabbly copy.

[Jayaharshak]

Hi,
I Have Used below code to print base64 string
const data = "Base64 String"; const pdfBlob = new Blob([data]); const url = URL.createObjectURL(pdfBlob); printJS(url);

But it is printing string itself. Not pdf.

[crabbly]

@Jayaharshak ,

Pass the content type when creating the Blob: new Blob([data], { type: "application/pdf" })

[am2222]

Does this method work with base64 images?

[crabbly]

@am2222 Yes.

[bilfeldt]

@PabloSzx I am trying to get your solution to work on my local machine, but I am getting a CORS error along the way. Do you have experience with that when building the Blob?

I am using the same code as you:

function doPrinting(name) {
    var pdfObject = document.getElementsByClassName(name)[0];
    var pdfUrl = pdfObject.getAttribute('src');//"data:application/pdf;base64,{base_64_encoded_pdf}"

    const pdfBlob = dataURItoBlob(pdfUrl);
    pdfUrl = URL.createObjectURL(pdfBlob);

    printJS(pdfUrl);
}

But this gives an error like so:

[PabloSzx]

@bilfeldt
I haven't experienced that, but i think adding "null" in your CORS headers should solve it.

[bilfeldt]

@PabloSzx Thanks for the reply. I am not really sure where I should add the header. Do you mean in the dataURI object or in the Blob object?

[PabloSzx]

Apparently the error is due to how is currently hosted the file, but i'm not really sure, try copying the base64 string and giving it manually and check if it works

https://github.com/teone/reveal.js-diagram-plugin/issues/2#issuecomment-371971253

[alluria14]

@bilfeldt
Try removing data:application/pdf;base64, and pass only {base_64_encoded_pdf} to dataURItoBlob method.

[bilfeldt]

It worked when accessing the file from a domain instead of localhost

[crabbly]

The newest version supports base64 pdf print.
Just add a base64: true to the print job object.

Example:

printJS {
  printable: 'base64 data...',
  type: 'pdf',
  base64: true
}

[bilfeldt]

[UPDATED]
This was added to version 1.0.55, but note that the website still references 1.0.54.

[crabbly]

Thank you, Anders.
The documentation is now up to date with the new version and the base64 option.

Ps.: The documentation is open source and its available here under the gh-pages branch.