Gere pdf de HTML em div usando Javascript

Eu tenho o seguinte código html:

   

don't print this to pdf

print this to pdf

Tudo o que quero fazer é imprimir em pdf o que for encontrado no div com um id de “pdf”. Isso deve ser feito usando JavaScript. O documento “pdf” deve ser baixado automaticamente com um nome de arquivo de “foobar.pdf”

Eu tenho usado jspdf para fazer isso, mas a única function que tem é “texto”, que aceita apenas valores de seqüência de caracteres. Quero enviar HTML para jspdf, não para texto.

    O jsPDF é capaz de usar plugins. Para habilitá-lo para imprimir HTML, você deve include certos plugins e, portanto, tem que fazer o seguinte:

    1. Vá para https://github.com/MrRio/jsPDF e faça o download da versão mais recente.
    2. Inclua os seguintes scripts no seu projeto:
      • jspdf.js
      • jspdf.plugin.from_html.js
      • jspdf.plugin.split_text_to_size.js
      • jspdf.plugin.standard_fonts_metrics.js

    Se você quiser ignorar certos elementos, você deve marcá-los com um ID, que você pode então ignorar em um manipulador de elemento especial do jsPDF. Portanto, seu HTML deve ficar assim:

        

    don't print this to pdf

    print this to pdf

    Então você usa o seguinte código JavaScript para abrir o PDF criado em um PopUp:

     var doc = new jsPDF(); var elementHandler = { '#ignorePDF': function (element, renderer) { return true; } }; var source = window.document.getElementsByTagName("body")[0]; doc.fromHTML( source, 15, 15, { 'width': 180,'elementHandlers': elementHandler }); doc.output("dataurlnewwindow"); 

    Para mim, isso criou um PDF agradável e ordenado que incluía apenas a linha ‘print this to pdf’.

    Observe que os manipuladores de elementos especiais lidam apenas com IDs na versão atual, que também é declarada em um problema do GitHub . Afirma:

    Como a correspondência é feita em todos os elementos da tree de nós, meu desejo era torná-lo o mais rápido possível. Nesse caso, significava que “Somente identificações de elemento são correspondidas”. As IDs de elemento ainda são feitas no estilo “#id” do jQuery, mas isso não significa que todos os seletores do jQuery são suportados.

    Portanto, replace ‘#ignorePDF’ por seletores de class como ‘.ignorePDF’ não funcionou para mim. Em vez disso, você terá que adicionar o mesmo manipulador para cada elemento, que você deseja ignorar como:

     var elementHandler = { '#ignoreElement': function (element, renderer) { return true; }, '#anotherIdToBeIgnored': function (element, renderer) { return true; } }; 

    A partir dos exemplos , afirma-se também que é possível selecionar tags como ‘a’ ou ‘li’. Isso pode ser um pouco irrestrito para a maioria dos casos, no entanto:

    Nós suportamos manipuladores de elementos especiais. Registre-os com o seletor de ID no estilo jQuery para o ID ou o nome do nó. (“#iAmID”, “div”, “span” etc.) Não há suporte para nenhum outro tipo de seletor (class, composto) neste momento.

    Uma coisa muito importante para adicionar é que você perde todas as suas informações de estilo (CSS). Felizmente, o jsPDF é capaz de formatar bem h1, h2, h3 etc., o que foi suficiente para os meus propósitos. Além disso, só imprimirá texto em nós de texto, o que significa que não imprimirá os valores de textareas e similares. Exemplo:

      
    • Print me!

    Essa é a solução simples. Isso funciona para mim.Você pode usar o conceito de impressão javascript e simples salvar isso como pdf.

            
    This content needs to be printed.

    Você pode usar o autoPrint () e definir a saída como ‘dataurlnewwindow’ assim:

     function printPDF() { var printDoc = new jsPDF(); printDoc.fromHTML($('#pdf').get(0), 10, 10, {'width': 180}); printDoc.autoPrint(); printDoc.output("dataurlnewwindow"); // this opens a new popup, after this the PDF opens the print window view but there are browser inconsistencies with how this is handled } 

    Como mencionado, você deve usar o jsPDF e o html2canvas . Eu também encontrei uma function dentro de questões do jsPDF que divide automaticamente o seu pdf em várias páginas ( fonts )

     function makePDF() { var quotes = document.getElementById('container-fluid'); html2canvas(quotes, { onrendered: function(canvas) { //! MAKE YOUR PDF var pdf = new jsPDF('p', 'pt', 'letter'); for (var i = 0; i <= quotes.clientHeight/980; i++) { //! This is all just html2canvas stuff var srcImg = canvas; var sX = 0; var sY = 980*i; // start 980 pixels down for every new page var sWidth = 900; var sHeight = 980; var dX = 0; var dY = 0; var dWidth = 900; var dHeight = 980; window.onePageCanvas = document.createElement("canvas"); onePageCanvas.setAttribute('width', 900); onePageCanvas.setAttribute('height', 980); var ctx = onePageCanvas.getContext('2d'); // details on this usage of this function: // https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images#Slicing ctx.drawImage(srcImg,sX,sY,sWidth,sHeight,dX,dY,dWidth,dHeight); // document.body.appendChild(canvas); var canvasDataURL = onePageCanvas.toDataURL("image/png", 1.0); var width = onePageCanvas.width; var height = onePageCanvas.clientHeight; //! If we're on anything other than the first page, // add another page if (i > 0) { pdf.addPage(612, 791); //8.5" x 11" in pts (in*72) } //! now we declare that we're working on that page pdf.setPage(i+1); //! now we add content to that page! pdf.addImage(canvasDataURL, 'PNG', 20, 40, (width*.62), (height*.62)); } //! after the for loop is finished running, we save the pdf. pdf.save('test.pdf'); } }); } 

    Se você deseja exportar uma tabela, pode dar uma olhada nesta amostra de exportação fornecida pelo widget Grade da UI do Shield.

    Isso é feito estendendo a configuração assim:

     ... exportOptions: { proxy: "/filesaver/save", pdf: { fileName: "shieldui-export", author: "John Smith", dataSource: { data: gridData }, readDataSource: true, header: { cells: [ { field: "id", title: "ID", width: 50 }, { field: "name", title: "Person Name", width: 100 }, { field: "company", title: "Company Name", width: 100 }, { field: "email", title: "Email Address" } ] } } } ... 

    se você precisa baixar pdf de uma página específica, basta adicionar um botão como este

     

    Print

    use window.print () para imprimir toda a sua página e não apenas um div

    Consegui que o jsPDF imprimisse tabelas criadas dinamicamente a partir de uma div.

     $(document).ready(function() { $("#pdfDiv").click(function() { var pdf = new jsPDF('p','pt','letter'); var specialElementHandlers = { '#rentalListCan': function (element, renderer) { return true; } }; pdf.addHTML($('#rentalListCan').first(), function() { pdf.save("caravan.pdf"); }); }); }); 

    Funciona muito bem com o Chrome e Firefox … formatação é toda explodida no IE.

    Eu também incluí estes:

                  

    Para capturar div como PDF, você pode usar a solução https://grabz.it . Ele tem uma API JavaScript que é fácil e flexível e permite capturar o conteúdo de um único elemento HTML, como div ou span

    Para implementá-lo, você precisará primeiro obter uma chave de app e um segredo e baixar o SDK (gratuito).

    E agora um exemplo.

    Vamos dizer que você tem o HTML:

     

    Acme Camera

    $399
    4.5 out of 5

    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.

    Para capturar o que está sob o id de resources, você precisará:

     //add the sdk   

    Por favor, note o target: #feature . #feature é seu seletor de CSS, como no exemplo anterior. Agora, quando a página for carregada, uma captura de canvas de imagem será criada no mesmo local da tag de script, que conterá todo o conteúdo dos resources div e nada mais.

    Existem outras configurações e customizações que você pode fazer no mecanismo de captura de canvas div, por favor, confira aqui

    • Sem depenencies, puro JS

    Isso me serviu por anos agora:

     export default function printDiv({divId, title}) { let mywindow = window.open('', 'PRINT', 'height=650,width=900,top=100,left=150'); mywindow.document.write(`${title}`); mywindow.document.write(''); mywindow.document.write(document.getElementById(divId).innerHTML); mywindow.document.write(''); mywindow.document.close(); // necessary for IE >= 10 mywindow.focus(); // necessary for IE >= 10*/ mywindow.print(); mywindow.close(); return true; }