请回复解决方案:
以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;"> </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>
你可以使用html2canvas js插件来满足你的需求。它能够打印网页而不丢失内容& &;图像清晰度。
是html2canvas的链接你可以在这个链接中找到完整的文档和用法。
关于更多的查询,您可以在网站上找到github链接。
快乐编码…