Print PDF directly from JavaScript

2019-01-01 08:33发布

问题:

I am building a list of PDFs in HTML. In the list I\'d like to include a download link and a print button/link. Is there some way to directly open the Print dialog for the PDF without the user seeing the PDF or opening a PDF viewer?

Some variation of downloading the PDF into a hidden iframe and triggering it to print with JavaScript?

回答1:

This question demonstrates an approach that might be helpful to you: Silent print a embedded PDF

It uses the <embed> tag to embed the PDF in the document:

<embed
    type=\"application/pdf\"
    src=\"path_to_pdf_document.pdf\"
    id=\"pdfDocument\"
    width=\"100%\"
    height=\"100%\" />

Then you call the .print() method on the element in Javascript when the PDF is loaded:

function printDocument(documentId) {
    var doc = document.getElementById(documentId);

    //Wait until PDF is ready to print    
    if (typeof doc.print === \'undefined\') {    
        setTimeout(function(){printDocument(documentId);}, 1000);
    } else {
        doc.print();
    }
}

You could place the embed in a hidden iframe and print it from there, giving you a seamless experience.



回答2:

Here is a function to print a PDF from an iframe.

You just need to pass the URL of the PDF to the function. It will create an iframe and trigger print once the PDF is load.

Note that the function doesn\'t destroy the iframe. Instead, it reuses it each time the function is call. It\'s hard to destroy the iframe because it is needed until the printing is done, and the print method doesn\'t has callback support (as far as I know).

printPdf = function (url) {
  var iframe = this._printIframe;
  if (!this._printIframe) {
    iframe = this._printIframe = document.createElement(\'iframe\');
    document.body.appendChild(iframe);

    iframe.style.display = \'none\';
    iframe.onload = function() {
      setTimeout(function() {
        iframe.focus();
        iframe.contentWindow.print();
      }, 1);
    };
  }

  iframe.src = url;
}


回答3:

Download the Print.js from http://printjs.crabbly.com/

$http({
    url: \"\",
    method: \"GET\",
    headers: {
        \"Content-type\": \"application/pdf\"
    },
    responseType: \"arraybuffer\"
}).success(function (data, status, headers, config) {
    var pdfFile = new Blob([data], {
        type: \"application/pdf\"
    });
    var pdfUrl = URL.createObjectURL(pdfFile);
    //window.open(pdfUrl);
    printJS(pdfUrl);
    //var printwWindow = $window.open(pdfUrl);
    //printwWindow.print();
}).error(function (data, status, headers, config) {
    alert(\"Sorry, something went wrong\")
});


回答4:

https://github.com/mozilla/pdf.js/

for a live demo http://mozilla.github.io/pdf.js/

it\'s probably what you want, but I can\'t see the point of this since modern browsers include such functionality, also it will run terribly slow on low-powered devices like mobile devices that, by the way, have their own optimized plugins and apps.