Drucken ganze HTML-Seite einschließlich PDF-Datei in iframe

Ich habe eine Aufgabe, relativ kleine PDF-Datei innerhalb HTML-Seite einzubetten und den gesamten HTML-Pode einschließlich der PDF-Datei in den Iframe zu drucken. Hier ist die Struktur meiner HTML-Seite: Drucken ganze HTML-Seite einschließlich PDF-Datei in iframe

Hier ist mein Code:

@media print{ 
 
\t body * {display:block;} 
 
    .toPrint{display:block; border:0; width:100%; min-height:500px}

<body> 
 
    <button onclick="window.print()">Print</button> 
 

 
\t <h3>MUST BE PRINTED</h3> 
 
    <p> MUST BE PRINTED</p> 
 
    <iframe class="toPrint" src="https://nett.umich.edu/sites/default/files/docs/pdf_files_scan_create_reducefilesize.pdf" style="width:100%; height:97vh;"></iframe> 
 
\t <h3>MUST BE PRINTED</h3> 
 
    <p> MUST BE PRINTED</p> 
 
</body>

Zur Zeit bin ich das Drucken der Seite CSS @media Abfrage verwenden. Aber leider druckt diese Medienabfrage die erste Seite des Dokuments nur.

Was kann ich drucken die gesamte pdf-Datei?

Quelle

2016-04-11 altgov3en

Ich benutze Mozilla's pdf.js, um mein Problem zu lösen. Es rendert die PDF-Datei auf html5-Canvas, so dass es ermöglicht, die gesamte HTML-Seite nach Bedarf zu drucken. Hier

ist der Code (credit):

<html> 
 
<body> 
 

 
<script type="text/javascript" src="https://raw.github.com/mozilla/pdf.js/gh-pages/build/pdf.js"></script> 
 
<script type="text/javascript"> 
 
function renderPDF(url, canvasContainer, options) { 
 
    var options = options || { scale: 1 }; 
 
     
 
    function renderPage(page) { 
 
     var viewport = page.getViewport(options.scale); 
 
     var canvas = document.createElement('canvas'); 
 
     var ctx = canvas.getContext('2d'); 
 
     var renderContext = { 
 
      canvasContext: ctx, 
 
      viewport: viewport 
 
     }; 
 
     
 
     canvas.height = viewport.height; 
 
     canvas.width = viewport.width; 
 
     canvasContainer.appendChild(canvas); 
 
     
 
     page.render(renderContext); 
 
    } 
 
    
 
    function renderPages(pdfDoc) { 
 
     for(var num = 1; num <= pdfDoc.numPages; num++) 
 
      pdfDoc.getPage(num).then(renderPage); 
 
    } 
 
    PDFJS.disableWorker = true; 
 
    PDFJS.getDocument(url).then(renderPages); 
 
} 
 
</script> 
 
     <h3>MUST BE PRINTED</h3> 
 
     <p> MUST BE PRINTED</p> 
 
\t \t <div id="holder"></div> 
 
     <h3>MUST BE PRINTED</h3> 
 
     <p> MUST BE PRINTED</p> 
 

 
<script type="text/javascript"> 
 
renderPDF('yourFile.pdf', document.getElementById('holder')); 
 
</script> 
 

 
</body> 
 
</html>

Quelle

2016-04-24 14:20:54 altgov3en

Versuchen Sie dies, es enthält einige JS, aber das ist immer gut. HTML:

<body> 
     <h3>MUST BE PRINTED</h3> 
     <p> MUST BE PRINTED</p> 
     <div id="pdfRenderer"></div> 
     <h3>MUST BE PRINTED</h3> 
     <p> MUST BE PRINTED</p> 
    </body>

JS:

var pdf = new PDFObject({ 
    url: "https://nett.umich.edu/sites/default/files/docs/pdf_files_scan_create_reducefilesize.pdf", 
    id: "pdfRendered", 
    pdfOpenParams: { 
    view: "FitH" 
    } 
}).embed("pdfRenderer");

Das sollte funktionieren. Lassen Sie mich jetzt, wenn ich nicht

Quelle

2016-04-13 18:29:29 Rik

Hallo, @Rik. Ich habe versucht, was du vorgeschlagen hast. Auch habe ich die http://pdfobject.com/ Dokumentation verwendet, um die Dinge klarer zu machen, aber das Problem ist immer noch da, ich kann nicht die gesamte Seite einschließlich der PDF-Datei in #pdfRenderer Div drucken. – altgov3en

Warum möchten Sie HTML in einem Div für eine PDF drucken? – Rik

Hallo, @ Rik. Ich habe ein Dokument mit einer Standard-Kopf- und Fußzeile. Zwischen diesen beiden muss ich eine benutzerdefinierte PDF-Lizenzvereinbarung einfügen. Daher muss ich in der Lage sein, Standarddokument zu drucken. Kopf- und Fußzeile mit einer benutzerdefinierten PDF zwischen ihnen. Meine Kunden müssen den Vertrag ausdrucken, um ihn zu unterschreiben. – altgov3en

Wenn Sie ein Objekt-Tag verwenden können, dann kann dieser Artikel: http://forums.asp.net/t/1926965.aspx?how+to+print+embedded+PDF+file+using+javascript+which+works+in+all+browsers+ Ihnen nützlich sein.

Quelle

2016-04-13 18:59:32 Matt

Der Grund, warum es nicht die gesamte PDF-Datei druckt, liegt daran, dass es sich um einen Iframe handelt und die Höhe fest ist. Um das gesamte PDF zu drucken, müssen Sie die Höhe des Iframes an die Höhe des Inhalts anpassen (sollte keine Bildlaufleiste auf dem iframe sein).

Eine andere Option ist, nur den iframe zu drucken. In-ID Ihre iFrame:

<iframe id="toPrint" class="toPrint"></iframe>

Fokus der iframe und auszudrucken, um den Inhalt:

var pdfFrame = document.getElementById("toPrint").contentWindow; 

pdfFrame.focus(); 
pdfFrame.print();

Quelle

2016-04-17 09:59:33 avladov

Verwenden https://github.com/itext/itextsharp iTextSharp oder https://github.com/MrRio/jsPDF jsPDF. Es ist einfach zu verwenden durch das Plugin

Quelle

2016-04-18 09:44:02

Drucken ganze HTML-Seite einschließlich PDF-Datei in iframe

Antwort

Verwandte Themen