[英]How to programatically print the web page in A4 size, Landscape orientation without loosing any contents using HTML/JavaScript/Jquery
請回答以下解決方案：
以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鏈接。
編碼愉快。
如何用新的html替換元素內容而不丟失javascript功能？
[英]how to replace element contents with new html without loosing javascript function?
如何在網頁中打印圖像，以適合紙張尺寸（A3，A4，A5等）？
[英]How can I print an image in a web page, fitting the paper size (A3, A4, A5, etc)?
用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
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.