Obter um div numa página HTML como pdf usando o javascript
5 answers
Podes fazê-lo usando jsPDF
HTML:
<div id="content">
<h3>Hello, this is a H3 tag</h3>
<p>A paragraph</p>
</div>
<div id="editor"></div>
<button id="cmd">generate PDF</button>
JavaScript:
var doc = new jsPDF();
var specialElementHandlers = {
'#editor': function (element, renderer) {
return true;
}
};
$('#cmd').click(function () {
doc.fromHTML($('#content').html(), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
doc.save('sample-file.pdf');
});
Não existe tal mecanismo em jQuery, mas você pode usar plugins como http://www.webresourcesdepot.com/create-pdf-files-with-javascript-jspdf/
Verifique também esta publicação é possível gerar PDF usando jQuery?
AFAIK não há nenhuma função jQuery nativa que faça isso. A melhor opção seria processar a conversão no servidor. Como você faz isso depende do idioma que você está usando (. net, php etc.). Você pode passar o conteúdo do div para a função que lida com a conversão, que retornaria um pdf para o usuário.
A sua solução requer algum método ajax para passar o html para um servidor back-end que tem uma facilidade html para pdf e, em seguida, devolver a saída de pdf gerada de volta para o navegador.
Primeiro a configurar o código do lado do cliente, vamos configurar o código jquery como
var options = {
"url": "/pdf/generate",
"data": "data=" + $("#content").html(),
"type": "post",
}
$.ajax(options)
Depois interceptar os dados do programa de geração html2pdf como se segue
$html = $_POST['data'];
$pdf = html2pdf($html);
header("Content-Type: application/pdf"); //check this is the proper header for pdf
header("Content-Disposition: attachment; filename='some.pdf';");
echo $pdf;
Por isso, use-o de que necessitará e app+key e o livre SDK. A sua utilização é a seguinte:
Digamos que tem um HTML:<div id="features">
<h4>Acme Camera</h4>
<label>Price</label>$399<br />
<label>Rating</label>4.5 out of 5
</div>
<p>Cras ut velit sed purus porttitor aliquam. Nulla tristique magna ac libero tempor, ac vestibulum felisvulput ate. Nam ut velit eget
risus porttitor tristique at ac diam. Sed nisi risus, rutrum a metus suscipit, euismod tristique nulla. Etiam venenatis rutrum risus at
blandit. In hac habitasse platea dictumst. Suspendisse potenti. Phasellus eget vehicula felis.</p>
Para capturar o que está sob o ID de recursos você vai necessidade de:
//add the sdk
<script type="text/javascript" src="grabzit.min.js"></script>
<script type="text/javascript">
//login with your key and secret.
GrabzIt("KEY", "SECRET").ConvertURL("http://www.example.com/my-page.html",
{"target": "#features", "format": "pdf"}).Create();
</script>
Tem de substituir o http://www.example.com/my-page.html
pelo seu url de destino e #feature
pelo seu selector de CSS.
As outras configurações e personalizações que poderá fazer ao mecanismo de captura de ecrã div; por favor verifique aqui