Descargue un div en una página HTML como pdf usando javascript

Tengo un div de contenido con la identificación como "contenido". En el div de contenido tengo algunos gráficos y algunas tablas. Quiero descargar ese div como pdf cuando el usuario hace clic en el botón de descarga. ¿Hay alguna forma de hacerlo usando javascript o jQuery?

Puedes hacerlo 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');
});

El contenido dentro de un <div class='html-content'>....</div>se puede descargar como pdf con estilos usando jspdf y html2canvas .

Necesita consultar ambas bibliotecas js,

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>

Luego llame a la siguiente función,

//Create PDf from HTML...
function CreatePDFfromHTML() {
    var HTML_Width = $(".html-content").width();
    var HTML_Height = $(".html-content").height();
    var top_left_margin = 15;
    var PDF_Width = HTML_Width + (top_left_margin * 2);
    var PDF_Height = (PDF_Width * 1.5) + (top_left_margin * 2);
    var canvas_image_width = HTML_Width;
    var canvas_image_height = HTML_Height;

    var totalPDFPages = Math.ceil(HTML_Height / PDF_Height) - 1;

    html2canvas($(".html-content")[0]).then(function (canvas) {
        var imgData = canvas.toDataURL("image/jpeg", 1.0);
        var pdf = new jsPDF('p', 'pt', [PDF_Width, PDF_Height]);
        pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin, canvas_image_width, canvas_image_height);
        for (var i = 1; i <= totalPDFPages; i++) { 
            pdf.addPage(PDF_Width, PDF_Height);
            pdf.addImage(imgData, 'JPG', top_left_margin, -(PDF_Height*i)+(top_left_margin*4),canvas_image_width,canvas_image_height);
        }
        pdf.save("Your_PDF_Name.pdf");
        $(".html-content").hide();
    });
}

Ref: generación de pdf a partir de html canvas y jspdf .

Puede que esto ayude a alguien.

Su solución requiere algún método ajax para pasar el html a un servidor back-end que tiene una función de html a pdf y luego devolver la salida en pdf generada al navegador.

Primero configurando el código del lado del cliente, configuraremos el código jquery como

   var options = {
            "url": "/pdf/generate",
            "data": "data=" + $("#content").html(),
            "type": "post",
        }
   $.ajax(options)

Luego intercepte los datos del script de generación html2pdf de la siguiente manera

   $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;

AFAIK, no hay una función nativa de jquery que haga esto. La mejor opción sería procesar la conversión en el servidor. La forma de hacerlo depende del idioma que esté utilizando (.net, php, etc.). Puede pasar el contenido del div a la función que maneja la conversión, que devolvería un pdf al usuario.

Sí, es posible capturar div como PDF en JS. Puede consultar la solución proporcionada por https://grabz.it . Tienen una API de JavaScript agradable y limpia que le permitirá capturar el contenido de un solo elemento HTML, como un div o un intervalo.

Entonces, si lo usa, necesitará una aplicación + clave y el SDK gratuito . Su uso es el siguiente:

Digamos que tienes un 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 lo que está debajo de la identificación de características, necesitará:

//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>

Debe reemplazar el http://www.example.com/my-page.htmlcon su URL de destino y #featuresegún su selector de CSS.

Eso es todo. Ahora, cuando se cargue la página, se creará una captura de pantalla de imagen en la misma ubicación que la etiqueta de script, que contendrá todo el contenido de las características div y nada más.

Hay otra configuración y personalización que puede hacer con el mecanismo de captura de pantalla div, compruébelo aquí