App Script Html to PDF

116 views
Skip to first unread message

Next genTech

unread,
Mar 9, 2024, 5:05:54 AM3/9/24
to Google Apps Script Community
Hi Folks, 

I generated a PDF from App Script Html, It working fine except Arabic font. The Arabic font is not working fine on the output pdf, is there any solution.

the code 
const options = {
        margin: 0.5,
        filename: "Filename",
        image: {
          type: 'jpeg',
          quality: 500
        },
        html2canvas: {
          scale: 1,
          letterRendering: true,
          allowTaint: true,
          // foreignObjectRendering: true,
        },
        jsPDF: {
          unit: 'in',
          format: 'A4',
          putOnlyUsedFonts:true,
          orientation: 'portrait'
        }
    }
   
    html2pdf().from(container).set(options).save();

PDF 
on PDF.png

On Browser
 On Browser.png

DME

unread,
Mar 14, 2024, 4:26:42 AM3/14/24
to google-apps-sc...@googlegroups.com

To ensure that Arabic fonts display correctly in your generated PDF, you need to make sure that the font used in your HTML content is properly embedded or referenced in a way that the PDF generation process can recognize and include it.

Here are a few steps you can take to address this issue:

  1. Embed Arabic Fonts: Make sure that the Arabic font you're using in your HTML content is embedded within your HTML document. You can do this using @font-face CSS rule to specify the font source and include it in your HTML file's <head> section. This ensures that the font is available for rendering when generating the PDF.

    html
    <style>
  @font-face {
    font-family: 'ArabicFont';
    src: url('path/to/arabic-font.woff2') format('woff2'),
         url('path/to/arabic-font.woff') format('woff');
    /* Add additional font formats if necessary */
  }
  body {
    font-family: 'ArabicFont', Arial, sans-serif; /* Use the defined font-family */
  }
</style>

  2. Ensure Correct Font References: Verify that the Arabic font is correctly referenced in your HTML content. Make sure that the font-family specified in your CSS matches the font-family used in your HTML elements.

  3. Check Font Compatibility: Ensure that the Arabic font you're using is compatible with the PDF generation library you're using (html2pdf in this case) and the PDF rendering engine it utilizes. Some fonts may not be fully supported or may require additional configuration to work correctly.

  4. Font Loading: Ensure that the font files are accessible and properly loaded by the PDF generation process. Check the network requests to confirm that the font files are being fetched successfully without any errors.

  5. Fallback Fonts: Provide fallback font families in your CSS to ensure graceful degradation in case the specified Arabic font is not available or fails to load for any reason.

By following these steps and ensuring that the Arabic font is embedded and referenced correctly in your HTML content, you should be able to generate PDFs with properly rendered Arabic text using html2pdf.


--
You received this message because you are subscribed to the Google Groups "Google Apps Script Community" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-apps-script-c...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-apps-script-community/f43bd408-d6cc-40e3-8447-88054f0432dfn%40googlegroups.com.


--
Reply all
Reply to author
Forward
0 new messages