tabla - Exportar página HTML a PDF al hacer clic en el usuario con JavaScript
jquery pdf generator (1)
Cuando el usuario hace clic en el botón GeneratePDF, necesito exportar la página html a un archivo PDF. Estoy exportando con éxito una página HTML a un archivo PDF, pero solo con el primer clic puedo descargar datos en PDF, pero desde el segundo clic no puedo descargar los datos a un archivo PDF. No estoy seguro de dónde me equivoqué en el código.
Por favor revisa el código aquí:
$(function() {
var doc = new jsPDF();
var specialElementHandlers = {
''#editor'': function(element, renderer) {
return true;
}
};
$(''#cmd'').click(function() {
doc.fromHTML($(''#target'').html(), 15, 15, {
''width'': 170,
''elementHandlers'': specialElementHandlers
});
doc.save(''sample-file.pdf'');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0-beta.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.1.135/jspdf.min.js"></script>
<script type="text/javascript" src="http://cdn.uriit.ru/jsPDF/libs/adler32cs.js/adler32cs.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js
"></script>
<script type="text/javascript" src="libs/Blob.js/BlobBuilder.js"></script>
<script type="text/javascript" src="http://cdn.immex1.com/js/jspdf/plugins/jspdf.plugin.addimage.js"></script>
<script type="text/javascript" src="http://cdn.immex1.com/js/jspdf/plugins/jspdf.plugin.standard_fonts_metrics.js"></script>
<script type="text/javascript" src="http://cdn.immex1.com/js/jspdf/plugins/jspdf.plugin.split_text_to_size.js"></script>
<script type="text/javascript" src="http://cdn.immex1.com/js/jspdf/plugins/jspdf.plugin.from_html.js"></script>
<script type="text/javascript" src="js/basic.js"></script>
<body id="target">
<div id="content">
<h3>Hello, this is a H3 tag</h3>
<a class="upload">Upload to Imgur</a>
<h2>this is <b>bold</b> <span style="color:red">red</span></h2>
<p>Feedback form with screenshot This script allows you to create feedback forms which include a screenshot, created on the clients browser, along with the form. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation
as it does not make an actual screenshot, but builds the screenshot based on the information available on the page. How does it work? The script is based on the html2canvas library, which renders the current page as a canvas image, by reading the
DOM and the different styles applied to the elements. This script adds the options for the user to draw elements on top of that image, such as mark points of interest on the image along with the feedback they send. It does not require any rendering
from the server, as the whole image is created on the clients browser. No plugins, no flash, no interaction needed from the server, just pure JavaScript! Browser compatibility Firefox 3.5+ Newer versions of Google Chrome, Safari & Opera IE9
</p>
</div>
<button id="cmd">generate PDF</button>
</body>
</html>
Esto se debe a que define su variable "doc" fuera de su evento de clic. La primera vez que hace clic en el botón, la variable doc contiene un nuevo objeto jsPDF. Pero cuando haces clic por segunda vez, esta variable ya no se puede usar de la misma manera. Como ya está definido y usado la vez anterior.
cambiarlo a:
$(function () {
var specialElementHandlers = {
''#editor'': function (element,renderer) {
return true;
}
};
$(''#cmd'').click(function () {
var doc = new jsPDF();
doc.fromHTML(
$(''#target'').html(), 15, 15,
{ ''width'': 170, ''elementHandlers'': specialElementHandlers },
function(){ doc.save(''sample-file.pdf''); }
);
});
});
y funcionará