使用jsPDF将HTML转换为PDF时▶字符显示异常的解决方案咨询

我之前也碰到过这种特殊字符转PDF乱码的情况，给你几个实用的解决思路，应该能搞定：

1. 给特殊字符指定支持的字体 #

你的▶字符是通过CSS伪元素生成的，默认字体很可能不包含这个Unicode（U+25B6）字符，所以转PDF时才会乱码。你只需要给伪元素指定一个支持该字符的系统字体就行，比如Segoe UI Symbol、Arial Unicode MS这些都是系统自带的，不用额外下载。

修改你的CSS代码，给伪元素加上字体声明：

details>summary::before {
    content: "▶";
    display: inline-block;
    margin-right: 5px;
    transition: transform 0.2s;
    font-family: "Segoe UI Symbol", "Arial Unicode MS", sans-serif; /* 新增这一行 */
}

2. 用SVG图标替代文字字符（最稳妥） #

如果字体调整还是没效果，干脆把文字箭头换成SVG图标，彻底避开字体兼容问题。这个SVG箭头的样式和原字符几乎一致，而且转PDF时不会有乱码问题。

修改伪元素的CSS：

details>summary::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 5px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M9.3 17.3l6-6c.4-.4.4-1 0-1.4l-6-6c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4L13.6 12l-5.9 5.9c-.4.4-.4 1 0 1.4z"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    transition: transform 0.2s;
}

3. 嵌入字体到jsPDF（进阶方案） #

要是你坚持想用文字字符，也可以嵌入一个包含U+25B6的字体到jsPDF里，虽然步骤稍多，但也能解决问题：

• 先找一个支持该字符的开源字体（比如Noto Sans），下载TTF格式文件；
• 把TTF文件转换成base64编码（可以用在线工具完成）；
• 在你的JS代码里添加字体并设置使用：

// 在创建doc实例后添加
doc.addFont('data:font/truetype;base64,[替换成你的字体base64内容]', 'NotoSans', 'normal');
doc.setFont('NotoSans');

同时在HTML的元素或CSS里指定使用这个字体，确保渲染时用的是嵌入的字体。

你可以先试试前两个办法，尤其是第二个，几乎不会有兼容问题，应该能快速解决你的问题。

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