108

我正在构建一个 HTML 格式的 PDF 列表。在列表中，我想包含一个下载链接和一个打印按钮/链接。是否有某种方法可以直接打开 PDF 的“打印”对话框，而无需用户查看 PDF 或打开 PDF 查看器？

将 PDF 下载到隐藏的 iframe 并触发它使用 JavaScript 打印的一些变体？

4

8 回答 8

58

根据下面的评论，它不再适用于现代浏览器
这个问题演示了一种可能对您有帮助的方法：静默打印嵌入式 PDF

它使用<embed>标签将 PDF 嵌入到文档中：

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

.print()然后在加载 PDF 时调用 Javascript 中元素的方法：

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 中并从那里打印，从而为您提供无缝体验。

于 2013-04-26T15:13:09.123 回答
48

这是从 iframe 打印 PDF 的功能。

您只需要将 PDF 的 URL 传递给函数。加载 PDF 后，它将创建一个 iframe 并触发打印。

请注意，该函数不会破坏 iframe。相反，它会在每次调用函数时重用它。很难销毁 iframe，因为在打印完成之前需要它，并且 print 方法没有回调支持（据我所知）。

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;
}
于 2014-03-27T17:42:20.323 回答
26

您可以使用 Print.js ( npm install print-js)。解压后为 128kB，您可以在http://printjs.crabbly.com/找到文档。

但它不会在 IE 上打印，在这种情况下，您必须下载 PDF。

$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")
});
于 2017-06-02T02:58:35.710 回答
12

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

现场演示http://mozilla.github.io/pdf.js/

这可能是你想要的，但我看不出这有什么意义，因为现代浏览器包含这样的功能，而且它在低功率设备上运行非常慢，比如移动设备，顺便说一下，有自己的优化插件和应用程序.

于 2013-04-26T15:04:50.577 回答
6

从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:)中的链接

于 2019-01-04T11:47:58.090 回答
6

我使用此功能从服务器下载 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)
    }
于 2019-04-16T13:35:05.347 回答
0

您可以使用 下载 pdf 文件fetch，并使用 Print.js 进行打印

fetch("url").then(function (response) {
    response.blob().then(function (blob) {
        var reader = new FileReader();
        reader.onload = function () {

            //Remove the data:application/pdf;base64,
            printJS({
                printable: reader.result.substring(28),
                type: 'pdf',
                base64: true
            });
        };
        reader.readAsDataURL(blob);
    })
});
于 2020-12-23T18:27:35.970 回答
0

简化@Nicolas BADIA 的回答：

function printPDF (url)
{
    let pdfFrame = document.body.appendChild(document.createElement('iframe'));
    pdfFrame.style.display = 'none';
    pdfFrame.onload = () => (void pdfFrame.contentWindow.print());
    pdfFrame.src = url;
}
于 2021-08-21T06:49:44.877 回答