Ruh*_*hah 5 html javascript pdf jspdf
我正在利用 jsPDF 从我的发票生成网络应用程序生成 PDF。虽然生成的 PDF 适用于我的 17 英寸设备。在其他设备上生成的 pdf 通常以一种或另一种方式裁剪。
所以我想知道，是否有一种方法可以让我在不依赖于设备屏幕尺寸的情况下生成 PDF。
我一直试图让它独立于分辨率，但似乎没有任何效果。在此配置中，pdf 在我的设备上生成得很好，但在其他较小的设备（如 13 英寸 mac ）上生成。但即使使用相同尺寸的设备，固有的显示分辨率似乎也会产生一些问题。
//Javascript Function that calls and downloads PDF
document.getElementById('print-invoice-sectionP').style.width = '1300px';
document.getElementById('pInvoiceContent').style.paddingTop = '145px';
var doc = new jsPDF('l', 'pt', 'letter');
doc.addHTML(document.getElementById("print-invoice-sectionP"),function() {
doc.save(''+fInvoiceId+'.pdf');
});HTML Code
<section id="print-invoice-sectionP" class="nodisplay mdl-grid" style="background: #fff; min-width: 1300px; min-height: 850px; ">
<div style="background: url('roshni.png'); background-size: cover; background-repeat: no-repeat; min-width: 1300px; min-height: 850px; ">
<div class="mdl-grid mdl-card__supporting-text pText" id="pInvoiceContent" style="color: #000; min-width: 1300px; ">
<div style="width: 36%; border-right:solid #000; font-size: 13pt;">
<h5><strong>To</strong></h5>
<p><strong><h4 id="pCnameP" ></h4></strong></p>
<p><span id="pCaddrP" class="pText"></span></p>
<p id="pCgst" class="pText"></p>
<p id="pCscode" class="pText"></p>
</div>
<div style="width: 30%; border-right:solid #000; margin-left: 10px; padding-top:10px;">
<p class="pText">Publication: Daily Roshni, Srinagar</p>
<p class="pText" id="gstNoP"></p>
<p class="pText">Client: <strong><span id="adClientP"></span></strong></p>
<p class="pText">Description: <span id="adDescP"></span></p>
<p id="pHSNc"></p>
<p class="pText">Page: <span id='adPageP'></span></p>
<p class="pText">Size: <strong><span id="adSizeP"></span> <span id="mUnitPa"></span></strong> (<span id='adWidthP'></span> x <span id='adHeightP'></span>)</p>
<p class="pText">Rate: <strong> ? <span id="adRateP"></span></strong> per <span id="mUnitPd"></span></p>
</div>
<div style="width: 30%; margin-left: 10px; padding-top:10px;" class="margin">
<p class="pText" style="min-height: 15%;">Invoice ID : <span id="pInIdP"></span></p>
<p class="pText" style="min-height: 15%;">Invoice Date : <span id="pInDateP"></span></p>
<p cclass="pText" style="min-height: 15%;">Release Order No. : <span class="pText" id="rOrderNoP"></span></p>
<p class="pText" style="min-height: 15%;">Release Order Date : <span id="rOrderDateP"></span></p>
<p class="pText" style="min-height: 15%;">Published On : <span id="publishDateP"></span></p>
</div>
<div class="mdl-card__actions mdl-card--border" style="margin-top: 10px;margin-bottom: 10px; color: #000;"></div>
<div style="min-width: 20%; border-right:solid #000; margin-right: 10px; margin-left: 10px;">
<p class="pText"" >Sub Total:</p>
<strong><span id="sTotalP"></span></strong>
</div>
<div id="cChargesDivP" style="min-width: 20%; border-right:solid #000; margin-right: 10px; margin-left: 10px;">
<p class="pText">Color Charges @ <span id="cChargesP"></span> % : </p>
<strong>? <span id="cChargesAmt"></span></strong>
</div>
<div id="discountDivP" style="min-width: 20%; border-right:solid #000; padding-right: 10px; margin-left: 10px;">
<p class="pText">Commission / Discount @ <span id="discountP"></span> % : </p>
<strong>? <span id="discountAmt"></span></strong>
</div>
<div id="gstDivP" style="min-width: 20%; margin-right: 10px; margin-left: 10px;" >
<p class="pText">IGST @ <span id="gstP"></span> % : </p>
<strong>? <span id="gstAmt"></span></strong>
</div>
<div style="width: 100%; ">
<div class="mdl-card__actions mdl-card--border" style="margin-top: 10px;margin-bottom: 10px;"></div>
<div style="width: 36%; border-right:solid #000; float: left;">
<p class="pText">Amount to be Paid</p>
<strong><h4 id="gTotalP" style="width: 30%"></h4></strong>
</div>
<div style="width: 60%;float: right;">
<p class="pText">Amount to be Paid In Words</p>
<strong><h4 id="gTotalWords" ></h4></strong>
</div>
</div>
</div>
</div>
</section>正确的方法是制作页面responsive然后使用jsPDF. 您可以使用此响应式模板来制作发票：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>A simple, clean, and responsive HTML invoice template</title>
<style>
.invoice-box{
max-width:800px;
margin:auto;
padding:30px;
border:1px solid #eee;
box-shadow:0 0 10px rgba(0, 0, 0, .15);
font-size:16px;
line-height:24px;
font-family:'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
color:#555;
}
.invoice-box table{
width:100%;
line-height:inherit;
text-align:left;
}
.invoice-box table td{
padding:5px;
vertical-align:top;
}
.invoice-box table tr td:nth-child(2){
text-align:right;
}
.invoice-box table tr.top table td{
padding-bottom:20px;
}
.invoice-box table tr.top table td.title{
font-size:45px;
line-height:45px;
color:#333;
}
.invoice-box table tr.information table td{
padding-bottom:40px;
}
.invoice-box table tr.heading td{
background:#eee;
border-bottom:1px solid #ddd;
font-weight:bold;
}
.invoice-box table tr.details td{
padding-bottom:20px;
}
.invoice-box table tr.item td{
border-bottom:1px solid #eee;
}
.invoice-box table tr.item.last td{
border-bottom:none;
}
.invoice-box table tr.total td:nth-child(2){
border-top:2px solid #eee;
font-weight:bold;
}
@media only screen and (max-width: 600px) {
.invoice-box table tr.top table td{
width:100%;
display:block;
text-align:center;
}
.invoice-box table tr.information table td{
width:100%;
display:block;
text-align:center;
}
}
</style>
</head>
<body>
<div class="invoice-box">
<table cellpadding="0" cellspacing="0">
<tr class="top">
<td colspan="2">
<table>
<tr>
<td class="title">
<img src="http://nextstepwebs.com/images/logo.png" style="width:100%; max-width:300px;">
</td>
<td>
Invoice #: 123<br>
Created: January 1, 2015<br>
Due: February 1, 2015
</td>
</tr>
</table>
</td>
</tr>
<tr class="information">
<td colspan="2">
<table>
<tr>
<td>
Next Step Webs, Inc.<br>
12345 Sunny Road<br>
Sunnyville, TX 12345
</td>
<td>
Acme Corp.<br>
John Doe<br>
john@example.com
</td>
</tr>
</table>
</td>
</tr>
<tr class="heading">
<td>
Payment Method
</td>
<td>
Check #
</td>
</tr>
<tr class="details">
<td>
Check
</td>
<td>
1000
</td>
</tr>
<tr class="heading">
<td>
Item
</td>
<td>
Price
</td>
</tr>
<tr class="item">
<td>
Website design
</td>
<td>
$300.00
</td>
</tr>
<tr class="item">
<td>
Hosting (3 months)
</td>
<td>
$75.00
</td>
</tr>
<tr class="item last">
<td>
Domain name (1 year)
</td>
<td>
$10.00
</td>
</tr>
<tr class="total">
<td></td>
<td>
Total: $385.00
</td>
</tr>
</table>
</div>
</body>
</html>更新
结合响应式解决方案，您可以使用javascript 库，例如Print.js.
另一种方法是将页面打印到画布上，然后像图像一样打印到 pdf 中。htmlcanvas如果您喜欢此解决方案，则可以使用。该脚本允许您直接在用户浏览器上截取网页或其部分内容的“屏幕截图”。屏幕截图基于 DOM，因此可能无法 100% 准确地反映真实情况，因为它不会制作实际的屏幕截图，而是根据页面上的可用信息构建屏幕截图。
有关如何使用 HTML5/Canvas/JavaScript 获取浏览器内屏幕截图的说明。
| 归档时间： |
|
| 查看次数： |
2095 次 |
| 最近记录： |