To convert this HTML into a Java String called htmlContent, we should use a code block. The most appropriate type would be a Java code block, as we're working with Java syntax. Here's how we can do that:
String htmlContent = "<!DOCTYPE html>\n" +
"<html lang=\"es\">\n" +
" <head>\n" +
" <meta charset=\"UTF-8\" />\n" +
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n" +
" <title>Ticket</title>\n" +
" <style>\n" +
" .background-image {\n" +
" width: 400px;\n" +
" height: auto;\n" +
" background-color: black;\n" +
" align-content: center;\n" +
" z-index: -2;\n" +
" background-size: cover;\n" +
" position: relative;\n" +
" background-image: url(\"data:image/png;base64,base64Background\");\n" +
" }\n" +
" </style>\n" +
" </head>\n" +
" <body style=\"margin: 0; padding: 0\">\n" +
" <div class=\"background-image\">\n" +
" <div\n" +
" style=\"\n" +
" width: 100%;\n" +
" max-width: 310px;\n" +
" display: flex;\n" +
" flex-direction: column;\n" +
" justify-items: center;\n" +
" margin: auto;\n" +
" align-items: center;\n" +
" padding-top: 20px;\n" +
" padding-bottom: 20px;\n" +
" \"\n" +
" >\n" +
" <header\n" +
" style=\"\n" +
" position: relative;\n" +
" width: 100%;\n" +
" display: flex;\n" +
" flex-direction: column;\n" +
" justify-content: center;\n" +
" align-content: center;\n" +
" \"\n" +
" >\n" +
" <img\n" +
" src=\"data:image/png;base64,ticketImage\"\n" +
" alt=\"background\"\n" +
" style=\"width: 100%; height: auto; position: absolute; z-index: -1\"\n" +
" />\n" +
" <div\n" +
" style=\"\n" +
" transform: rotate(180deg);\n" +
" justify-content: center;\n" +
" display: flex;\n" +
" \"\n" +
" >\n" +
" <p\n" +
" style=\"\n" +
" color: black;\n" +
" font-size: 10px;\n" +
" margin-bottom: 2px;\n" +
" margin-top: 0px;\n" +
" \"\n" +
" >\n" +
" 2UOOEJJJCOPHT\n" +
" </p>\n" +
" </div>\n" +
" <div\n" +
" style=\"\n" +
" width: 100%;\n" +
" height: auto;\n" +
" display: flex;\n" +
" justify-content: center;\n" +
" \"\n" +
" >\n" +
" <img\n" +
" src=\"data:image/png;base64,qrCode\"\n" +
" alt=\"QR Code\"\n" +
" style=\"width: 165px\"\n" +
" />\n" +
" </div>\n" +
" </div>\n" +
" </header>\n" +
" <section\n" +
" style=\"\n" +
" background: white;\n" +
" width: 308px;\n" +
" border: solid gray 0.17px;\n" +
" border-top-width: 0;\n" +
" border-right-width: 0.17px;\n" +
" border-left-width: 0.17px;\n" +
" border-bottom-width: 0.17px;\n" +
" border-bottom-right-radius: 25px;\n" +
" border-bottom-left-radius: 25px;\n" +
" display: flex;\n" +
" flex-direction: column;\n" +
" align-items: center;\n" +
" justify-content: center;\n" +
" \"\n" +
" >\n" +
" <div\n" +
" style=\"width: 100%; justify-content: flex-start; max-width: 265px\"\n" +
" >\n" +
" <div style=\"width: 100%; display: flex; align-items: center\">\n" +
" <p style=\"color: black; margin: 0; font-size: 12px\">\n" +
" Nombre y Apellido: Seba Ponce\n" +
" </p>\n" +
" </div>\n" +
" <div style=\"width: 100%; display: flex; align-items: center\">\n" +
" <p style=\"color: black; margin: 0; font-size: 12px\">\n" +
" DNI: 44395540\n" +
" </p>\n" +
" </div>\n" +
" <div\n" +
" style=\"\n" +
" width: 100%;\n" +
" display: flex;\n" +
" align-items: center;\n" +
" margin-top: 10px;\n" +
" margin-bottom: 16px;\n" +
" \"\n" +
" >\n" +
" <img\n" +
" src=\"data:image/png;base64,base64Calendario\"\n" +
" alt=\"calendar\"\n" +
" style=\"width: 19px; height: auto; margin-right: 0.4rem\"\n" +
" />\n" +
" <h3 style=\"color: black; margin: 0; font-size: 16.2px\">\n" +
" Martes, 01 Oct. - 11:15\n" +
" </h3>\n" +
" </div>\n" +
" <div style=\"margin-top: 10px; margin-bottom: 8px\">\n" +
" <h4 style=\"color: black; margin: 0; font-size: 16px\">\n" +
" EXTRAYSCAN\n" +
" </h4>\n" +
" </div>\n" +
" <div>\n" +
" <div\n" +
" style=\"\n" +
" width: 100%;\n" +
" display: flex;\n" +
" align-items: center;\n" +
" margin-top: 15px;\n" +
" \"\n" +
" >\n" +
" <img\n" +
" src=\"data:image/png;base64,base64Tickets\"\n" +
" alt=\"ticket\"\n" +
" style=\"width: 15px; height: auto; margin-right: 0.4rem\"\n" +
" />\n" +
" <p style=\"color: black; margin: 0; font-size: 12px\">\n" +
" Nuevo Ticket para crear\n" +
" </p>\n" +
" </div>\n" +
" <div\n" +
" style=\"\n" +
" width: 100%;\n" +
" display: flex;\n" +
" align-items: center;\n" +
" margin-top: 2px;\n" +
" margin-bottom: 2px;\n" +
" \"\n" +
" >\n" +
" <img\n" +
" src=\"data:image/png;base64,base64Calendario\"\n" +
" alt=\"calendar\"\n" +
" style=\"width: 13.5px; height: auto; margin-right: 0.4em\"\n" +
" />\n" +
" <p style=\"color: black; margin: 0; font-size: 12px\">\n" +
" Fecha y hora: Martes 01 de Octubre 2024 - 11:15hs a 16:59hs\n" +
" </p>\n" +
" </div>\n" +
" <div\n" +
" style=\"\n" +
" width: 100%;\n" +
" display: flex;\n" +
" align-items: center;\n" +
" margin-top: 2px;\n" +
" margin-bottom: 2px;\n" +
" \"\n" +
" >\n" +
" <img\n" +
" src=\"data:image/png;base64,base64Ubicacion\"\n" +
" alt=\"location\"\n" +
" style=\"width: 11px; height: auto; margin-right: 0.5rem\"\n" +
" />\n" +
" <p style=\"color: black; margin: 0; font-size: 12px\">\n" +
" Lugar: molinos\n" +
" </p>\n" +
" </div>\n" +
" <div\n" +
" style=\"\n" +
" width: 100%;\n" +
" display: flex;\n" +
" align-items: center;\n" +
" margin-top: 2px;\n" +
" margin-bottom: 2px;\n" +
" \"\n" +
" >\n" +
" <img\n" +
" src=\"data:image/png;base64,base64Persona\"\n" +
" alt=\"person\"\n" +
" style=\"width: 14.5px; height: auto; margin-right: 0.4em\"\n" +
" />\n" +
" <p style=\"color: black; margin: 0; font-size: 12px\">\n" +
" Edad: Mayores de 18 años\n" +
" </p>\n" +
" </div>\n" +
" <div\n" +
" style=\"\n" +
" width: 100%;\n" +
" display: flex;\n" +
" align-items: center;\n" +
" margin-top: 2px;\n" +
" margin-bottom: 2px;\n" +
" \"\n" +
" >\n" +
" <img\n" +
" src=\"data:image/png;base64,base64Musica\"\n" +
" alt=\"music\"\n" +
" style=\"width: 14px; height: auto; margin-right: 0.4em\"\n" +
" />\n" +
" <p style=\"color: black; margin: 0; font-size: 12px\">\n" +
" Música: Pop, Rock, Reggae\n" +
" </p>\n" +
" </div>\n" +
" </div>\n" +
"\n" +
" <div\n" +
" style=\"\n" +
" width: 100%;\n" +
" display: flex;\n" +
" justify-content: center;\n" +
" padding-bottom: 0.5rem;\n" +
" padding-top: 0.5rem;\n" +
" \"\n" +
" >\n" +
" <img\n" +
" src=\"data:image/png;base64,base64Logo\"\n" +
" alt=\"background\"\n" +
" style=\"width: 90px; height: auto\"\n" +
" />\n" +
" </div>\n" +
" </div>\n" +
" </section>\n" +
" </div>\n" +
" </div>\n" +
" </body>\n" +
"</html>";This Java code creates a String variable named htmlContent that contains the entire HTML content. Note that all quotation marks within the HTML have been escaped with backslashes, and line breaks have been added using \n to maintain readability in the Java code.
Quiero que tengas en cuenta las variables: Path path = Paths.get("C:/development/itlg-weiv-api/src/main/resources/img/logo_view_negro.png"); byte[] imageBytesLogo = Files.readAllBytes(path); String base64Logo = Base64.getEncoder().encodeToString(imageBytesLogo);
Path backgroundPath = Paths.get("C:/development/itlg-weiv-api/src/main/resources/img/imgEvento.png"); byte[] imageBytesBackground = Files.readAllBytes(backgroundPath); String base64Background = Base64.getEncoder().encodeToString(imageBytesBackground);
Path ticketsPath = Paths.get("C:/development/itlg-weiv-api/src/main/resources/img/tickets.png"); byte[] tickets = Files.readAllBytes(ticketsPath); String base64Tickets = Base64.getEncoder().encodeToString(tickets);
Path calendarioPath = Paths.get("C:/development/itlg-weiv-api/src/main/resources/img/calendarioNegro.png"); byte[] calendario = Files.readAllBytes(calendarioPath); String base64Calendario = Base64.getEncoder().encodeToString(calendario);
Path musicaPath = Paths.get("C:/development/itlg-weiv-api/src/main/resources/img/musica.png"); byte[] musica = Files.readAllBytes(musicaPath); String base64Musica = Base64.getEncoder().encodeToString(musica);
Path personaPath = Paths.get("C:/development/itlg-weiv-api/src/main/resources/img/personaNegro.png"); byte[] persona = Files.readAllBytes(personaPath); String base64Persona = Base64.getEncoder().encodeToString(persona);
Path ubicacionPath = Paths.get("C:/development/itlg-weiv-api/src/main/resources/img/ubicacion.png"); byte[] ubicacion = Files.readAllBytes(ubicacionPath); String base64Ubicacion = Base64.getEncoder().encodeToString(ubicacion);
Path ticketPath = Paths.get("C:/development/itlg-weiv-api/src/main/resources/img/ticket.png"); byte[] ticket = Files.readAllBytes(ticketPath); String ticket64Ubicacion = Base64.getEncoder().encodeToString(ticket);
Entendido. Voy a modificar el código Java para incluir estas variables en el String htmlContent. Utilizaremos estas variables para reemplazar las referencias a las imágenes en base64 en el HTML. Aquí está el código actualizado:
String htmlContent = "<!DOCTYPE html>\n" +
"<html lang=\"es\">\n" +
" <head>\n" +
" <meta charset=\"UTF-8\" />\n" +
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n" +
" <title>Ticket</title>\n" +
" <style>\n" +
" .background-image {\n" +
" width: 400px;\n" +
" height: auto;\n" +
" background-color: black;\n" +
" align-content: center;\n" +
" z-index: -2;\n" +
" background-size: cover;\n" +
" position: relative;\n" +
" background-image: url(\"data:image/png;base64," + base64Background + "\");\n" +
" }\n" +
" </style>\n" +
" </head>\n" +
" <body style=\"margin: 0; padding: 0\">\n" +
" <div class=\"background-image\">\n" +
" <div\n" +
" style=\"\n" +
" width: 100%;\n" +
" max-width: 310px;\n" +
" display: flex;\n" +
" flex-direction: column;\n" +
" justify-items: center;\n" +
" margin: auto;\n" +
" align-items: center;\n" +
" padding-top: 20px;\n" +
" padding-bottom: 20px;\n" +
" \"\n" +
" >\n" +
" <header\n" +
" style=\"\n" +
" position: relative;\n" +
" width: 100%;\n" +
" display: flex;\n" +
" flex-direction: column;\n" +
" justify-content: center;\n" +
" align-content: center;\n" +
" \"\n" +
" >\n" +
" <img\n" +
" src=\"data:image/png;base64," + ticket64Ubicacion + "\"\n" +
" alt=\"background\"\n" +
" style=\"width: 100%; height: auto; position: absolute; z-index: -1\"\n" +
" />\n" +
" <div\n" +
" style=\"\n" +
" transform: rotate(180deg);\n" +
" justify-content: center;\n" +
" display: flex;\n" +
" \"\n" +
" >\n" +
" <p\n" +
" style=\"\n" +
" color: black;\n" +
" font-size: 10px;\n" +
" margin-bottom: 2px;\n" +
" margin-top: 0px;\n" +
" \"\n" +
" >\n" +
" 2UOOEJJJCOPHT\n" +
" </p>\n" +
" </div>\n" +
" <div\n" +
" style=\"\n" +
" width: 100%;\n" +
" height: auto;\n" +
" display: flex;\n" +
" justify-content: center;\n" +
" \"\n" +
" >\n" +
" <img\n" +
" src=\"data:image/png;base64,qrCode\"\n" +
" alt=\"QR Code\"\n" +
" style=\"width: 165px\"\n" +
" />\n" +
" </div>\n" +
" </div>\n" +
" </header>\n" +
" <section\n" +
" style=\"\n" +
" background: white;\n" +
" width: 308px;\n" +
" border: solid gray 0.17px;\n" +
" border-top-width: 0;\n" +
" border-right-width: 0.17px;\n" +
" border-left-width: 0.17px;\n" +
" border-bottom-width: 0.17px;\n" +
" border-bottom-right-radius: 25px;\n" +
" border-bottom-left-radius: 25px;\n" +
" display: flex;\n" +
" flex-direction: column;\n" +
" align-items: center;\n" +
" justify-content: center;\n" +
" \"\n" +
" >\n" +
" <div\n" +
" style=\"width: 100%; justify-content: flex-start; max-width: 265px\"\n" +
" >\n" +
" <div style=\"width: 100%; display: flex; align-items: center\">\n" +
" <p style=\"color: black; margin: 0; font-size: 12px\">\n" +
" Nombre y Apellido: Seba Ponce\n" +
" </p>\n" +
" </div>\n" +
" <div style=\"width: 100%; display: flex; align-items: center\">\n" +
" <p style=\"color: black; margin: 0; font-size: 12px\">\n" +
" DNI: 44395540\n" +
" </p>\n" +
" </div>\n" +
" <div\n" +
" style=\"\n" +
" width: 100%;\n" +
" display: flex;\n" +
" align-items: center;\n" +
" margin-top: 10px;\n" +
" margin-bottom: 16px;\n" +
" \"\n" +
" >\n" +
" <img\n" +
" src=\"data:image/png;base64," + base64Calendario + "\"\n" +
" alt=\"calendar\"\n" +
" style=\"width: 19px; height: auto; margin-right: 0.4rem\"\n" +
" />\n" +
" <h3 style=\"color: black; margin: 0; font-size: 16.2px\">\n" +
" Martes, 01 Oct. - 11:15\n" +
" </h3>\n" +
" </div>\n" +
" <div style=\"margin-top: 10px; margin-bottom: 8px\">\n" +
" <h4 style=\"color: black; margin: 0; font-size: 16px\">\n" +
" EXTRAYSCAN\n" +
" </h4>\n" +
" </div>\n" +
" <div>\n" +
" <div\n" +
" style=\"\n" +
" width: 100%;\n" +
" display: flex;\n" +
" align-items: center;\n" +
" margin-top: 15px;\n" +
" \"\n" +
" >\n" +
" <img\n" +
" src=\"data:image/png;base64," + base64Tickets + "\"\n" +
" alt=\"ticket\"\n" +
" style=\"width: 15px; height: auto; margin-right: 0.4rem\"\n" +
" />\n" +
" <p style=\"color: black; margin: 0; font-size: 12px\">\n" +
" Nuevo Ticket para crear\n" +
" </p>\n" +
" </div>\n" +
" <div\n" +
" style=\"\n" +
" width: 100%;\n" +
" display: flex;\n" +
" align-items: center;\n" +
" margin-top: 2px;\n" +
" margin-bottom: 2px;\n" +
" \"\n" +
" >\n" +
" <img\n" +
" src=\"data:image/png;base64," + base64Calendario + "\"\n" +
" alt=\"calendar\"\n" +
" style=\"width: 13.5px; height: auto; margin-right: 0.4em\"\n" +
" />\n" +
" <p style=\"color: black; margin: 0; font-size: 12px\">\n" +
" Fecha y hora: Martes 01 de Octubre 2024 - 11:15hs a 16:59hs\n" +
" </p>\n" +
" </div>\n" +
" <div\n" +
" style=\"\n" +
" width: 100%;\n" +
" display: flex;\n" +
" align-items: center;\n" +
" margin-top: 2px;\n" +
" margin-bottom: 2px;\n" +
" \"\n" +
" >\n" +
" <img\n" +
" src=\"data:image/png;base64," + base64Ubicacion + "\"\n" +
" alt=\"location\"\n" +
" style=\"width: 11px; height: auto; margin-right: 0.5rem\"\n" +
" />\n" +
" <p style=\"color: black; margin: 0; font-size: 12px\">\n" +
" Lugar: molinos\n" +
" </p>\n" +
" </div>\n" +
" <div\n" +
" style=\"\n" +
" width: 100%;\n" +
" display: flex;\n" +
" align-items: center;\n" +
" margin-top: 2px;\n" +
" margin-bottom: 2px;\n" +
" \"\n" +
" >\n" +
" <img\n" +
" src=\"data:image/png;base64," + base64Persona + "\"\n" +
" alt=\"person\"\n" +
" style=\"width: 14.5px; height: auto; margin-right: 0.4em\"\n" +
" />\n" +
" <p style=\"color: black; margin: 0; font-size: 12px\">\n" +
" Edad: Mayores de 18 años\n" +
" </p>\n" +
" </div>\n" +
" <div\n" +
" style=\"\n" +
" width: 100%;\n" +
" display: flex;\n" +
" align-items: center;\n" +
" margin-top: 2px;\n" +
" margin-bottom: 2px;\n" +
" \"\n" +
" >\n" +
" <img\n" +
" src=\"data:image/png;base64," + base64Musica + "\"\n" +
" alt=\"music\"\n" +
" style=\"width: 14px; height: auto; margin-right: 0.4em\"\n" +
" />\n" +
" <p style=\"color: black; margin: 0; font-size: 12px\">\n" +
" Música: Pop, Rock, Reggae\n" +
" </p>\n" +
" </div>\n" +
" </div>\n" +
"\n" +
" <div\n" +
" style=\"\n" +
" width: 100%;\n" +
" display: flex;\n" +
" justify-content: center;\n" +
" padding-bottom: 0.5rem;\n" +
" padding-top: 0.5rem;\n" +
" \"\n" +
" >\n" +
" <img\n" +
" src=\"data:image/png;base64," + base64Logo + "\"\n" +
" alt=\"background\"\n" +
" style=\"width: 90px; height: auto\"\n" +
" />\n" +
" </div>\n" +
" </div>\n" +
" </section>\n" +
" </div>\n" +
" </div>\n" +
" </body>\n" +
"</html>";En este código actualizado:
base64Background, base64Logo, base64Tickets, base64Calendario, base64Musica, base64Persona, y base64Ubicacion con las variables correspondientes que proporcionaste.ticket64Ubicacion que parece ser la variable correcta para esa imagen específica.qrCode sin cambios, ya que no proporcionaste una variable específica para el código QR.Este código ahora utilizará las imágenes codificadas en base64 que has leído de los archivos en tu sistema. Asegúrate de que todas estas variables estén correctamente definidas y tengan los valores de base64 adecuados antes de usar este String htmlContent.