0

Hola a todos les quiero mostrar un pequeño problema, que consiste es que mi html cuando lo quiero descargar no me permite y me sale que tengo un error, cuando le agrego otro div si funciona pero se pierda la resolucion.

Aqui el codigo que no me permite descargar: https://jsfiddle.net/ivan_moreflores/ynx1ezcj/9/

Aqui me descarga pero se pierde la calidad, quiero descargarlo en A3 en horizontal. https://jsfiddle.net/ivan_moreflores/32jabysL/

jspdf.min.js:157 Uncaught (in promise) Error: Incomplete or corrupt PNG file
    at new e (jspdf.min.js:157)
    at Object.t.processPNG (jspdf.min.js:85)
    at Object.e.addImage (jspdf.min.js:20)
    at ?editor_console=:323

Un punto importante es que quiero descargarlo el pdf en tamaño A3

$('#downloadPDF').click(function () {
    domtoimage.toPng(document.getElementById('content2'))
        .then(function (blob) {
            var pdf = new jsPDF('l', 'pt', 'A3');

            pdf.addImage(blob, 'PNG', 0, 0, '1180','300');
            pdf.save("test.pdf");

            that.options.api.optionsChanged();
        });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js"
    integrity="sha256-c9vxcXyAG4paArQG3xk6DjyW/9aHxai2ef9RpMWO44A=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
  <style href="style.css">
  @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;1,300&display=swap');

.marcoSupeior
{
    position:absolute;
    top:0;
    left:0;
    right:0;   
    background: rgb(24,50,90);
background: linear-gradient(90deg, rgba(24,50,90,1) 18%, rgba(24,50,90,1) 29%, rgba(31,63,115,1) 38%, rgba(47,96,175,1) 49%, rgba(66,134,244,1) 100%);
}

.marcoInferior
{

background: rgb(185,71,4);
background: linear-gradient(90deg, rgba(185,71,4,1) 94%, rgba(244,122,8,1) 100%);
    

    position:absolute;
    bottom:0;  
    left:0;
    right:0;  
}

/*contenedor Logos*/
.contendor-logoP
{
    position:absolute; 
    top:50px;
    left:100px; 
    width:40%; 
    /*background-color:red;*/
    /*padding:100px;  */
    display:flex;
    /*justify-content:center;  */
    justify-content:space-around;  
}
/*contenedor logoPeru*/
.logoPeru
{
    width:50%; 
}

.logoPeru img
{
    width:100%; 
}

/*contenedor logoSenamhi*/
.logoSenamhi
{
    width:50%;
}

.logoSenamhi img
{
    width:70%; 
}

/*contendor del titulo*/

.contendorTitulo
{
    position:absolute;
    top:30%;
    left:0; 
    right:0; 
    /*background-color:#333;   */
    text-align:center;  

}


/*titulo*/


hr {
    position:relative; 
    width:45%;
    /*height:3px; */
    top:15px;

    background-color:#999; 
}

.titulo
{
    position:relative; 
    font-family: 'Montserrat', sans-serif;
    color:#999;
    text-align:center; 
    top:30px;
}

p
{
    font-family: 'Montserrat', sans-serif;
    line-height:1.5;  
    font-weight:700; 

}

.contendor-logos
{
    position:relative; 
    width:30%;
    top:20px;
    left:35%; 
    /*margin:auto; */
    display:flex;
    justify-content:center;  
}
.logosInferior
{
    width:25%;
    /*background-color:green;  */
}

.logo1,.logo2,.logo3
{
    text-align:right; 
}

.logo1 img, .logo2 img, .logo3 img
{
    width:100%; 
}

.logo1
{
    position: relative;
    top:10px;
}

.logo1 img
{
    /*padding:15px; */
    /*background-color:red; */
    width:90%; 
}

.logo2
{
    position:relative; 
    text-align:center;
    top:25px;
}

.logo2 img
{

    width:45%; 
    /*background-color:blue; */
}

.logo3
{
    position:relative;
    top:38px; 
    /*background-color:red; */
}
  </style>
</head>
<body>
    <div id="content2" style="background-color: white;">
    <div class="marcoSupeior" style="height: 200px; overflow: hidden;" ><svg viewBox="0 0 500 150" preserveAspectRatio="none" style="height: 100%; width: 100%;"><path d="M-8.17,181.08 C86.62,-271.88 369.35,333.05 533.57,-65.63 L500.00,150.00 L-20.03,201.80 Z" style="stroke: none; fill: #FFFFFF;"></path></svg></div>

    <!-- marco inferior -->
    
    <div class="marcoInferior" style="height: 250px; overflow: hidden;" ><svg viewBox="0 0 500 150" preserveAspectRatio="none" style="height: 100%; width: 100%;"><path d="M-12.13,204.77 C292.04,159.38 514.95,324.17 512.13,-152.45 L500.00,0.00 L0.00,0.00 Z" style="stroke: none; fill:#FFFFFF;"></path></svg></div>

    <!-- <div class="marcoInferior" style="height: 150px; overflow: hidden;" ><svg viewBox="0 0 500 150" preserveAspectRatio="none" style="height: 100%; width: 100%;"><path d="M-12.13,204.77 C292.04,159.38 514.95,324.17 497.45,-67.59 L500.00,0.00 L0.00,0.00 Z" style="stroke: none; fill: #FFFFFF;"></path></svg></div> -->

    <div class="contendor-logoP">
        <!--<div class="logoPeru"><img src="peru.png" alt=""></div>-->
        <!--<div class="logoSenamhi"><img src="descarga.png" alt=""></div>-->
    </div>

    <div class="contendorTitulo">
        <!--<img src="titulo.jpg" alt="">-->
        
        <hr>

        <div class="contenedorTituloLogo">
            
            <div class="titulo">
                <h2>FICHAS TÉCNICAS</h2>
                <p>Estaciones Metereologicas <br> 23 junio 2020</p>
        <button class="btn btn-info" id="downloadPDF">Download PDF</button>
                <span></span>
            </div>
        </div>

        <div class="contendor-logos">
            <div class="logosInferior logo1">
                <!--<img src="cfa.jpg" alt="">-->
            </div>
            
            <div class="logosInferior logo2">
                <!--<img src="gef.png" alt="">-->
            </div>
            
            <div class="logosInferior logo3">
                <!--<img src="logoCondesan.png" alt=""> -->
            </div>
        </div>
    </div>

    
</div>
</body>
</html>

1
  • Parece que trabaja con promesas, ¿Por qué no estás usando catch para ver si hay errores? .catch(function (error) { console.error('oops, something went wrong!', error); });
    – Triby
    el 17 jul. 2020 a las 18:31

1 respuesta 1

0

Pareciera que los datos no estan cargados o algo fallo al obtener los datos de la imagen. La variable blob aparece sin datos (data:;) al hacer console.log(), por lo tanto no es una imagen valida. Algo en tu codigo esta impidiendo generar la imagen correcta.

$('#downloadPDF').click(function () {
    domtoimage.toPng(document.getElementById('content2'))
        .then(function (blob) {
            console.log(blob);
            var pdf = new jsPDF('l', 'pt', 'A3');
            pdf.addImage(blob, 'PNG', 0, 0, '1180','300');
            pdf.save("test.pdf");

            that.options.api.optionsChanged();
        });
});

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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