0
763
Vistas¿Por qué hay un espacio en blanco en la parte superior de html2canvas?
Hay un espacio en blanco en mi html2canvas y no estoy seguro de lo que está pasando. Este es mi código hasta ahora.
function doFunction() { html2canvas(document.querySelector("#capture"), ).then(canvas => { $("body").append(canvas); }); } $("button").click(function() { doFunction(); }); div { box-sizing: border-box; font-family: 'ABeeZee', sans-serif; } body { background-color: red; } #capture { width: 900px; height: 900px; background-color: aqua; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="http://html2canvas.hertzen.com/dist/html2canvas.js"></script> <div id="capture"> Hello </div> <button type="button">Click Me!</button>Este es el lienzo adjunto. Observe que hay un espacio en blanco en la parte superior. ¿Como puedo quitarlo?
5 Respuestas
Responde la pregunta0
intenta agregar esto a tu estilo css
*{ margin:0; padding:0; }También intente borrar el caché de su navegador, este sería el problema en la mayoría de los casos. Si eso no funciona, intente eliminar todos sus estilos css y vuelva a agregarlos uno por uno para ver cuándo y cómo se está causando.
0
Debe verificar el desplazamiento del documento, me enfrento al mismo problema cuando el desplazamiento de la página está activo o cuando la página se desplaza hacia abajo.
Intenta agregar
{ scrollX: 0, scrollY: -window.scrollY }a las opciones de html2canvas
0
Tuve un problema similar y, a través de algunas pruebas, me di cuenta de que al desplazarme hasta la parte superior de la página antes de generar el pdf se resolvió.
Así que agregué esta línea para desplazarme hasta la parte superior de la página antes de generar el pdf y funcionó:
window.scrollTo(0,0);
0
prueba este CSS
*{ padding:0; margin:0; }0
El siguiente código funcionó para mí.
html2canvas(element , { scrollX: -window.scrollX, scrollY: -window.scrollY, windowWidth: document.documentElement.offsetWidth, windowHeight: document.documentElement.offsetHeight })