HTML a PF a través de jsPDF, el carácter ▶ se corrompe.

Resumen Técnico: Problemas de Conversión de HTML a PDF con jsPDF y html2canvas

Al intentar convertir un elemento HTML que contiene el carácter ▶ (U+25B6) a PDF utilizando jsPDF, se observa que en la salida del PDF, dicho carácter se representa erróneamente como %¶. Este problema se puede deber a la falta de la fuente adecuada que incluya el símbolo en cuestión. En este contexto, la solución propuesta es embebir las fuentes adecuadas en el documento PDF para asegurar que se muestren correctamente.

Solución Propuesta

1. Incluir Fuentes Personalizadas en jsPDF: Para evitar que los caracteres se corrompan, es recomendable incluir fuentes que contengan el símbolo deseado. Para esto, podemos utilizar el método addFileToVFS para incluir una fuente que soporte caracteres especiales y luego usar addFont para registrar la fuente en jsPDF.

   Aquí hay un ejemplo simplificado de cómo embebir una fuente:

   // Suponiendo que "MyFont.ttf" es una fuente que soporta el carácter
   const myFont = 'BASE64_ENCODED_FONT_STRING';
   jsPDF.API.addFileToVFS('MyFont.ttf', myFont);
   jsPDF.API.addFont('MyFont.ttf', 'MyFont', 'normal');
   let doc = new jsPDF();
   doc.setFont('MyFont');

2. Revisar el Uso de html2canvas: Además, es importante resolver el problema de CORS que puede surgir al usar html2canvas. Para mitigar este problema, asegúrate de que los recursos externos utilizados en el HTML (como imágenes) tengan habilitado CORS. Esto se puede lograr incluyendo encabezados adecuados en el servidor que está sirviendo los recursos.

   Puedes habilitar CORS en tus imágenes de la siguiente manera:

   <img src="YOUR_IMAGE_URL" crossorigin="anonymous" />

Ejemplo de Implementación

Aquí te muestro cómo podrías integrar estos cambios en tu función exportPDF:

async function exportPDF() {
    const outputDiv = await getOutputDivClone();
    // ... código existente

    let doc = new jsPDF({
        orientation: contentWidth > contentHeight ? 'l' : 'p',
        unit: 'px',
        format: [contentWidth, contentHeight]
    });

    // Embebiendo fuente antes de renderizar
    const myFont = 'BASE64_ENCODED_FONT_STRING'; // Reemplazar con tu fuente
    jsPDF.API.addFileToVFS('MyFont.ttf', myFont);
    jsPDF.API.addFont('MyFont.ttf', 'MyFont', 'normal');
    doc.setFont('MyFont');

    await new Promise(resolve => {
        doc.html(wrapBoth, {
            callback: resolve,
            x: 0,
            y: 0,
            margin: [0, 0, 0, 0],
            html2canvas: {
                scale: 1,
                logging: false,
                allowTaint: false,
                useCORS: true
            }
        });
    });
    // ... código existente
    doc.save(`test.pdf`);
}

Conclusiones

Incluir fuentes adecuadas y gestionar correctamente los problemas de CORS son pasos esenciales para asegurar que los documentos PDF generados desde HTML se visualicen correctamente, incluyendo caracteres especiales. Con los cambios propuestos, deberías poder resolver el problema de corrupción del carácter ▶ en la salida PDF.