Bootstrap-table导出PDF西班牙语特殊字符乱码问题求助

问题背景 #

在Visual Studio的.NET项目中，使用Bootstrap-table结合tableExport.js（依赖jsPDF）生成PDF时，西班牙语特殊字符（á、é、í、ó、ú、ñ）显示异常。原因是PDF标准14种字体仅支持ASCII编码，需集成含UTF-8字形的自定义字体，但由于未直接实例化jsPDF，无法将字体配置与Bootstrap-table的导出流程结合。

现有代码 #

$(function () {
    function DoCellData(cell, row, col, data) { }
    function DoBeforeAutotable(table, headers, rows, AutotableSettings) { }

    $("#frm-Search").on("submit", function (event) {
        event.preventDefault();
        var $frm = $(this);
        var formData = $frm.serializeObject();
        if ($frm.valid()) {
            /*loading(true);*/
            GetSpanishData(formData).then(function (result) {
                $("#tbReport").bootstrapTable({
                    search: true,
                    pagination: true,
                    export: true,
                    exportOptions: {
                        fileName: 'TheSpanishReport',
                        jspdf: {
                            format: 'bestfit',
                            margins: { left: 20, right: 20, top: 20, bottom: 20 },
                            autotable: {
                                styles: { overflow: 'linebreak' },
                                tableWidth: 'wrap',
                                tableExport: {
                                    onBeforeAutotable: DoBeforeAutotable,
                                    onCellData: DoCellData
                                }
                            }
                        },
                    },
                    exportTypes: ['csv', 'excel', 'pdf'],
                    data: result
                });
                $("#tbReport").bootstrapTable('refreshOptions', {
                    data: result
                });
                $("#tableReport").attr("hidden", false);
            });
        }
        return false;
    }).validate();
});

function GetSpanishData(data) {
    return $.ajax({
        url: ServerAdress/GetSpanishData',
        type: 'POST',
        dataType: 'json',
        data: AntiForgeryToken(data)
    });
}

尝试过的无效配置 #

直接在jspdf根配置中添加setFont未生效：

jspdf: {
    setFont:'MyFontName',
    format: 'bestfit',
    margins: { left: 20, right: 20, top: 20, bottom: 20 },
    autotable: {
        styles: { overflow: 'linebreak' },
        tableWidth: 'wrap',
        tableExport: {
            onBeforeAutotable: DoBeforeAutotable,
            onCellData: DoCellData
        }
    }
},

解决方案 #

步骤1：转换并引入自定义字体 #

• 选择支持西班牙语所有特殊字符的TTF字体（如Arial Unicode MS、Noto Sans等）
• 使用jsPDF自带的/fontconverter/fontconverter.html工具，将TTF文件转换为包含base64编码及字体注册代码的JS文件
• 在项目中引入该JS文件（确保加载顺序在jsPDF、tableExport.js、Bootstrap-table之后）

步骤2：通过钩子函数配置字体 #

修改DoBeforeAutotable函数，直接操作jsPDF实例和表格样式：

function DoBeforeAutotable(table, headers, rows, AutotableSettings) {
    // 获取导出用的jsPDF实例
    const doc = AutotableSettings.doc;
    // 设置自定义字体（名称需与转换后的JS文件中定义的一致）
    doc.setFont("MyFont", "normal");
    // 强制表格使用自定义字体，覆盖默认样式
    AutotableSettings.styles.font = "MyFont";
    AutotableSettings.styles.fontSize = 10; // 按需调整字号
}

步骤3：确认配置关联 #

确保Bootstrap-table的exportOptions.jspdf.autotable.tableExport.onBeforeAutotable仍指向修改后的DoBeforeAutotable函数，无需保留根配置中的setFont项。

关键注意事项 #

• 转换后的字体JS文件会自动执行addFileToVFS和addFont，无需手动调用
• 必须验证所选字体包含西班牙语特殊字符的字形，否则仍会出现乱码
• onBeforeAutotable是Bootstrap-table导出PDF时唯一能直接操作jsPDF实例的入口，是实现字体配置的核心

内容的提问来源于stack exchange，提问作者David Lazaro