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>
.catch(function (error) { console.error('oops, something went wrong!', error); });