Laravel电商网站PDF导出孟加拉语字体显示为方块的解决求助

嘿，这个问题我之前帮朋友处理过！孟加拉语显示成方块，本质就是PDF导出工具没加载能渲染孟加拉语的字体——毕竟默认字体大多只支持英文和常见西欧语言。看你用的是DataTables的PDF导出功能，底层是pdfmake，咱们直接在你现有的代码里加几行字体配置就能搞定，不用大改，具体步骤如下：

第一步：准备支持孟加拉语的字体 #

先找一个免费的孟加拉语字体，比如SolaimanLipi或者Nikosh，这俩都是常用的孟加拉语免费字体，下载.ttf格式的文件，放到你Laravel项目的public/fonts/目录下（如果没有fonts文件夹就新建一个）。

第二步：修改DataTables的PDF导出配置 #

在你现有的customize函数里，添加字体定义和默认字体设置，修改后的代码如下：

buttons: [
    {
        extend: 'pdf',
        text: '<i title="export to pdf" class="fa fa-file-pdf-o"></i>',
        exportOptions: {
            columns: ':visible:not(.not-exported)',
            rows: ':visible',
            stripHtml: false
        },
       customize: function(doc) {
            // 👇 新增：配置孟加拉语字体
            // 设置全局默认字体为孟加拉语字体
            doc.defaultStyle.font = 'SolaimanLipi';
            // 标题和表头也用这个字体
            doc.styles.title.font = 'SolaimanLipi';
            doc.styles.header.font = 'SolaimanLipi';
            
            // 定义字体文件路径，把SolaimanLipi换成你用的字体名
            doc.content.unshift({
                font: {
                    SolaimanLipi: {
                        normal: '{{ asset("fonts/SolaimanLipi.ttf") }}',
                        bold: '{{ asset("fonts/SolaimanLipi.ttf") }}',
                        italics: '{{ asset("fonts/SolaimanLipi.ttf") }}',
                        bolditalics: '{{ asset("fonts/SolaimanLipi.ttf") }}'
                    }
                }
            });

            // 你原来的表格边距处理代码
            doc.content[1].table.body.forEach(function(row) {
                row.forEach(function(cell) {
                    cell.margin = [5, 0, 5, 0];
                });
            });
        
            // 你原来的图片处理代码
            for (var i = 1; i < doc.content[1].table.body.length; i++) {
                if (doc.content[1].table.body[i][0].text.indexOf('<img src=') !== -1) {
                    var imagehtml = doc.content[1].table.body[i][0].text;
                    var regex = /<img.*?src=['"](.*?)['"]/;
                    var src = regex.exec(imagehtml)[1];
                    var tempImage = new Image();
                    tempImage.src = src;
                    var canvas = document.createElement("canvas");
                    canvas.width = tempImage.width;
                    canvas.height = tempImage.height;
                    var ctx = canvas.getContext("2d");
                    ctx.drawImage(tempImage, 0, 0);
                    var imagedata = canvas.toDataURL("image/png");
                    delete doc.content[1].table.body[i][0].text;
                    doc.content[1].table.body[i][0].image = imagedata;
                    doc.content[1].table.body[i][0].fit = [30, 30];
                }
            }
        }
    },
    // 其他按钮代码...
]

几个要注意的细节： #

• 字体路径要确保正确：用asset()函数生成的路径是项目public目录下的绝对路径，所以只要你把字体放到public/fonts/里就没问题。
• 如果你用的是其他孟加拉语字体，把代码里的SolaimanLipi全部换成你字体的名字，对应的.ttf文件名也要改对。
• 有些字体有单独的粗体/斜体文件，如果你的字体没有，就都指向同一个.ttf文件就行，不影响显示。

如果试了之后还是有问题，大概率是字体文件没加载到，你可以打开浏览器控制台看看有没有404错误，检查字体路径是否正确。要是还有其他问题，随时说~

备注：内容来源于stack exchange，提问作者Naimur Sharon