从javascript触发base64编码PDF的打印预览

Question

I've looked around stackoverflow trying to find a way to do this for a while now, and can't find a suitable answer. I need to be able to load a PDF in either a new window or an iframe via a base64 encoded string and trigger a print preview of it immediately after loading it. I can easily load the PDF using both of those methods, but can't actually get it to show the print preview properly. Here is what I've tried:

1. Using embed element in a new window. Calling window.print() is blank, even after the content is loaded.
2. Using a hidden, dynamically created iframe with src="data:application/pdf;base64,JVBERi0..." and calling myFrame.contentWindow.print() . But this gives a CORS error. I'm not sure why, because I'm not loading a new domain through the iframe, just content.
3. Open a new window with only an iframe element like the one in #2 and calling a print on the whole window. This also shows a blank white page.
4. Open a new window with the data uri and print it. window.open('data:application/pdf;base64,JVBERi0...').print(); . This doesn't work either, as it doesn't even show a print preview at all. I've also tried delaying it with a setTimeout but that doesn't do anything either.

At this point I'm very confused as to why none of these work, especially because in Chrome it display's custom menu bars like this:

And if I click the actual print icon there, the print preview is perfect. Whatever Chrome is doing when I click that button is exactly what I want to accomplish. Is there anyway to trigger that functionality? Or is there another way to accomplish what I want? And just to clarify, I only need this to work in Chrome, I don't need to worry about other browsers.

Answer 1

Here is a solution for point #3:

Open a new window with only an iframe element like the one in #2 and calling a print on the whole window. This also shows a blank white page.

In your case, it's throwing CORS error because it looks like for iframe src you are giving the base64String not the URL. Here is what you can do

1. Take your base64String, convert it to a Blob
2. Generate a URL from the Blob
3. Provide the generated URL to iframe.
4. After this you can print the content using iframe.contentWindow.print() ;

Here is the code to convert base64 to Blob

'use strict';

const b64toBlob = (b64Data, contentType = '', sliceSize = 512) => {
    const byteCharacters = atob(b64Data);
    const byteArrays = [];

    for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        const slice = byteCharacters.slice(offset, offset + sliceSize),
            byteNumbers = new Array(slice.length);
        for (let i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }
        const byteArray = new Uint8Array(byteNumbers);

        byteArrays.push(byteArray);
    }

    const blob = new Blob(byteArrays, { type: contentType });
    return blob;
}


const contentType = "application/pdf",
    b64Data = "YourBase64PdfString", //Replace this with your base64String
    blob = this.b64toBlob(b64Data, contentType),
    blobUrl = URL.createObjectURL(blob);

Use blobUrl to the src of Iframe, once it's done, you can call print() on iframe as shown below

const iframeEle = document.getElementById("Iframe");
if (iframeEle) {
    iframeEle.contentWindow.print();
}

Hope this helps...

More details on base64 to Blob is here Creating a Blob from a base64 string in JavaScript

Answer 2

you can use this,

function "printPreview(binaryPDFData)" to get print preview dialog of binary pdf data.

printPreview = (data, type = 'application/pdf') => {
    let blob = null;
    blob = this.b64toBlob(data, type);
    const blobURL = URL.createObjectURL(blob);
    const theWindow = window.open(blobURL);
    const theDoc = theWindow.document;
    const theScript = document.createElement('script');
    function injectThis() {
        window.print();
    }
    theScript.innerHTML = `window.onload = ${injectThis.toString()};`;
    theDoc.body.appendChild(theScript);
};

b64toBlob = (content, contentType) => {
    contentType = contentType || '';
    const sliceSize = 512;
     // method which converts base64 to binary
    const byteCharacters = window.atob(content); 

    const byteArrays = [];
    for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        const slice = byteCharacters.slice(offset, offset + sliceSize);
        const byteNumbers = new Array(slice.length);
        for (let i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }
        const byteArray = new Uint8Array(byteNumbers);
        byteArrays.push(byteArray);
    }
    const blob = new Blob(byteArrays, {
        type: contentType
    }); // statement which creates the blob
    return blob;
};