165 lines
8.1 KiB
HTML
Executable File
165 lines
8.1 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="en" dir="ltr">
|
|
<head>
|
|
<title>JSReports - Tests</title>
|
|
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
|
<meta charset="utf-8" />
|
|
|
|
<link type="text/css" rel="stylesheet" data-language="CSS3" href="https://cdn.k3y.pw/css/fonts/local/Roboto.css" data-crossorigin="anonymous" charset="utf-8" />
|
|
|
|
<script data-type="text/javascript" data-language="JavaScript 1.8.5" src="/data/html2canvas.min.js" data-crossorigin="anonymous" charset="utf-8"></script>
|
|
<script data-type="text/javascript" data-language="JavaScript 1.8.5" src="/data/jspdf.umd.min.js" data-crossorigin="anonymous" charset="utf-8"></script>
|
|
<script data-type="text/javascript" data-language="JavaScript 1.8.5" src="/data/purify.min.js" data-map="/data/purify.min.js.map" data-crossorigin="anonymous" charset="utf-8"></script>
|
|
<script data-type="text/javascript" data-language="JavaScript 1.8.5" src="/data/html-docx.js" data-crossorigin="anonymous" charset="utf-8"></script>
|
|
<script data-type="text/javascript" data-language="ECMAScript 2015" src="/ecma/JSReports.ecma.js" data-crossorigin="anonymous" charset="utf-8"></script>
|
|
|
|
<script data-type="text/javascript" data-language="ECMAScript 2015" charset="utf-8">
|
|
|
|
const grid_a = {
|
|
type : "grid",
|
|
header : ["Cabecera A", "Cabecera B", "Cabecera C", "Cabecera D"],
|
|
body : []
|
|
};
|
|
let format = window.location.hash.substr(1).toLowerCase();
|
|
|
|
!["pdf", "doc"].includes(format) && (format = "doc");
|
|
|
|
for(let i = 0; i < 100; i ++){
|
|
grid_a.body[i] = [];
|
|
for(let j = 0; j < 4; j ++)
|
|
grid_a.body[i].push(Math.random() * 10 ** 8 >> 0);
|
|
};
|
|
|
|
["pdf", "doc"].includes(format) && (js_reports = new JSReports({
|
|
proxy : "https://proxycors.k3y.pw/api/DHkwPBhzp78Gz8g3BmG4VFnDgnt5kU9J6XQPjWMGDKwjr6s3f9nV7545B/{url}"
|
|
})).on_ready(() => js_reports.create({
|
|
header : (`
|
|
<table class="header-box">
|
|
<tbody>
|
|
<tr class="row-1">
|
|
<td rowspan="2" class="logo"><img src="https://kyman.k3y.pw/images/KyMAN.png" /></td>
|
|
<td class="entity">Entity</td>
|
|
</tr>
|
|
<tr class="row-2">
|
|
<td class="title">Title</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
`),
|
|
body : (`
|
|
<h1>Funciona xD</h1>
|
|
<p><a href="https://kyman.k3y.pw" target="_blank" title="KyMAN"><img src="https://kyman.k3y.pw/images/KyMAN.png" /></a></p>
|
|
<p>{grid_a}</p>
|
|
<p>Probando un <a href="https://kyman.k3y.pw" target="_blank" title="KyMAN">Link</a>.</p>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Cabecera A</th>
|
|
<th>Cabecera B</th>
|
|
<th>Cabecera C</th>
|
|
<th>Cabecera D</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td>Jaja 1</td><td>Jaja 2</td><td>Jaja 3</td><td>Jaja 4</td></tr>
|
|
<tr><td>Jaja 1</td><td>Jaja 2</td><td>Jaja 3</td><td>Jaja 4</td></tr>
|
|
<tr><td>Jaja 1</td><td>Jaja 2</td><td>Jaja 3</td><td>Jaja 4</td></tr>
|
|
<tr><td>Jaja 1</td><td>Jaja 2</td><td>Jaja 3</td><td>Jaja 4</td></tr>
|
|
<tr><td>Jaja 1</td><td>Jaja 2</td><td>Jaja 3</td><td>Jaja 4</td></tr>
|
|
<tr><td>Jaja 1</td><td>Jaja 2</td><td>Jaja 3</td><td>Jaja 4</td></tr>
|
|
<tr><td>Jaja 1</td><td>Jaja 2</td><td>Jaja 3</td><td>Jaja 4</td></tr>
|
|
<tr><td>Jaja 1</td><td>Jaja 2</td><td>Jaja 3</td><td>Jaja 4</td></tr>
|
|
<tr><td>Jaja 1</td><td>Jaja 2</td><td>Jaja 3</td><td>Jaja 4</td></tr>
|
|
<tr><td>Jaja 1</td><td>Jaja 2</td><td>Jaja 3</td><td>Jaja 4</td></tr>
|
|
<tr><td>Jaja 1</td><td>Jaja 2</td><td>Jaja 3</td><td>Jaja 4</td></tr>
|
|
<tr><td>Jaja 1</td><td>Jaja 2</td><td>Jaja 3</td><td>Jaja 4</td></tr>
|
|
<tr><td>Jaja 1</td><td>Jaja 2</td><td>Jaja 3</td><td>Jaja 4</td></tr>
|
|
</tbody>
|
|
</table>
|
|
<p>Otro texto xD</p>
|
|
{list_a}
|
|
`),
|
|
footer : (`
|
|
<table class="footer-box">
|
|
<tbody>
|
|
<tr>
|
|
<td class="page">{page} / {pages}</td>
|
|
<td class="date">{date}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
`),
|
|
// body : (`
|
|
// <h1>FUNCIONA xD</h1>
|
|
// <p><a href="https://kyman.k3y.pw" target="_blank" title="KyMAN"><img src="https://kyman.k3y.pw/images/KyMAN.png" /></a></p>
|
|
// `),
|
|
// footer : (`<p>Esto es el Footer xD</p>`),
|
|
css : (`
|
|
h1{
|
|
color : #F00;
|
|
text-align : center;
|
|
}
|
|
.body img{
|
|
width : 50%;
|
|
height : auto;
|
|
}
|
|
table{width : 100%;}
|
|
.grid_a{padding-top : ` + js_reports.to_pixels(5) + `px;}
|
|
ol{list-style-type : upper-roman;}
|
|
ul{list-style-type : circle;}
|
|
.header-box img{
|
|
width : auto;
|
|
height : ` + js_reports.to_pixels(30) + `px;
|
|
margin-right : 1em;
|
|
vertical-align : middle;
|
|
}
|
|
.header-box .logo{width : 0px;}
|
|
.header-box{border-collapse : collapse;}
|
|
.header-box td{padding : 0px;}
|
|
.header-box .entity{
|
|
vertical-align : bottom;
|
|
font-weight : 400;
|
|
font-size : ` + js_reports.to_pixels(6) + `px;
|
|
}
|
|
.header-box .title{
|
|
vertical-align : top;
|
|
font-weight : 900;
|
|
font-size : ` + js_reports.to_pixels(10) + `px;
|
|
}
|
|
.entity,h1{font-family : Roboto;}
|
|
.grid_a thead>tr>:nth-child(1){width : 10%}
|
|
.grid_a thead>tr>:nth-child(2){width : 40%}
|
|
`),
|
|
type : format,
|
|
margin_bottom : 20,
|
|
variables : {
|
|
grid_a : grid_a,
|
|
list_a : {type : "list", mode : "ordered", start : 12, items : [
|
|
"cosa 1",
|
|
"cosa 2",
|
|
"cosa 3",
|
|
"...",
|
|
["jojo", {mode : "unordered", items : [
|
|
"pasa A",
|
|
["pasa B", {items : [
|
|
"otro xD"
|
|
]}],
|
|
"pasa C"
|
|
]}],
|
|
"juas",
|
|
"jiji"
|
|
]}
|
|
},
|
|
header_height : 30,
|
|
footer_height : 10
|
|
}, pdf => {
|
|
console.log(pdf);
|
|
js_reports.download(pdf, "prueba." + format);
|
|
}));
|
|
|
|
</script>
|
|
|
|
</head>
|
|
<body></body>
|
|
</html>
|