Solución:
Está bien, me di cuenta de esto.
-
Necesitará html2canvas y pdfmake. NO necesita hacer ninguna inyección en su app.js para ninguno de los dos, solo incluya en las etiquetas de su script
-
En el div del que desea crear el PDF, agregue un nombre de identificación como el siguiente:
<div id="exportthis"> -
En su controlador angular, use la identificación del div en su llamada a html2canvas:
-
cambiar el lienzo a una imagen usando toDataURL ()
-
Luego, en su docDefinition para pdf, asigne la imagen al contenido.
-
El código completo en su controlador se verá así:
html2canvas(document.getElementById('exportthis'), { onrendered: function (canvas) { var data = canvas.toDataURL(); var docDefinition = { content: [{ image: data, width: 500, }] }; pdfMake.createPdf(docDefinition).download("Score_Details.pdf"); } });
Espero que esto ayude a alguien más. ¡Feliz codificación!
Sé que no es relevante para esta publicación, pero podría ayudar a otros a convertir HTML a PDF en el lado del cliente. Esta es una solución simple si usa kendo. También conserva el CSS (la mayoría de los casos).
var generatePDF = function() {
kendo.drawing.drawDOM($("#formConfirmation")).then(function(group) {
kendo.drawing.pdf.saveAs(group, "Converted PDF.pdf");
});
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>
</head>
<body>
<br/>
<button onclick="generatePDF()"><i></i> Save as PDF</button>
<br/>
<br/>
<div>
<div role="main">
<!-- Main jumbotron for a primary marketing message or call to action -->
<div>
<h1>Theme example</h1>
<p>This is a template showcasing the optional theme stylesheet included in Bootstrap. Use it as a starting point to create something more unique by building on or modifying it.</p>
</div>
<div>
<h1>Buttons</h1>
</div>
<p>
<button type="button">Default</button>
<button type="button">Primary</button>
<button type="button">Success</button>
<button type="button">Info</button>
<button type="button">Warning</button>
<button type="button">Danger</button>
<button type="button">Link</button>
</p>
<p>
<button type="button">Default</button>
<button type="button">Primary</button>
<button type="button">Success</button>
<button type="button">Info</button>
<button type="button">Warning</button>
<button type="button">Danger</button>
<button type="button">Link</button>
</p>
<p>
<button type="button">Default</button>
<button type="button">Primary</button>
<button type="button">Success</button>
<button type="button">Info</button>
<button type="button">Warning</button>
<button type="button">Danger</button>
<button type="button">Link</button>
</p>
<p>
<button type="button">Default</button>
<button type="button">Primary</button>
<button type="button">Success</button>
<button type="button">Info</button>
<button type="button">Warning</button>
<button type="button">Danger</button>
<button type="button">Link</button>
</p>
<div>
<h1>Tables</h1>
</div>
<div>
<div>
<table>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<div>
<table>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>@TwBootstrap</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<h1>Thumbnails</h1>
</div>
<img data-src="holder.js/200x200" alt="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera">
<div>
<h1>Labels</h1>
</div>
<h1>
<span>Default</span>
<span>Primary</span>
<span>Success</span>
<span>Info</span>
<span>Warning</span>
<span>Danger</span>
</h1>
<h2>
<span>Default</span>
<span>Primary</span>
<span>Success</span>
<span>Info</span>
<span>Warning</span>
<span>Danger</span>
</h2>
<h3>
<span>Default</span>
<span>Primary</span>
<span>Success</span>
<span>Info</span>
<span>Warning</span>
<span>Danger</span>
</h3>
<h4>
<span>Default</span>
<span>Primary</span>
<span>Success</span>
<span>Info</span>
<span>Warning</span>
<span>Danger</span>
</h4>
<h5>
<span>Default</span>
<span>Primary</span>
<span>Success</span>
<span>Info</span>
<span>Warning</span>
<span>Danger</span>
</h5>
<h6>
<span>Default</span>
<span>Primary</span>
<span>Success</span>
<span>Info</span>
<span>Warning</span>
<span>Danger</span>
</h6>
<p>
<span>Default</span>
<span>Primary</span>
<span>Success</span>
<span>Info</span>
<span>Warning</span>
<span>Danger</span>
</p>
<div>
<h1>Badges</h1>
</div>
<p>
<a href="#">Inbox <span>42</span></a>
</p>
<ul role="tablist">
<li role="presentation"><a href="#">Home <span>42</span></a>
</li>
<li role="presentation"><a href="#">Profile</a>
</li>
<li role="presentation"><a href="#">Messages <span>3</span></a>
</li>
</ul>
<div>
<h1>Dropdown menus</h1>
</div>
<div>
<a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span></span></a>
<ul aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li role="separator"></li>
<li><a href="#">Separated link</a>
</li>
</ul>
</div>
<div>
<h1>Navs</h1>
</div>
<ul role="tablist">
<li role="presentation"><a href="#">Home</a>
</li>
<li role="presentation"><a href="#">Profile</a>
</li>
<li role="presentation"><a href="#">Messages</a>
</li>
</ul>
<ul role="tablist">
<li role="presentation"><a href="#">Home</a>
</li>
<li role="presentation"><a href="#">Profile</a>
</li>
<li role="presentation"><a href="#">Messages</a>
</li>
</ul>
<div>
<h1>Navbars</h1>
</div>
<nav>
<div>
<div>
<button type="button" data-toggle="collapse" data-target=".navbar-collapse">
<span>Toggle navigation</span>
<span></span>
<span></span>
<span></span>
</button>
<a href="#">Project name</a>
</div>
<div>
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#about">About</a>
</li>
<li><a href="#contact">Contact</a>
</li>
<li>
<a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span></span></a>
<ul>
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li role="separator"></li>
<li>Nav header</li>
<li><a href="#">Separated link</a>
</li>
<li><a href="#">One more separated link</a>
</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<nav>
<div>
<div>
<button type="button" data-toggle="collapse" data-target=".navbar-collapse">
<span>Toggle navigation</span>
<span></span>
<span></span>
<span></span>
</button>
<a href="#">Project name</a>
</div>
<div>
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#about">About</a>
</li>
<li><a href="#contact">Contact</a>
</li>
<li>
<a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span></span></a>
<ul>
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li role="separator"></li>
<li>Nav header</li>
<li><a href="#">Separated link</a>
</li>
<li><a href="#">One more separated link</a>
</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<div>
<h1>Alerts</h1>
</div>
<div role="alert">
<strong>Well done!</strong> You successfully read this important alert message.
</div>
<div role="alert">
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
<div role="alert">
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
<div role="alert">
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
<div>
<h1>Progress bars</h1>
</div>
<div>
<div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"><span>60% Complete</span>
</div>
</div>
<div>
<div role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"><span>40% Complete (success)</span>
</div>
</div>
<div>
<div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"><span>20% Complete</span>
</div>
</div>
<div>
<div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"><span>60% Complete (warning)</span>
</div>
</div>
<div>
<div role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"><span>80% Complete (danger)</span>
</div>
</div>
<div>
<div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"><span>60% Complete</span>
</div>
</div>
<div>
<div><span>35% Complete (success)</span>
</div>
<div><span>20% Complete (warning)</span>
</div>
<div><span>10% Complete (danger)</span>
</div>
</div>
<div>
<h1>List groups</h1>
</div>
<div>
<div>
<ul>
<li>Cras justo odio</li>
<li>Dapibus ac facilisis in</li>
<li>Morbi leo risus</li>
<li>Porta ac consectetur ac</li>
<li>Vestibulum at eros</li>
</ul>
</div>
<!-- /.col-sm-4 -->
<div>
<div>
<a href="#">
Cras justo odio
</a>
<a href="#">Dapibus ac facilisis in</a>
<a href="#">Morbi leo risus</a>
<a href="#">Porta ac consectetur ac</a>
<a href="#">Vestibulum at eros</a>
</div>
</div>
<!-- /.col-sm-4 -->
<div>
<div>
<a href="#">
<h4>List group item heading</h4>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
<a href="#">
<h4>List group item heading</h4>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
<a href="#">
<h4>List group item heading</h4>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
</div>
</div>
<!-- /.col-sm-4 -->
</div>
<div>
<h1>Panels</h1>
</div>
<div>
<div>
<div>
<div>
<h3>Panel title</h3>
</div>
<div>
Panel content
</div>
</div>
<div>
<div>
<h3>Panel title</h3>
</div>
<div>
Panel content
</div>
</div>
</div>
<!-- /.col-sm-4 -->
<div>
<div>
<div>
<h3>Panel title</h3>
</div>
<div>
Panel content
</div>
</div>
<div>
<div>
<h3>Panel title</h3>
</div>
<div>
Panel content
</div>
</div>
</div>
<!-- /.col-sm-4 -->
<div>
<div>
<div>
<h3>Panel title</h3>
</div>
<div>
Panel content
</div>
</div>
<div>
<div>
<h3>Panel title</h3>
</div>
<div>
Panel content
</div>
</div>
</div>
<!-- /.col-sm-4 -->
</div>
</div>
</body>
</html>¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)