Output PDF Wijimo FlexGrid

Output PDF Wijimo FlexGrid

Posted by: darkthanhtam on 19 January 2021, 8:32 pm EST

• 

  darkthanhtam

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 19 January 2021, 8:32 pm EST

  Hi,

  I’m using wijmo FlexGrid and output PDF with FlexGrid’ autoRowHeights = true.
  
  And when output PDF, the cell with long text content having a blank space at top and bottom of the cell.
  
  The longer text content the bigger blank space of the cell have.
  
  Here’s the sample https://jsfiddle.net/LaAsCE/5n1sxyk8/

  Can you help me to remove the blank space from the cell?

  Regards~

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 20 January 2021, 11:05 pm EST

  Hi,

  Thank you for sharing the sample. The issue in the sample is arising because of the following 2 reasons:
  
  1). line-height CSS is set which is greater than than the font’s size
  
  2). A different font-family is used in the sample as compared to the exported PDF.
  
  Fixing the above two-issue results in inconsistent behaviour. Please refer to the following sample:
  
  https://jsfiddle.net/6vh0yn2p/
  
  PS. In the above sample before exporting to PDF, you need to wait for the font to download and register in the sample. After the font is registered you will notice that the font style of the grid’s cell is changed.

  Regards
  
  Sharad

• 

  darkthanhtam

  • Post Options:
  • Link
    Copy

  Posted 21 January 2021, 1:47 pm EST

  Hi Sharad,

  Thanks for your answer, set line-hieght in CSS is working.
  
  But if I want to set any font as I want, you told that I needed to wait for the font to download and register in the sample.
  
  But how can I do that? Can you do a sample for me, thanks?

  Regards
  
  Tam

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 21 January 2021, 8:01 pm EST

  Hi Tam,

  In the previous sample, please look at the CSS. In CSS, a font-face tag is used, which will automatically load the font on page load (generally 3-4 seconds). You can use the document.fonts.ready callback which runs after all the fonts are loaded, to check whether your font is loaded or not. Please refer to the sample link below for reference:

  https://jsfiddle.net/405p87bt/2/

  In this sample, the Export PDF button will be disabled until the font is loaded.

  Regards,
  
  Ashwin

• 

  darkthanhtam

  • Post Options:
  • Link
    Copy

  Posted 21 January 2021, 9:23 pm EST

  Hi Ashwin,

  As your sample I see when you load page at the first time.
  
  The flexgrid has loaded and resize row height. Then they apply the font into.
  
  So when the font is applied the row height was longer than the text.
  
  I can use theGrid.autoSizeRows to resize the row.
  
  But document.fonts doesn’t support in IE11.

  If you have any event else to replace document.fonts let me know.

  Thanks and regards~
  
  Tam

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 24 January 2021, 4:39 pm EST

  You can use the fontfaceonload library instead of documents.fonts.ready callback. This library will work with all the browsers:

  https://github.com/zachleat/fontfaceonload

  Please refer to the updated sample attached which uses this library for the same requirements.

  ~regards

  load font.zip

• 

  darkthanhtam

  • Post Options:
  • Link
    Copy

  Posted 24 January 2021, 5:36 pm EST

  Hi Ashwin,

  Thank you for your response.

  Regards.