hhurz / tableExport.jquery.plugin

jQuery plugin to export a html table to JSON, XML, CSV, TSV, TXT, SQL, Word, Excel, PNG and PDF
MIT License
990 stars 716 forks source link

Indian Currency Not Showing In Pdf Export #369

Closed ShreeSoftech-Rupesh closed 1 year ago

ShreeSoftech-Rupesh commented 1 year ago

indian currency not show in pdf

image

Bootstap-table export Documentation Url : https://bootstrap-table.com/docs/extensions/export/#exporttypes

Example(s) : https://live.bootstrap-table.com/code/ShreeSoftech-Rupesh/15888

hhurz commented 1 year ago

To achive this you would need to include a Hindi true type font into jsPdf, which this plugin is using as pdf producer,

You could try it as described in the example code below. But note that this is not a specific bootstrap table example and it still requires to download and add the ttf:

<!DOCTYPE html>
<html lang=zh>
  <head>
    <meta charset="utf-8">
    <title>Issue 369: Indian Currency Not Showing In Pdf Export</title>

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="../libs/FileSaver/FileSaver.min.js"></script>
    <script type="text/javascript" src="../libs/jsPDF/jspdf.umd.min.js"></script>
    <script type="text/javascript" src="../tableExport.js"></script>

    <style type="text/css">
      <!--
      caption {
        font-size: 1em;
        white-space: nowrap;
        text-align: left;
      }

      table  {
        border-collapse: collapse;
        margin-top: 2em;
      }

      table > thead > tr > td,
      table > thead > tr > th {
        background-color: gray;
        border: 1px solid #efefef;
        color: white;
        padding: 0.2rem;
      }

      table > tbody > tr > td {
        border: 1px solid #999;
        padding: 0.2rem;
      }
      -->
    </style>

    <script type="text/javaScript">
      function doExport(selector, params) {
        var options = {
          tableName: 'Table name'
        };

        $.extend(true, options, params);
        $(selector).tableExport(options);
      }

    function doDocCreated(doc) {
      // In the next line replace <base64> with a base64 encoded font, 
      // e.g Hind-Regular.ttf from Google Fonts family "Hind".
      // To do this, you need to upload your Indian font to a Base64 file encoder 
      // and use its output in place of <base64> while preserving the apostrophes
      // so it would look similar like this:
      // const _fonts = "AAEAAAARAQAABAAQR0RFRkN6Q0gAAAMAAAAAxEdQT1Mmhse6AA ... kUBu/5FAbtAAAA=";
      const _fonts = "<base64>";

      if (_fonts === "<base64>") {
        alert ("Missing base64 encoded font, e.g Hind-Regular.ttf");
        return;
      }

      doc.addFileToVFS('Hind-Regular.ttf', _fonts);
      doc.addFont('Hind-Regular.ttf', 'Hind-Regular', 'normal');
      doc.setFont('Hind-Regular');

      doc.text(15, 120, 'नमस्ते'); // Example text output
    }

  </head>
  <body>
    <p>
    <a href="#" onClick="doExport('#issue363', {
                                   type: 'pdf',
                                   jspdf: {orientation: 'l',
                                           onDocCreated: doDocCreated,
                                           autotable: {startY: 10,
                                                       margin: {left: 10, top: 10},
                                                       pageBreak: 'avoid'
                                                      }
                                          }
                                  });">
    <img src='icons/pdf.png' alt="PDF" style="width:24px"> PDF (jsPDF)</a>
    </p>
  <table id="issue369" class="">
    <caption>Issue 369: Indian Currency Not Showing In Pdf Export</caption>
    <thead>
    <tr>
       <th>नमस्ते</th>
       <th>नमस्ते</th>
       <th>नमस्ते</th>
    </thead>
    <tbody>
     <tr>
       <td>नमस्ते</td><td>नमस्ते</td><td>₹500</td>
     </tr>
     <tr>
       <td>नमस्ते</td><td>नमस्ते</td><td>₹600</td>
     </tr>
     <tr>
       <td>नमस्ते</td><td>नमस्ते</td><td>₹8000</td>
     </tr>
    </tbody>
  </table>
  </body>
</html>

grafik