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

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.