使用jsPDF导出PDF时Bootstrap图标显示异常问题求助

• 确保Bootstrap Icons字体文件被正确嵌入PDF
  Bootstrap Icons基于字体实现，导出工具需识别并嵌入对应字体文件：

  1. 优先本地引入Bootstrap Icons的CSS文件，避免CDN加载不稳定导致字体缺失
  2. 浏览器打印导出时，在打印预览的更多设置里勾选背景图形，确保字体与样式完整加载

• 替换为SVG图标替代字体图标
  字体嵌入问题无法解决时，直接用SVG版本替换<i>标签，可从Bootstrap Icons官网复制对应SVG代码，示例：

  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle text-info" viewBox="0 0 16 16">
    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
    <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
  </svg>
  

  SVG是矢量图形，导出PDF不会出现字体缺失问题，样式可通过class或fill属性调整。

• 调整第三方导出工具的渲染参数
  若使用jsPDF、wkhtmltopdf等工具：

  • jsPDF配合html2canvas时，开启useCORS和allowTaint选项，或提前将图标转为Canvas对象再添加到PDF
  • wkhtmltopdf添加命令行参数--enable-local-file-access和--no-stop-slow-scripts，确保字体文件正常加载渲染

• 排查CSS样式冲突
  全局CSS可能覆盖图标样式：

  1. 检查是否有针对<i>标签的全局font-family设置，强制替换了Bootstrap Icons字体
  2. 给图标标签添加优先级更高的样式，确保字体生效：

  .bi {
    font-family: "Bootstrap Icons" !important;
    font-style: normal;
  }
  

内容的提问来源于stack exchange，提问作者ester shwartz