web-dev-qa-db-ja.com

JavaScriptから直接PDFを印刷

HTMLでPDFのリストを作成しています。リストに、ダウンロードリンクと印刷ボタン/リンクを含めたいです。ユーザーがPDFを表示したり、PDFビューアーを開いたりせずに、PDFの[印刷]ダイアログを直接開く方法はありますか？

PDFを非表示のiframeにダウンロードし、それをトリガーしてJavaScriptで印刷する方法のバリエーションはありますか？

javascriptpdf
74
Craig Celeste

この質問は、あなたに役立つかもしれないアプローチを示しています： 埋め込みPDFのサイレント印刷

<embed>タグを使用して、ドキュメントにPDFを埋め込みます。

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

次に、PDFがロードされたときに、Javascriptの要素で.print()メソッドを呼び出します。

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();
    }
}

埋め込みを非表示のiframeに配置し、そこから印刷して、シームレスなエクスペリエンスを提供できます。

53
nullability

IframeからPDFを印刷する関数を次に示します。

PDFのURLを関数に渡すだけです。 PDFが読み込まれると、iframeが作成され、印刷がトリガーされます。

この関数はiframeを破壊しないことに注意してください。代わりに、関数が呼び出されるたびに再利用します。 iframeは、印刷が完了するまで必要であり、printメソッドがコールバックをサポートしていないため（私が知る限り）iframeを破棄することは困難です。

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;
}
30
Nicolas BADIA

http://printjs.crabbly.com/ からPrint.jsをダウンロードします

$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")
});
17
user1892203

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

ライブデモ用 http://mozilla.github.io/pdf.js/

それはおそらくあなたが望むものですが、現代のブラウザにはそのような機能が含まれているため、この点を見ることができません。

11
user2311177

この関数を使用して、サーバーからpdfストリームをダウンロードしました。

function printPdf(url) {
        var iframe = document.createElement('iframe');
        // iframe.id = 'pdfIframe'
        iframe.className='pdfIframe'
        document.body.appendChild(iframe);
        iframe.style.display = 'none';
        iframe.onload = function () {
            setTimeout(function () {
                iframe.focus();
                iframe.contentWindow.print();
                URL.revokeObjectURL(url)
                // document.body.removeChild(iframe)
            }, 1);
        };
        iframe.src = url;
        // URL.revokeObjectURL(url)
    }
2
Adnan shah

Base64文字列からPDFを印刷するためのクロスブラウザーソリューション：

  • Chrome：印刷ウィンドウが開きます
  • FF：PDFの新しいタブが開きます
  • IE11：プロンプトを開く/保存する

。

const blobPdfFromBase64String = base64String => {
   const byteArray = Uint8Array.from(
     atob(base64String)
       .split('')
       .map(char => char.charCodeAt(0))
   );
  return new Blob([byteArray], { type: 'application/pdf' });
};

const isIE11 = !!(window.navigator && window.navigator.msSaveOrOpenBlob); // or however you want to check it

const printPDF = blob => {
   try {
     isIE11
       ? window.navigator.msSaveOrOpenBlob(blob, 'documents.pdf')
       : printJS(URL.createObjectURL(blob)); // http://printjs.crabbly.com/
   } catch (e) {
     throw PDFError;
   }
};

printPDF(blobPdfFromBase64String(base64String))

ボーナス-IE11の新しいタブでBLOBファイルを開く

サーバー上でbase64文字列の前処理を行うことができる場合は、それをURLで公開し、printJSのリンクを使用できます:)

0
Papi