Tabulator: PDF Export with UTF-8 support

[marovargovcik]

Is your feature request related to a problem? Please describe.
Right now Tabulator is using jsPDF under the hood. jsPDF unfortunately does not support UTF-8 by default. There is ongoing issue opened on Github https://github.com/MrRio/jsPDF/issues/12

Describe the solution you'd like
Would be super cool if Tabulator can use something more "production" ready with all common features built in.

Describe alternatives you've considered
Maybe we can use pdfMake? https://github.com/bpampuch/pdfmake

Workaround
This is for users of Tabulator that are also struggling how to output special characters to your PDF exported by Tabulator. There is an option to add custom font to PDF with UTF-8 support.
Here is how you can do it:

tabulatorInstance.download("pdf", "data.pdf", {
  autoTable: function(doc) {
    doc.addFileToVFS("yourFont.ttf", "AAEAAAAUAQA..."); // your font in binary format as second parameter
    doc.addFont("yourFont.ttf", "yourFont", "normal"); 
    doc.setFont("yourFont");
    return {
      styles: {
        font: "yourFont",
        fontStyle: "normal"
      }
    };
  }
});

Why is this workaround bad?
Providing font in binary is resulting, in my case, in loading unnecessary 277kb.

[olifolkerd]

Hey @marovargovcik

Thanks for getting in touch.

The lack of UTF-8 support is an issue, i agree with you there.

At the moment the PDF downloader is depended on the autotable plugin, which is in-turn dependent on the jsPDF plugin.

As with version 4.1 to be released shortly including more updates to the downloaders i would be unable to bring in a change soon as i don't want to force users to have to make whole sale changes to their code too often. but it is certainly something i would be interested in perusing later down the line.

That being said, it is very easy to implement your own custom downloaders, so if you came up with a viable solution based on a different library that used the same design pattern as the existing downloader i would be happy to look at including it in Tabulator.

In the mean time i will update the documentation to highlight the UTF-8 support issue, and with your permission include your workaround in the documentation if you would be happy with that.

Thanks for getting in touch,

Cheers

Oli :)

[marovargovcik]

Thanks for your response @olifolkerd,

I understand. And yes, you can use my example in the documentation but please be aware that not all fonts I tried to implement worked. Ubuntu fonts worked without problem but Roboto did not. Some of them work and some don't. I have very poor knowledge of how encoding and all these things about fonts work under the hood so I don't see a pattern why certain fonts are not working.

Best regards.

[olifolkerd]

I have added a note about this in the docs and included a link to this issue incase it is helpful to others.

Thanks for the workaround.

Cheers

Oli :)

[opiums9]

Please tell me which part to embed this code?
Here is what my code now looks like:

...
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.0.5/jspdf.plugin.autotable.js"></script>
<a id="download-pdf" href="#">Save to pdf</a>
<div id="tables"></div>
<script type="text/javascript">
var tabledata = ...;
var table = new Tabulator("#tables", {
...
});

$("#download-pdf").click(function(){
    table.download("pdf", "data.pdf", {
        //orientation:"portrait", //set page orientation to portrait
        //title:"Example Report", //add title to report
      autoTable: function(doc) {
        doc.addFileToVFS("fontawesome-webfont.ttf", "AAEAAAAOAIAAAwBgRkZUTW..."); // your font in binary format as second parameter (font in base64)
        doc.addFont("fontawesome-webfont.ttf", "FontAwesome", "normal"); 
        doc.setFont("FontAwesome");
        return {
          styles: {
            font: "FontAwesome",
            fontStyle: "normal"
          }
        };
      }
    });
});
</script>

And I get the error: Uncaught TypeError: doc.addFileToVFS is not a function

The function normally works only through <script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>.
Please correct it.

[MyDino]

Oli: you are the best. I love working with tabulator and I'm happy to help on smaller problems with dependencies. Of course I've already spend some funds on Patreon ;-)
For all who are struggling with UTF-8 in Table-Headers, using tabulator and jsPDF with autoTable;
this solution works:
( I tried several fonts, good results are given with WorkSans from Google Fonts
https://fonts.google.com/specimen/Work+Sans?selection.family=Work+Sans&sidebar.open
OpenFont License. Big thanks to Wei Huang!)


1) generate a font-file with fontconverter.html from jsPDF-master\jsPDF-master\fontconverter (I've uploaded 'WorkSans-Regular.ttf')
2) load font-file after jspdf and before autotable :







3) set-up PDF-Download:

function downloadPDF() {
    tabulator.download("pdf", "Output.pdf", {
        orientation: "l", //set page orientation to landscape
        title: "Report", //add title to report
        jsPDF: {
            unit: "mm", //set units to mm
            format: [420, 297], // A3
        },
        autoTable: function (doc) {
            doc.addFont('WorkSans-Regular-normal.ttf', 'WorkSans-Regular', 'bold');
            doc.setFont("WorkSans-Regular", 'bold'); // set font->important: use bold instead of normal , as it is in header, body text stays normal
            doc.setFontSize(10);
            return {
                styles: {
                    font: "WorkSans-Regular",
                    fontStyle: "bold", ->important: use bold instead of normal , as it is in header, body text stays normal
                    fontSize: 10,
                },
                theme: 'striped',
                margin: { top: 35 },
            }
        }
    });
}

Done.