The HTML is as follows:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Export to PDF</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css"> <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css"> <!-- buttons --> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.1/css/buttons.dataTables.min.css"> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script> <script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.flash.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script> <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script> Build a custom local version of the vfs_fonts.js file, containing whatever fonts you need. The structure of the file is this: this.pdfMake = this.pdfMake || {}; this.pdfMake.vfs = { "Yantramanav.ttf": "AAEAA.........MYXRu", "Yantramanavbold.ttf": "AAEAA.........YXRu", "Yantramanavitalics.ttf": "AAEAA.........MXRu",शिखा</td></tr> </tbody> <tfoot> <tr> <th>Name</th> <th>Grievance</th> </tr> </tfoot> </table> </div> <script type="text/javascript"> $(document).ready(function() { $('#example').DataTable({ dom: 'Bfrtip', buttons: [ {extend: 'copy',text: 'COPY',}, {extend: 'csv',text: 'Export CSV'}, {extend: 'excel',text: 'Export Excel'}, {extend: 'pdf',text: 'Export PDF',exportOptions: {columns: ':visible'}, customize: function (doc) { setFont(doc);},}, {extend: 'print',text: 'Print'} ], }); }); function setFont(doc) { // // https://pdfmake.github.io/docs/fonts/custom-fonts-client-side/ // // Update pdfmake's global font list, using the fonts available in // the customized vfs_fonts.js file (do NOT remove the Roboto default): pdfMake.fonts = { Roboto: { normal: 'Roboto-Regular.ttf', bold: 'Roboto-Medium.ttf', italics: 'Roboto-Italic.ttf', bolditalics: 'Roboto-MediumItalic.ttf' }, Yantramanav: { normal: 'Yantramanav.ttf', bold: 'Yantramanavbold.ttf', italics: 'Yantramanavitalics.ttf', bolditalics: 'Yantramanavbolditalics.ttf' } }; // modify the PDF to use a different default font: doc.defaultStyle.font = "Yantramanav"; } </script> </body>
"Yantramanavbolditalics.ttf": "XXXX.............XXXX" }; Replace the "AAEAA.........MYXRu" with the base64-encoded string of your font file. You can use this site to generate the string (TTF to Base64): https://www.giftofspeed.com/base64-encoder/ Downloadfont from this link: https://fonts.google.com/specimen/Yantramanav?query=yan#standard-styles --> <script src="vfs_fonts.js"></script> <script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.html5.min.js"></script> <script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.print.min.js"></script> </head> <body> <div style="margin: 20px;"> <table id="example" class="display nowrap dataTable cell-border" style="width:100%"> <thead> <tr> <th>Name</th> <th>Grievance</th> </tr> </thead> <tbody> <tr> <td>Shikha Pathak</td> <td>टेस्ट
How to Implement
1. I generated a new vfs_fonts.js file, containing the contents of an Yantramanav TTF file. I also refer to this new local vfs_fonts.js file, instead of the Cloudflare version.
The vfs_fonts.js file has the following structure:
this.pdfMake = this.pdfMake || {}; this.pdfMake.vfs = {
"Yantramanav.ttf": "AAEAA...MYXRu",
"Yantramanavbold.ttf": "AAEAA...MYXRu",
"Yantramanavitalics.ttf": "AAEAA...MYXRu",
"Yantramanavbolditalics.ttf": "XXXX...XXXX"
};
Each of the "AAEAA...MYXRu strings is the base64-encoded representation of the related font file.
You can use this site to generate the string (TTF to Base64): https://www.giftofspeed.com/base64-encoder/
Paste the (very long) string generated into your vfs_fonts.js file.
2. buttons: [
{extend: 'copy',text: 'COPY',},{extend: 'csv',text: 'Export CSV'},
{extend: 'excel',text: 'Export Excel'},
{extend: 'pdf',text: 'Export PDF',exportOptions: {columns: ':visible'},
customize: function (doc) {
setFont(doc);},},
{extend: 'print',text: 'Print'}
],
function setFont(doc) {
//
// https://pdfmake.github.io/docs/fonts/custom-fonts-client-side/
//
// the customized vfs_fonts.js file (do NOT remove the Roboto default):
pdfMake.fonts = {
Roboto: {
normal: 'Roboto-Regular.ttf',
bold: 'Roboto-Medium.ttf',
italics: 'Roboto-Italic.ttf',
bolditalics: 'Roboto-MediumItalic.ttf'
},
Yantramanav: {
normal: 'Yantramanav.ttf',
bold: 'Yantramanavbold.ttf',
italics: 'Yantramanavitalics.ttf',
bolditalics: 'Yantramanavbolditalics.ttf'
}
};
// modify the PDF to use a different default font:
doc.defaultStyle.font = "Yantramanav";
}
0 comments:
Post a Comment