Bootstrap-Table导出PDF时印度货币符号不显示如何解决

使用bootstrap-table展示数据时，导出PDF后印度货币符号（₹）无法正常显示，示例代码如下：

<table id="table"  data-show-export="true"  data-pagination="false"  data-side-pagination="server"  data-click-to-select="true"  data-toolbar="#toolbar"  data-show-toggle="true"  data-show-columns="true">  
  <thead>    
    <tr>     
      <th scope="col" > No.</th>     
      <th>Item</th>     
      <th>Price</th>    
    </tr>   
  </thead>  
  <tbody>    
    <tr>      
      <td>1</td>      
      <td>Item 0</td>      
      <td>₹100</td>    
    </tr>    
    <tr>      
      <td>2</td>      
      <td>Item 1</td>      
      <td>₹200</td>    
    </tr>    
    <tr>      
      <td>3</td>      
      <td>Item 2</td>      
      <td>₹300</td>    
    </tr>    
    <tr>      
      <td>4</td>      
      <td>Item 3</td>      
      <td>₹400</td>    
    </tr>    
    <tr>      
      <td>5</td>      
      <td>Item 4</td>      
      <td>₹500</td>    
    </tr>    
    <tr>      
      <td>6</td>      
      <td>Item 5</td>      
      <td>₹600</td>    
    </tr>    
    <tr>      
      <td>7</td>      
      <td>Item 6</td>      
      <td>₹8000</td>    
    </tr>  
  </tbody>
</table>

bootstrap-table的PDF导出依赖jsPDF库，默认使用的字体不支持Unicode特殊字符（比如₹），需要配置支持Unicode的字体来解决：

1. 准备支持Unicode的字体文件 #

选择一款支持Unicode的字体（比如Noto Sans、Arial Unicode MS），通过jsPDF的字体转换器将字体文件转换成jsPDF可识别的JS格式，然后在页面中引入该JS文件。

2. 配置bootstrap-table导出参数 #

可以通过HTML属性或JS初始化两种方式指定PDF导出使用的字体：

方式一：HTML属性配置 #

在table标签中添加data-export-options属性，指定PDF的字体：

<table id="table" 
       data-show-export="true" 
       data-pagination="false" 
       data-side-pagination="server" 
       data-click-to-select="true" 
       data-toolbar="#toolbar" 
       data-show-toggle="true" 
       data-show-columns="true"
       data-export-options='{"pdf": {"fontName": "NotoSans", "fontSize": 10}}'>

方式二：JS初始化配置 #

如果是通过JS初始化bootstrap-table，直接在配置中添加exportOptions：

$('#table').bootstrapTable({
  exportOptions: {
    pdf: {
      fontName: 'NotoSans', // 替换为你引入的字体名称
      fontSize: 10
    }
  }
});

3. 全局替换jsPDF默认字体（可选） #

如果希望所有PDF导出都使用该字体，可以全局修改jsPDF的默认字体：

// 先添加字体（确保已引入转换后的字体JS文件）
jsPDF.API.addFont('NotoSans-normal.ttf', 'NotoSans', 'normal');
jsPDF.API.addFont('NotoSans-bold.ttf', 'NotoSans', 'bold');

// 设置默认字体
jsPDF.defaults.font = 'NotoSans';

临时替代方案（不推荐） #

如果暂时无法处理字体，可以将₹替换为HTML实体₹，但这种方式仅在部分渲染场景有效，优先推荐字体配置方案。

内容的提问来源于stack exchange，提问作者Rupesh Gondariya