Menu
I've got an assignment to embed relatively small pdf file inside html page and print the entire html pade including the pdf file inside the iframe.
Here is the structure of my html page:
Here is my code:
@media print{
body * {display:block;}
.toPrint{display:block; border:0; width:100%; min-height:500px}<body>
<button onclick="window.print()">Print</button>
<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>
<h3>MUST BE PRINTED</h3>
<p> MUST BE PRINTED</p>
</body>Currently I'm printing the page using css @media query. But unfortunately this media query prints the pdf's first page only.
What can I do print the entire pdf file?
422
Right-click on the link in the href attribute and click Copy link address. Create a new Text content block. Click the Embed Media icon and embed the HTML code in an iframe that points to the PDF URL you noted in step 3. Click the checkmark to see the PDF displayed in the newly created iframe.
All you need to do is add #view=fitH to the end of the source attribute. That's it! fitH stands for fit horizontal, and this will make the PDF in our iframe fit the width of the screen.
window. print() WILL print the whole page.
The reason it's not printing the whole PDF is because it's in an iframe and the height is fixed. In order to print the whole PDF you'll need the iframe height to match its content height (there should be no scrollbar on the iframe).
Another option is to print only the iframe. Add id to your iFrame:
<iframe id="toPrint" class="toPrint"></iframe>
Focus the iframe and print its content:
var pdfFrame = document.getElementById("toPrint").contentWindow;
pdfFrame.focus();
pdfFrame.print();
Try this, it includes some JS but thats always good. 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");
This should work. Let me now if i doesnt
34
Use https://github.com/itext/itextsharp itextsharp or https://github.com/MrRio/jsPDF jsPDF. It is easy to use by plugin
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
