https://github.com/parallax/jsPDF
http://mrrio.github.io/jsPDF/examples/basic.html
https://rawgit.com/MrRio/jsPDF/master/docs/jsPDF.html
https://github.com/spipu/html2pdf
https://parall.ax/products/jspdf
https://github.com/eKoopmans/html2pdf.js
https://github.com/niklasvh/html2canvas
https://github.com/stefanpenner/es6-promise
https://github.com/jakerella/jquery-mockjax
https://github.com/caprica/jquery-orgchart
https://github.com/yWorks/svg2pdf.js
https://github.com/caprica/jquery-orgchart
http://rlopez0689.github.io/OrgChartJit/
yFiles
https://github.com/yWorks/yfiles-for-html-demos
https://live.yworks.com/demos/complete/interactiveorgchart/
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>html convert Document 捷为工作室</title>
<meta name="Description" content="捷为工作室"/>
<meta name="Keywords" content="捷为工作室"/>
<meta name="author" content="geovindu Geovin Du"
<link rel="stylesheet" href="bootstrap/4.5.0/css/bootstrap.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="pdf.css" media="all" />
<script type="text/javascript">
document.write("<script type='text/javascript' src='pdf.js?v=" + Math.random() + "'></s" + "cript>");
</script>
<script>
//https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.js
//https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css
</script>
<script src="html2pdf.js/0.9.2/html2pdf.bundle.js"></script>
</head>
<body>
<div class="container d-flex justify-content-center mt-50 mb-50">
<div class="row">
<div class="col-md-12 text-right mb-3">
<button class="btn btn-primary" id="download"> 下载 pdf</button>
</div>
<div class="col-md-12">
<div class="card" id="invoice">
<div class="card-header bg-transparent header-elements-inline">
<h6 class="card-title text-primary">捷为工作室：售销发票</h6>
</div>
<div class="card-body">
<div class="row">
<div class="col-sm-6">
<div class="mb-4 pull-left">
<ul class="list list-unstyled mb-0 text-left">
<li>2269 Six Sigma</li>
<li>深圳市</li>
<li>+86 0755 8239 7507 </li>
</ul>
</div>
</div>
<div class="col-sm-6">
<div class="mb-4 ">
<div class="text-sm-right">
<h4 class="invoice-color mb-2 mt-md-2">NO #BBB1243</h4>
<ul class="list list-unstyled mb-0">
<li>生成日期: <span class="font-weight-semibold">2020年5月30日</span></li>
<li>到期日期: <span class="font-weight-semibold">2020年6月30日</span></li>
</ul>
</div>
</div>
</div>
</div>
<div class="d-md-flex flex-md-wrap">
<div class="mb-4 mb-md-2 text-left"> <span class="text-muted">Invoice To:</span>
<ul class="list list-unstyled mb-0">
<li>
<h5 class="my-2">涂聚文 Geovin Du</h5>
</li>
<li><span class="font-weight-semibold">缔友计算机信息技术有限公司</span></li>
<li>东晓大街</li>
<li>布心路3008号</li>
<li>香港</li>
<li>234 456 5678</li>
<li><a href="#" data-abc="true">geovindu@163.com</a></li>
</ul>
</div>
<div class="mb-2 ml-auto"> <span class="text-muted">付款明细:</span>
<div class="d-flex flex-wrap wmin-md-400">
<ul class="list list-unstyled mb-0 text-left">
<li>
<h5 class="my-2">应付款总额:</h5>
</li>
<li>开户银行名称:</li>
<li>国家地区:</li>
<li>城市:</li>
<li>地址:</li>
<li>IBAN:</li>
<li>SWIFT code:</li>
</ul>
<ul class="list list-unstyled text-right mb-0 ml-auto">
<li>
<h5 class="font-weight-semibold my-2">$1,090</h5>
</li>
<li><span class="font-weight-semibold">Hong Kong Bank</span></li>
<li>Hong Kong</li>
<li>Thurnung street, 21</li>
<li>New standard</li>
<li><span class="font-weight-semibold">98574959485</span></li>
<li><span class="font-weight-semibold">BHDHD98273BER</span></li>
</ul>
</div>
</div>
</div>
</div>
<div class="table-responsive">
<table class="table table-lg">
<thead>
<tr>
<th>Description</th>
<th>Rate</th>
<th>Hours</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<h6 class="mb-0">Arts and design template</h6> <span class="text-muted">in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur.Duis aute irure dolor in reprehenderit</span >
</td>
<td>$120</td>
<td>180</td>
<td><span class="font-weight-semibold">$300</span></td>
</tr>
<tr>
<td>
<h6 class="mb-0">Template for desnging the arts</h6> <span class="text-muted">Lorem
ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</span>
</td>
<td>$140</td>
<td>100</td>
<td><span class="font-weight-semibold">$240</span></td>
</tr>
<tr>
<td>
<h6 class="mb-0">Technical support international</h6> <span class="text-muted">Lorem
ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</span>
</td>
<td>$250</td>
<td>$250</td>
<td><span class="font-weight-semibold">$500</span></td>
</tr>
</tbody>
</table>
</div>
<div class="card-body">
<div class="d-md-flex flex-md-wrap">
<div class="pt-2 mb-3 wmin-md-400 ml-auto">
<h6 class="mb-3 text-left">Total due</h6>
<div class="table-responsive">
<table class="table">
<tbody>
<tr>
<th class="text-left">Subtotal:</th>
<td class="text-right">$1,090</td>
</tr>
<tr>
<th class="text-left">Tax: <span class="font-weight-normal">(25%)</span></th>
<td class="text-right">$27</td>
</tr>
<tr>
<th class="text-left">Total:</th>
<td class="text-right text-primary">
<h5 class="font-weight-semibold">$1,160</h5>
</td>
</tr>
</tbody>
</table>
</div>
<div class="text-right mt-3"> <button type="button" class="btn btn-primary"><b><i class="fa fa-paper-plane-o mr-1"></i></b>
Send invoice</button> </div>
</div>
</div>
</div>
<div class="card-footer"> <span class="text-muted">Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur.Duis aute irure dolor in reprehenderit</span> </div>
</div>
</div>
</div>
</div>
</body>
</html>
pdf.js：
window.onload = function () {
document.getElementById("download")
.addEventListener("click", () => {
const invoice = this.document.getElementById("invoice");
console.log(invoice);
console.log(window);
//设置
var opt = {
/* margin:{
top: 80,
bottom: 60,
left: 40
// 722
},*/
setFontSize:0.1,//10
setFont:'times',
setFontType:'italic',
filename: 'geovindu.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
//jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' } //https://github.com/eKoopmans/html2pdf.js mm, a4
//https://rawgit.com/MrRio/jsPDF/master/docs/jsPDF.html
//https://github.com/niklasvh/html2canvas
//https://github.com/stefanpenner/es6-promise
//http://mrrio.github.io/jsPDF/examples/basic.html
//https://github.com/MrRio/jsPDF https://github.com/parallax/jsPDF
//jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
jsPDF:{
orientation: 'portrait',
unit: 'pt',//"pt" (points), "mm", "cm", "in", "px", "pc", "em" or "ex".
format: 'a4',
putOnlyUsedFonts:true,
floatPrecision: 16 // or "smart", default is 16
}
};
html2pdf().from(invoice).set(opt).save();
})
}