Obter um div numa página HTML como pdf usando o javascript

Tenho um div de conteúdo com o id como "conteúdo". In the content div I have some graphs and some tables. Eu quero baixar esse div como um pdf quando o usuário clicar no botão de download. Existe uma maneira de fazer isso usando javascript ou jQuery?

Author: Midhun Mathew, 2013-06-25
Source

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');
});
 84
Author: ilyes kooli, 2018-09-18 08:06:42

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?

 1
Author: Baseleus, 2017-05-23 12:34:47

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.

 1
Author: Jeevan, 2013-06-25 09:20:29

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;

 

 1
Author: DevZer0, 2015-12-30 13:20:02
Sim, é possível capturar o div como PDFs no JS. Pode verificar a solução fornecida por https://grabz.it . eles têm uma API JavaScript agradável e limpa que lhe permitirá capturar o conteúdo de um único elemento HTML, como um div ou um span.

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.

Só isso. Agora, quando a página é carregada uma imagem screenshot será agora criado no mesmo local que a tag script, que irá conter todo o conteúdo dos recursos div e nada mais.

As outras configurações e personalizações que poderá fazer ao mecanismo de captura de ecrã div; por favor verifique aqui

 0
Author: Stas, 2017-07-01 18:53:39