Skip to content

Instantly share code, notes, and snippets.

@PetrovStark
Last active July 6, 2018 16:02
Show Gist options
  • Save PetrovStark/c1164e96b2348e20610545447793a488 to your computer and use it in GitHub Desktop.
Save PetrovStark/c1164e96b2348e20610545447793a488 to your computer and use it in GitHub Desktop.
Passo a passo da implementação de um sistema JS que converte HTML puro (sem CSS) em PDF.
//COMO IMPLEMENTAR UM SISTEMA QUE CONVERTE HTML PURO EM PDF?
//1 - Defina onde o script irá começar a ler o HTML que será convertido e onde ele terminará
<div id="HTMLtoPDF"> //COMEÇO
<header>
<h1>AQUI MESMO!</h1>
<p>Adicione aqui o conteúdo que pretende converter para pdf.</p>
</header>
</div> //FIM
//2 - Crie o botão que irá chamar a função "HTMLtoPDF()"
<a onclick="HTMLtoPDF()" href="#">Baixar PDF</a>
//3 - Importe os seguintes scripts para seu código
// JSPDF (link para download: https://drive.google.com/file/d/0BwHqLHKAfVJeUGVDRmw1aWZCQUk/view )
// JQUERY (link para download: https://drive.google.com/file/d/0BwHqLHKAfVJeS0ZkbDV5NE9hM3M/view )
<script src="seu-path-para-arquivos-js/jspdf.js"></script>
<script src="seu-path-para-arquivos-js/jquery-2.1.3.js"></script>
//4 - Partindo para o JS
<script type="text/javascript">
function HTMLtoPDF(){
var pdf = new jsPDF('p', 'pt', 'letter');
source = $('#HTMLtoPDF')[0];
specialElementHandlers = {
'#bypassme': function(element, renderer){
return true
}
}
margins = {
top: 50,
left: 60,
width: 545
};
pdf.fromHTML(
source // HTML string or DOM elem ref.
, margins.left // x coord
, margins.top // y coord
, {
'width': margins.width // max width of content on PDF
, 'elementHandlers': specialElementHandlers
},
function (dispose) {
// dispose: object with X, Y of the last line add to the PDF
// this allow the insertion of new lines after html
pdf.save('html2pdf.pdf'); //NOME DO ARQUIVO PDF
}
)
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment