Saving grids or charts as PDF and getting strange characters in the MetaData

[John]

Hi,

I'm doing a quite simple implementation of saveAsPdf() for a grid. The actual PDF is fine, but the MetaData is a problem.

The PDF MetaData attributes for title, subject, keywords, author, creator and producer all contain strange/escape characters. 

Here is an example of what I get every time.

Title:          þÿ�M�o�d�e�l� �2�0�2�3
Subject:        þÿ
Keywords:       Ã¾Ã¿
Author:         Ã¾Ã¿
Creator:        þÿ�K�e�n�d�o� �U�I� �P�D�F� �G�e�n�e�r�a�t�o�r
Producer:       Ã¾Ã¿�K�e�n�d�o� �U�I� �P�D�F� �G�e�n�e�r�a�t�o�r

The only one of these attributes I'm actually setting is the Title. The rest are just whatever is deemed a default value (I assume).

This happens when I produce the PDF from Chrome, Firefox or Edge.

Here's an example of the PDF Options I am using.

{
    "title": "Model 2023",
    "fileName": "Model2023.pdf",
    "allPages": false,
    "avoidLinks": true,
    "paperSize": "A4",
    "margin": {
        "left": "1cm",
        "top": "1cm",
        "right": "1cm",
        "bottom": "1cm"
    },
    "scale": 0.4,
    "landscape": true,
    "multiPage": true,
    "repeatHeaders": true
}

I have tried multiPage as true and false, which made no difference. I have included pako_deflate. I thought it might be a font issue, but it's MetaData. Not what's actually output on the PDF.

To make it even more confusing for me, your demo works perfectly.  :)

FYI: Using version: 2022.3.913

If you can offer any ideas, I'd be grateful.

Thanks
John

[Martin]

Hello, John,

Could you please let me know if you have defined fonts as shown in the Export to PDF Grid demo? 

kendo.pdf.defineFont({
            "DejaVu Sans"             : "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans.ttf",
            "DejaVu Sans|Bold"        : "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans-Bold.ttf",
            "DejaVu Sans|Bold|Italic" : "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf",
            "DejaVu Sans|Italic"      : "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf",
            "WebComponentsIcons"      : "https://kendo.cdn.telerik.com/2017.1.223/styles/fonts/glyphs/WebComponentsIcons.ttf"
        });

If that does not resolve the problem, could you please provide a Dojo example where I can observe the behaviour?

Regards,
Martin
Progress Telerik

[John]

Hi Martin,

Thanks for the reply. I did try adding the defined fonts, but that had no effect.

I've tried stripping out a lot of other scripts, CSS, HTML, etc from my application, but to no avail. So I created a brand new HTML file and started from scratch with just the example grid from your site (the same example from the link you provided).

What I found was when I opened the HTML file in Chrome and ran the Export, my PDF had the extra characters in the MetaData. But from Firefox it was fine.

I tested this by opening the HTML file directly in browser. However if I access the same HTML file via my WebServer, both Chrome and Firefox will include the extra characters in the MetaData.

I've attached the HTML file I was using (renamed as .txt, so I can attach it).
The Export PDF file is also attached (again renamed as .txt, so I can attach it) - this is the Export from Chrome.

I had a colleague run the same test and her results were the same (just to make sure it wasn't my browser) :)

Hopefully you see the same problem as I do.

Thanks
John

 

[Martin]

Thank you for the provided resources. I will review them and get back to you with further information.

[Martin]

Hello, John,

I reviewed the code from the GridExportTest file in this Dojo example. It appears to export the data as expected. Here you will find a small video demonstrating the result. Am I missing something to reproduce the problem?

[John]

Hi Martin,

I didn't have any issue running the demo via Dojo. That worked fine. The problem comes when I run the HTML directly in the browser.

Here's an example: video

To do this I saved the content of the Dojo as an HTML file and opened that file in my browser. As you can see, the exported PDF file has strange characters in the title (which, in Chrome) is pulled from the MetaData.

Hope this helps :)

[Martin]

Hello, John,

Thank you for the additional information. I too tested the code from the Dojo in an HTML file, and still I am not able to observe the behaviour. Here is a small video where you can see the name of the file displayed normally. Let me know if you have any further information that may help me to reproduce the problem.

[John]

Hi Martin,

Can you please take a look at this example:  codesandbox

And try it in both Chrome and Firefox. Myself and a couple of colleagues have tried running from that link and have had an issue with the metadata.  Hopefully it helps you to recreate it, otherwise I'm running out of ideas :)

Here's a screen shot of what I see in Chrome when I open the PDF.

Thanks!

[Georgi Denchev]

Hi, John,

Could you try to set the charset attribute in the meta tag of the page where the Grid is initialized?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

Add the highlighted part right after the opening <head> tag. In case you've already defined a charset, could you try changing it to 'utf-8' and see if that makes a difference?

I am attaching an .html file with the code from the sandbox and the added tag.

Best Regards,

Georgi

[John]

Hi,

Thank you! That solved my problem.

Obvious when I think about it :)

Part of my problem was older content on our webapp that was changing the charset and encoding as windows-1252. Once that code was removed and I enforced UTF-8, everything operates as expected.

Thanks your help. It's appreciated.

John