如何使用HTML / JavaScript / Jquery以A4尺寸以横向打印网页，而不会丢失任何内容
[英]How to programatically print the web page in A4 size, Landscape orientation without loosing any contents using HTML/JavaScript/Jquery
问题描述
Please reply with solution for: 
请回答以下解决方案：
print the web page in A4 size, Landscape orientation without loosing content and clarity OR 以A4尺寸打印网页，横向放置而不会丢失内容和清晰度，或者
Convert web page to PDF or Image( A4 size, Landscape orientation without loosing content & image clarity) 将网页转换为PDF或图像（A4大小，横向放置而不丢失内容和图像清晰度）
Programming language: HTML/Javascript/jQuery 编程语言：HTML / Javascript / jQuery
My current code is : 我当前的代码是：
//patInstallBrochure.html //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 个解决方案
解决方案1
0 2015-08-04 10:20:38
You can use html2canvas js plugin for your requirement. 您可以根据需要使用html2canvas js插件。 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. 这是html2canvas的链接，您可以在此链接中找到完整的文档和用法。
For further queries you can find the github link on website. 对于进一步的查询，您可以在网站上找到github链接。
Happy Coding.... 编码愉快。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何用新的html替换元素内容而不丢失javascript功能？ - how to replace element contents with new html without loosing javascript function?
如何在 Angular 9 中拆分 A4 大小的 HTML 页面 - How to split HTML Page in A4 size in Angular 9
如何在网页中打印图像，以适合纸张尺寸（A3，A4，A5等）？ - How can I print an image in a web page, fitting the paper size (A3, A4, A5, etc)?
如何使用 html2canvas 将 html 页面安装在 a4 大小的页面上 - How to fit html page on a4 size page using html2canvas
如何在 A4 纸大小的页面中制作 HTML 页？ - How to make a HTML Page in A4 paper size page(s)?
网页打印不能正确放入A4页面 - Print of web page not fit on A4 page correctly
如何将页面格式化为 A4 尺寸？ - How to Format a page for A4 size?
用php / css / javascript / jquery打印F4大小的网页？ - print web page with F4 size with php/css/javascript/jquery?
我如何使用javascript或php从Web浏览器中打印页面或页面的一部分而无需打印窗口 - how i can print a page or part of the page from web browser without print window using javascript or php
如何在javascript中横向打印页面 - How can I print a page in landscape in javascript
相关标签