Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

PDF Export with UTF-8 support #1539

Closed
marovargovcik opened this issue Oct 28, 2018 · 5 comments
Closed

PDF Export with UTF-8 support #1539

marovargovcik opened this issue Oct 28, 2018 · 5 comments
Assignees
Labels

Comments

@marovargovcik
Copy link

@marovargovcik marovargovcik commented Oct 28, 2018

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 MrRio/jsPDF#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 olifolkerd self-assigned this Oct 28, 2018
@olifolkerd olifolkerd added the Feature label Oct 28, 2018
@olifolkerd
Copy link
Owner

@olifolkerd olifolkerd commented Oct 28, 2018

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
Copy link
Author

@marovargovcik marovargovcik commented Oct 28, 2018

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
Copy link
Owner

@olifolkerd olifolkerd commented Nov 4, 2018

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
Copy link

@opiums9 opiums9 commented Mar 18, 2019

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
Copy link

@MyDino MyDino commented Apr 22, 2020

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 :
<script src="assets/js/tabulator.min.js"></script>
<script src="assets/js/jspdf.min.js"}></script>

<script src="assets/js/WorkSans-Regular-normal.js"></script>

<script src="assets/js/jspdf.plugin.autotable.min.js"></script>

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
4 participants
You can’t perform that action at this time.