0

Estoy intentado crear una funcion que me permita descargar un archivo PDF directamente al clickear. No tengo experiencia mucha experiencia en JS pero intente crear dicha funcion, lo que tengo hasta ahora es esto. Cualquier ayuda es bienvenida. Muchas gracias!

    <script>
    $(function () { 
        $('#download').click(function () { 
            var options = {}; 
            var pdf = new jsPDF('p', 'pt', 'a4'); 
            pdf.addHTML($("#pdf"), 15, 15, options, function () { 
                pdf.save('documentoPDF1.pdf'); }); }); });
</script>
2
  • Si tienes la ruta en una etiqueta <a> puedes agregar el atributo download
    – Christian
    Commented el 24 may. 2021 a las 1:28
  • El problema que si agrego download no realiza ninguna acción porque es necesario que el documento este metido en algún server. Por si solo no tiene capacidad de descargarlo.
    – nicocarro
    Commented el 24 may. 2021 a las 2:55

2 respuestas 2

1

Desconociendo la versión que usas de jsPDF, en las anteriores parece que necesitas también la librería html2canvas para que funcione.

Comenzando con los errores de tu código actual:

pdf.addHTML($("#pdf") ... );

El método .addHTML necesita que el primer parámetro sea un elemento HTML o una cadena con el código correspondiente, pero $("#pdf") devuelve una instancia de jQuery; en todo caso, se debe especificar el índice cero para devolver el primer elemento HTML que coincide con el selector: $("#pdf")[0]

El segundo parámetro debe ser solo la función a ejecutar cuando se genere el PDF o, en todo caso, para versiones más recientes, se debe proporcionar un objeto con las opciones, del tipo:

{
    callback: function(instanciaJsPDF) { /* Código */ },
    x: 15,
    y: 15
}

Con versiones antiguas, esto debería funcionar

HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>

<body>
  <div id="pdf">
      <p>Contenido del PDF</p>
  </div>
</body>

Javascript:

document.addEventListener('DOMContentLoaded', function() {
    let pdf = new jsPDF('p', 'pt', 'a4');
    pdf.addHTML(document.querySelector('#pdf'), function() {
        pdf.save('documentoPDF1.pdf');
    });
});

Notas:

  • Omití la librería jQuery, porque no es necesaria para este caso
  • Puedes ver un ejemplo funcional en jsfiddle
  • Para versiones más recientes, te recomiendo leer la documentación y adaptes el código a lo que requieres, quedando más o menos así:
document.addEventListener('DOMContentLoaded', function() {
    let pdf = new jsPDF('p', 'pt', 'a4');
    pdf.html(document.body, {
        callback: function (pdf) {
            pdf.save('documentoPDF1.pdf');
        },
        x: 10,
        y: 10
    });
});
0

Puede ser que tú función global no sea correcto. Cambia por: $(document).ready(function() {}). Si no es eso, prueba así:

$(document).ready(function() {

 $("a")on("click", function() {
 
  $(this).attr({target: '_blank', href : 'document.pdf'});

 
 })

})

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.