En el artículo anterior, mencioné que Canvas convierte las páginas web en imágenes. Aquí hay un nuevo requisito: capturar páginas web y guardarlas como archivos PDF para que los usuarios las descarguen.
El uso de lienzo para guardar páginas web como archivos pdf admite dominios cruzados
textoRequisitos: el usuario hace clic en descargar, guarda la página como un archivo PDF y la descarga.
Idea: continuar usando Canvas para tomar capturas de pantalla y convertir el contenido del lienzo en archivos PDF.
Primero debemos introducir la ruta de descarga del archivo js jspdf.debug.js https://github.com/MrRio/jsPDF
Presentamos el archivo js de canvas, la página de inicio oficial del sitio web de adquisición del archivo js: http://html2canvas.hertzen.com/
<script type=text/javascript src=js/html2canvas.js></script><script type=text/javascript src=js/html2canvas.min.js></script><script type=text/javascript src=js /jspdf.debug.js></script>
código del botón div
<div id=down_pdf>Botón Exportar a PDF</div> <div class=sta-main>El div que debe obtenerse como PDF</div>
código jsp
<tipo de script=text/javascript>/* var downPdf = document.getElementById(down_pdf); */var downPdf = document.getElementById(down_pdf);$(#down_pdf).on(click, function() { var canvas2 = documento .createElement(canvas); let _canvas = document.querySelector('.sta-main'); //Obtener ancho y alto var w = parseInt(window.getComputedStyle(_canvas).width); var h = parseInt(window.getComputedStyle(_canvas) .height); //Amplía el lienzo 2 veces, luego colócalo en un contenedor pequeño para manejar el desenfoque canvas2.width = w * 2; lienzo2.altura = h * 2; lienzo2.estilo.ancho = w + px lienzo2.estilo.altura = h +; px; var context = canvas2.getContext(2d); //Desplazamiento del proceso context.scale(1.5, 1.5); //Modifica el color de fondo, el valor predeterminado es negro $('.sta-main').css(background, # fff) html2canvas( _canvas, { // Manejar el problema de la falla del pdf entre dominios al obtener información entre dominios taintTest: false, useCORS: true, enableTaint: false, canvas: canvas2, dpi: 172, // Exportar claridad de pdf renderizado: function (canvas) { var contentWidth = canvas.width; var contentHeight = canvas.height; // Una página de pdf muestra la altura del lienzo generada por la página html var pageHeight = contentWidth / 592.28; * 841.89 ; //Altura de página HTML sin pdf generado var leftHeight = contentHeight; //Desplazamiento de página PDF var position = 0; // El ancho y alto del lienzo generado por la página html en la imagen pdf (tamaño de papel a4 [595.28,841.89]) var imgWidth = 595.28; var imgHeight = 592.28 / contentWidth * contentHeight; 'imagen/jpeg ', 1.0); var pdf = nuevo jsPDF('', 'pt', 'a4'); // Hay dos alturas que deben distinguirse, una es la altura real de la página html y la altura de la página del pdf generado (841.89) // Cuando el contenido no excede el rango de visualización de la página pdf, no se requiere paginación if (leftHeight < pageHeight) { pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight } else { while (leftHeight > 0) { pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight) leftHeight -= pageHeight; position -= 841.89; // Evite agregar páginas en blanco si (leftHeight > 0) { pdf.addPage(); pdf.save('nombre del PDF.pdf'); } }) $('.sta-main').css(fondo, )})</script>Esta vez la página web se cambia a PDF y la última captura de pantalla de la página web es PNG. Utilizan la misma tecnología. Ambos usan Canvas para capturar el lienzo primero y luego convertir el formato.
También hay problemas como desplazamiento, desenfoque, dominio cruzado, etc., que se pueden solucionar utilizando el código anterior.
La conversión de PDF hará que el color de fondo sea negro. Simplemente use el estilo CSS para cambiar el color de fondo.
Conversión perfecta a pdf.
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.