如何编程打印网页在A4大小，横向不丢失任何内容使用HTML/JavaScript/Jquery

How to programatically print the web page in A4 size, Landscape orientation without loosing any contents using HTML/JavaScript/Jquery

本文关键字：任何内 Jquery JavaScript HTML 横向 编程 何编程 打印 大小 A4 网页      更新时间：2023-09-26

请回复解决方案:

以A4尺寸打印网页，横向，不丢失内容和清晰度或者

将网页转换为PDF或图像(A4大小，横向，不丢失内容&图像清晰度)

编程语言:HTML/Javascript/jQuery

我当前的代码是:

//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;">&nbsp;</span><br>Ensure you have a gmail account before starting<br><span style="line-height: 58px;">&nbsp;</span><br>Search for “247Patient” in the google playstore and download/install the app on your phone<br><span style="line-height: 58px;">&nbsp;</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;">&nbsp;</span><br>Open the 247Patient App<br><span style="line-height: 58px;">&nbsp;</span><br>Enter the <em>Clinic mobile number</em>&nbsp;(found on first page of brochure) and click “Configure”<br><span style="line-height: 58px;">&nbsp;</span><br>You will be automatically redirected to the login screen of your clinic.<br><span style="line-height: 58px;">&nbsp;</span><br>You will also receive an SMS with your login details.<br><span style="line-height: 58px;">&nbsp;</span><br>Enter your login detials in the login page and hit login to access your clinic<br><span style="line-height: 58px;">&nbsp;</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;">&nbsp;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 &nbsp; &nbsp; </a><a href="patInstallBrochureback.html">2 &nbsp; &nbsp; &nbsp; </a></p>
 </div>
</html>

你可以使用html2canvas js插件来满足你的需求。它能够打印网页而不丢失内容& &;图像清晰度。

是html2canvas的链接你可以在这个链接中找到完整的文档和用法。

关于更多的查询，您可以在网站上找到github链接。

快乐编码…

相关文章：