How to programatically print the web page in A4 size, Landscape orientation without loosing any contents using HTML/JavaScript/Jquery
Question
Please reply with solution for:
print the web page in A4 size, Landscape orientation without loosing content and clarity OR
Convert web page to PDF or Image( A4 size, Landscape orientation without loosing content & image clarity)
Programming language: HTML/Javascript/jQuery
My current code is :
//patInstallBrochure.html
<!doctype html> <html> <head> <title>Generated at http://psd2htmlconverter.com - Your site's title should be here</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="description" content="Generated at http://psd2htmlconverter.com - Your site's description should be here"> <meta name="keywords" content="Generated at http://psd2htmlconverter.com - Your site's keywords should be here"> <meta name="generator" content="http://psd2htmlconverter.com"> <link rel="stylesheet" type="text/css" href="PatientInstallationBrochureFront/style.css"> </head> <body> <FORM NAME="joe"> <INPUT TYPE="hidden" NAME="burns"> <div class="front group"> <div class="left group"> <img class="android_icon" src="PatientInstallationBrochureFront/images/android_icon.png" alt="" width="267" height="310"> <p class="android">Android</p> <p class="downloading_installing_en"><strong><a href="#" style="text-decoration: underline; font-size: 58.33333px; font-variant: small-caps; color: #1e172b; font-weight: 600;">Downloading/Installing </a></strong><br><span style="line-height: 58px;"> </span><br>Ensure you have a gmail account before starting<br><span style="line-height: 58px;"> </span><br>Search for “247Patient” in the google playstore and download/install the app on your phone<br><span style="line-height: 58px;"> </span><br><strong><a href="#" style="text-decoration: underline; font-size: 58.33333px; font-variant: small-caps; color: #1b1126; font-weight: 600;">Configuring 247Patient Application</a></strong><br><span style="line-height: 58px;"> </span><br>Open the 247Patient App<br><span style="line-height: 58px;"> </span><br>Enter the <em>Clinic mobile number</em> (found on first page of brochure) and click “Configure”<br><span style="line-height: 58px;"> </span><br>You will be automatically redirected to the login screen of your clinic.<br><span style="line-height: 58px;"> </span><br>You will also receive an SMS with your login details.<br><span style="line-height: 58px;"> </span><br>Enter your login detials in the login page and hit login to access your clinic<br><span style="line-height: 58px;"> </span><br>Now you will have full access to your 247Patient App and you can start booking appointments</p> </div> <div class="center"> <p class="support_information"><a href="#">Support Information</a></p> <p class="web_url"></p> <p class="inputTxt" id="webUrl" align="left" ></p> <p class="use_the_above_url_for_boo">(Use the above URL for booking appointments through the internet.)</p> <p class="for_a_full_list_of_featur">For a full list of features and more detailed instructions, visit<strong style="font-style: normal; font-weight: bold;"> www.247doctorcare.com</strong></p> <p class="address"><div style="text-align: center;"> <span style="font-size: 75px; font-weight: bold;">Address:</span></div></p> <p class="inputTxt" id="addr1"></p> <p class="inputTxt" id="addr2"></p> <p class="inputTxt" id="addr3"></p> </div> <div class="right"> <p class="patient_installation_guid"><a href="#">Patient Installation Guide</a></p> <p class="clinic_name"></p> <p class="inputTxt" id="cName"></p> <p id="cCNo"></p> <p class="clinic_mobile_number_only"><span style="font-size: 60px;">Clinic Mobile Number</span><br><a href="#" style="text-decoration: underline; font-variant: small-caps;">(Only for Installation)</a></p> <div class="rectangle_1"><p id="cMobNo" class="inputTxt"></p></div> <img class="logo" src="PatientInstallationBrochureFront/images/logo.png" alt="" width="649" height="125"> </div> </div> </FORM> </body> <div style="zoom: 400%;"> <script type="text/javascript"> var pdfbuttonlabel="Save page as PDF" </script> <script src="http://www.web2pdfconvert.com/pdfbutton2.js" id="Web2PDF" type="text/javascript"></script> <!-- Web2PDF Converter Button END --> <p align="right">Page : <a href="patInstallBrochure.html">1 </a><a href="patInstallBrochureback.html">2 </a></p> </div> </html>
1 answers
solution1
0 2015-08-04 10:20:38
You can use html2canvas js plugin for your requirement. It is capable of printing a webpage without loosing content & image clarity.
here is the link for html2canvas you can find the full documentations and usage in this link.
For further queries you can find the github link on website.
Happy Coding....
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
how to replace element contents with new html without loosing javascript function?
How to split HTML Page in A4 size in Angular 9
How can I print an image in a web page, fitting the paper size (A3, A4, A5, etc)?
How to fit html page on a4 size page using html2canvas
How to make a HTML Page in A4 paper size page(s)?
Print of web page not fit on A4 page correctly
How to Format a page for A4 size?
print web page with F4 size with php/css/javascript/jquery?
how i can print a page or part of the page from web browser without print window using javascript or php
How can I print a page in landscape in javascript
Related Tags