[javascript] JavaScript에서 직접 PDF 인쇄

Program / 글쓴이

HTML로 PDF 목록을 작성 중입니다. 목록에 다운로드 링크와 인쇄 버튼 / 링크를 포함하고 싶습니다. 사용자가 PDF를 보거나 PDF 뷰어를 열지 않고 PDF의 인쇄 대화 상자를 직접 열 수있는 방법이 있습니까?

PDF를 숨겨진 iframe으로 다운로드하고 JavaScript로 인쇄하도록 트리거하는 변형이 있습니까?

답변

아래 설명에 따르면 최신 브라우저에서는 더 이상 작동하지 않습니다.
이 질문은 도움이 될 수있는 접근 방식을 보여줍니다 . 포함 된 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에 배치하고 거기에서 인쇄하여 원활한 경험을 제공 할 수 있습니다.

답변

다음은 iframe에서 PDF를 인쇄하는 기능입니다.

PDF의 URL을 함수에 전달하기 만하면됩니다. PDF가로드되면 iframe을 생성하고 인쇄를 트리거합니다.

이 함수는 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;
}

답변

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

답변

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

라이브 데모 http://mozilla.github.io/pdf.js/

아마도 여러분이 원하는 것일 수도 있지만, 최신 브라우저에는 이러한 기능이 포함되어 있기 때문에 요점을 알 수 없습니다. 또한 자체 최적화 된 플러그인과 앱이있는 모바일 장치와 같은 저전력 장치에서도 매우 느리게 실행됩니다. .

답변

이 기능을 사용하여 서버에서 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)
    }

답변

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🙂

답변