Stampa intera pagina HTML incluso file pdf all'interno iframe

Ho un compito di incorporare file pdf relativamente piccoli nella pagina html e stampare l'intero pv html incluso il file pdf all'interno dell'iframe. Ecco la struttura della mia pagina html: Stampa intera pagina HTML incluso file pdf all'interno iframe

Ecco il mio codice:

@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>

Attualmente sto stampando la pagina utilizzando di query CSS @media. Ma sfortunatamente questa query multimediale stampa la prima pagina del pdf solo.

Cosa posso stampare l'intero file pdf?

fonte

2016-04-11 altgov3en

Ho usato il pdf.java di Mozilla per risolvere il mio problema. Rende il file pdf su tela html5 e consente quindi di stampare l'intera pagina html come richiesto.

Ecco il codice (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>

fonte

2016-04-24 14:20:54 altgov3en

Prova questo, include alcuni JS ma questo è sempre buono. 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");

Questo dovrebbe funzionare. Consentitemi ora se non

fonte

2016-04-13 18:29:29 Rik

Ciao, @Rik. Ho provato quello che mi hai suggerito. Inoltre ho usato la documentazione http://pdfobject.com/ per rendere le cose più chiare ma il problema è ancora lì, non posso stampare l'intera pagina incluso il file pdf all'interno di #pdfRenderer div. – altgov3en

Perché vuoi stampare HTML in un div creato per un PDF? – Rik

Ciao, @Rik. Ho un documento con un'intestazione e un piè di pagina standard. Tra questi due ho bisogno di iniettare un accordo di licenza pdf personalizzato. Quindi ho bisogno di essere in grado di stampare documenti standard. intestazione e piè di pagina con un pdf personalizzato tra di loro. I miei clienti devono stampare l'accordo per firmarlo. – altgov3en

Se è possibile utilizzare un tag oggetto, questo articolo: http://forums.asp.net/t/1926965.aspx?how+to+print+embedded+PDF+file+using+javascript+which+works+in+all+browsers+ potrebbe essere utile.

fonte

2016-04-13 18:59:32 Matt

Il motivo per cui non sta stampando l'intero PDF è perché è in un iframe e l'altezza è fissa. Per stampare l'intero PDF è necessario che l'altezza dell'iframe corrisponda all'altezza del contenuto (non ci dovrebbe essere alcuna barra di scorrimento sull'iframe).

Un'altra opzione è stampare solo l'iframe. Aggiungere id al iFrame:

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

fuoco l'iframe e stampare il suo contenuto:

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

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

fonte

2016-04-17 09:59:33 avladov

Usa https://github.com/itext/itextsharp iTextSharp o https://github.com/MrRio/jsPDF jsPDF. È facile da usare con il plugin

fonte

2016-04-18 09:44:02

Stampa intera pagina HTML incluso file pdf all'interno iframe

risposta

Problemi correlati