Skip to content

Instantly share code, notes, and snippets.

@Thong-Tran

Thong-Tran/test.html

Created December 3, 2020 05:02
Show Gist options
  • Save Thong-Tran/dca8ba5bf357c36d37f1fa87ee79880e to your computer and use it in GitHub Desktop.
Save Thong-Tran/dca8ba5bf357c36d37f1fa87ee79880e to your computer and use it in GitHub Desktop.
Download ZIP
Html to pdf in front-end
Raw
test.html
<!DOCTYPE html>
<html>
<head>
<title></title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="https://kendo.cdn.telerik.com/2020.1.114/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.114/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.114/js/kendo.all.min.js"></script>
<!-- Load Pako ZLIB library to enable PDF compression -->
<script src="https://kendo.cdn.telerik.com/2017.3.913/js/pako_deflate.min.js"></script>
</head>
<body>
<div id="example">
<div class="box wide hidden-on-narrow">
<div >
<h4>Select Page size</h4>
<select id="paper" style="width: 100px;">
<option value="size-a4" selected>A4</option>
<option value="size-a3" selected>A3</option>
<option value="size-a5" selected>A5</option>
<option value="size-letter">Letter</option>
<option value="size-executive">Executive</option>
</select>
</div>
<div class="box-col">
<h4>Get PDF</h4>
<button class="export-pdf k-button" onclick="getPDF('.pdf-page')">Export</button>
</div>
</div>
<div class="page-container hidden-on-narrow">
<div class="pdf-page size-a4">
<div class="inner-page">
<!-- <div class="pdf-header">
<h2>履歴書</h2>
</div>
<div class="pdf-footer">
<p>
Blauer See Delikatessen<br />
Lützowplatz 456<br />
Berlin, Germany, 10785
</p>
</div> -->
<h2>履歴書</h2>
<table style="width: 100%; border-collapse: collapse;" border="2">
<tbody>
<tr style="height: 21px;">
<td style="width: 12.7294%; height: 21px;"><strong>ふりがな</strong></td>
<td style="width: 46.6328%; height: 21px; text-align: center;">NAME KANA</td>
<td style="width: 8.98617%; height: 42px; text-align: center;" rowspan="2">男</td>
<td style="width: 47.961%; text-align: center; height: 63px;" rowspan="3">
<img src="e3f34de992ae4267f272550a5935447f.jpg" alt="" width="90" height="100" />
</td>
</tr>
<tr style="height: 21px;">
<td style="width: 12.7294%; height: 21px;"><strong>氏 名</strong></td>
<td style="width: 46.6328%; height: 21px; text-align: center;">NAME</td>
</tr>
<tr style="height: 21px;">
<td style="width: 12.7294%; height: 21px;"><strong>生年月日</strong></td>
<td style="height: 21px; text-align: right; width: 55.619%;" colspan="2">
YYYY年MM月DD日生（満XX歳）</td>
</tr>
<tr style="height: 21px;">
<td style="width: 68.3484%; height: 42px; vertical-align: top;" colspan="3" rowspan="2">
<p><strong>現住所</strong> （〒0000000）</p>
<p>東京都港区六本木住友不動産六本木グランドタワー(22階 )A113</p>
</td>
<td style="width: 47.961%; text-align: left; height: 21px;">
<p><strong>電話</strong></p>
<p>090-1234-5678</p>
</td>
</tr>
<tr style="height: 21px;">
<td style="width: 47.961%; text-align: left; height: 21px;">
<p><strong>E-mail</strong></p>
<p>csnguyen@sk-global.biz</p>
</td>
</tr>
</tbody>
</table>
<p></p>
<table border="2" style="width: 100%; border-collapse: collapse;">
<tbody>
<tr style="height: 21px;">
<td style="width: 7.76078%; height: 21px; text-align: center;"><strong>年</strong></td>
<td style="width: 5.59791%; height: 21px; text-align: center;"><strong>月</strong></td>
<td style="width: 86.6412%; height: 21px; text-align: center;"><strong>学歴</strong></td>
</tr>
<tr>
<td style="text-align: center;">2002</td>
<td style="text-align: center;">6</td>
<td>ABC University</td>
</tr>
<tr>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: right;">以上</td>
</tr>
</tbody>
</table>
<p></p>
<table border="2" style="width: 100%; border-collapse: collapse;">
<tbody>
<tr style="height: 21px;">
<td style="width: 7.76078%; height: 21px; text-align: center;"><strong>年</strong></td>
<td style="width: 5.59791%; height: 21px; text-align: center;"><strong>月</strong></td>
<td style="width: 86.6412%; height: 21px; text-align: center;"><strong>職歴</strong></td>
</tr>
</tbody>
</table>
<p></p>
<table border="2" style="width: 100%; border-collapse: collapse;">
<tbody>
<tr style="height: 21px;">
<td style="width: 7.76078%; height: 21px; text-align: center;"><strong>年</strong></td>
<td style="width: 5.59791%; height: 21px; text-align: center;"><strong>月</strong></td>
<td style="width: 86.6412%; height: 21px; text-align: center;"><strong>免許・資格</strong>
</td>
</tr>
<tr>
<td style="text-align: center;">2002</td>
<td style="text-align: center;">7</td>
<td>医師</td>
</tr>
<tr>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: right;">以上</td>
</tr>
</tbody>
</table>
<p></p>
<table border="2" style="width: 100%; border-collapse: collapse;">
<tbody>
<tr style="height: 21px;">
<td style="width: 7.76078%; height: 21px;" colspan="3">
<p><strong>自己PR</strong></p>
<p>I'm superman</p>
</td>
</tr>
<tr style="height: 22px;">
<td style="height: 10px; vertical-align: top; width: 28.6731%;">
<p><strong>通勤時間</strong></p>
信越本線黒姫駅 徒歩10分
</td>
<td style="height: 10px; vertical-align: top; width: 49.9428%;">
<p><strong>扶養家族（配偶者を除く）</strong></p>
<p>2人</p>
</td>
<td style="height: 10px; vertical-align: top; width: 21.2397%;">
<p><strong>配偶者</strong></p>
<p>有</p>
</td>
</tr>
</tbody>
</table>
<p></p>
<table border="2" style="width: 100%; border-collapse: collapse;">
<tbody>
<tr style="height: 21px;">
<td style="width: 7.76078%; height: 21px;" colspan="3">
<p><strong>本人希望記入欄（特に待遇・職種・勤務時間・その他についての希望などがあれば記入）</strong></p>
<p>勤務地:福井県あわら市 岩手県久慈市</p>
<p>勤務形態:正職員 年収:8880000円</p>
<p>こだわり条件:土日祝休み 新卒可 車通勤可</p>
</td>
</tr>
</tbody>
</table>
<p></p>
</div>
</div>
</div>
<div class="responsive-message"></div>
<style>
/*
Use the DejaVu Sans font for display and embedding in the PDF file.
The standard PDF fonts have no support for Unicode characters.
*/
@font-face {
font-family: "HonyaJi-Re";
src: url(HonyaJi-Re.ttf) format("truetype");
}
.pdf-page {
font-family: "HonyaJi-Re";
}
</style>
<script>
// Import DejaVu Sans font for embedding
// NOTE: Only required if the Kendo UI stylesheets are loaded
// from a different origin, e.g. cdn.kendostatic.com
kendo.pdf.defineFont({
"HonyaJi-Re": "HonyaJi-Re.ttf",
"HonyaJi-Re|Bold": "HonyaJi-Re.ttf",
"HonyaJi-Re|Bold|Italic": "HonyaJi-Re.ttf",
"HonyaJi-Re|Italic": "HonyaJi-Re.ttf",
});
</script>
<script>
function getPDF(selector) {
kendo.drawing.drawDOM($(selector), {
paperSize: $('.k-input')[0].innerText,
// margin: "2cm"
})
.then(function (group) {
// Render the result as a PDF file
return kendo.drawing.exportPDF(group, {
paperSize: $('.k-input')[0].innerText,
multiPage: true,
// margin: "2cm"
});
})
.done(function (data) {
var iframe = document.createElement('iframe');
iframe.setAttribute('style', 'position:absolute;right:0; top:0; bottom:0; height:100%; width:700px');
document.body.appendChild(iframe);
iframe.src = data
// Save the PDF file
// kendo.saveAs({
// dataURI: data,
// fileName: "HR-Dashboard.pdf",
// proxyURL: "https://demos.telerik.com/kendo-ui/service/export"
// });
});
}
$(document).ready(function () {
$("#paper").kendoDropDownList({
change: function () {
$(".pdf-page")
.removeClass("size-a4")
.removeClass("size-letter")
.removeClass("size-executive")
.removeClass("size-a3")
.removeClass("size-a5")
.addClass(this.value());
}
});
});
</script>
<style>
.pdf-page {
position: relative;
margin: 0 auto;
padding: .4in .3in;
color: #333;
background-color: #fff;
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .3);
box-sizing: border-box;
}
.pdf-header {
padding-bottom: .2in;
margin-bottom: .3in;
border-bottom: 1px solid #e5e5e5;
}
.invoice-number {
padding-top: .1in;
float: right;
}
.pdf-footer {
position: absolute;
bottom: .25in;
left: .3in;
right: .3in;
padding-top: 0.05in;
border-top: 1px solid #e5e5e5;
font-size: 0.9em;
text-align: left;
color: #787878;
}
.addresses {
font-size: 12px;
}
.addresses:after {
display: block;
content: "";
clear: both;
}
.for {
float: left;
}
.from {
float: right;
}
.addresses p {
color: #787878;
padding: .05in 0;
border-top: 1px solid #e5e5e5;
}
.addresses p:first-of-type {
border-top: 0;
}
.pdf-body {
margin-top: .3in;
}
.company-logo {
font-size: 1.8em;
font-weight: bold;
color: #3aabf0;
}
.signature {
padding-top: .3in;
}
/* Dimensions other than px and em should be divided by 1.33 for the proper PDF output */
.size-a4 {
width: 6.2in;
/* height: 8.7in; */
}
.size-a3 {
width: 7.2in;
/* height: 8.7in; */
}
.size-a5 {
width: 5.2in;
/* height: 8.7in; */
}
.size-letter {
width: 6.3in;
/* height: 8.2in; */
}
.size-executive {
width: 5.4in;
/* height: 7.8in; */
font-size: 12px;
}
.size-executive .pdf-header {
margin-bottom: .1in;
}
</style>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment