Печать PDF непосредственно из JavaScript

Я создаю список PDF файлов в HTML. В списке я хотел бы включить ссылку для загрузки и кнопку/ссылку для печати. Есть ли способ открыть диалоговое окно "Печать" для PDF без просмотра PDF файла или открытия программы просмотра PDF?

Некоторые варианты загрузки PDF в скрытый iframe и запуск его для печати с помощью JavaScript?

Ответ 1

Основываясь на комментариях ниже, он больше не работает в современных браузерах
Этот вопрос демонстрирует подход, который может быть полезен для вас: тихая печать встроенного PDF

Он использует <embed> для встраивания PDF в документ:

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

Затем вы вызываете метод .print() для элемента в Javascript при загрузке PDF:

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

Вы можете поместить встраивание в скрытый фрейм и распечатать его оттуда, что даст вам беспроблемный опыт.

Ответ 2

Вот функция для печати PDF из iframe.

Вам просто нужно передать URL-адрес PDF в функцию. Он будет создавать iframe и триггер печати после загрузки PDF.

Обратите внимание, что функция не уничтожает iframe. Вместо этого он повторно использует его каждый раз, когда функция вызывает вызов. Трудно уничтожить 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;
}

Ответ 3

Загрузите файл Print.js с сайта 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/

для живой демонстрации http://mozilla.github.io/pdf.js/

это, вероятно, то, что вы хотите, но я не вижу смысла в этом, так как современные браузеры включают в себя такие функции, также он будет работать очень медленно на маломощных устройствах, таких как мобильные устройства, которые, кстати, имеют свои собственные оптимизированные плагинов и приложений.

Ответ 5

Я использовал эту функцию для загрузки потока 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)
    }

Ответ 6

Кросс-браузерное решение для печати PDF из строки base64:

  • 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))

БОНУС - Открытие BLOB файла в новой вкладке для IE11

Если вы можете выполнить некоторую предварительную обработку строки base64 на сервере, вы можете открыть ее под некоторым URL-адресом и использовать ссылку в printJS :)