使用jsPDF渲染带btn-close类按钮时出现Invalid arguments错误如何解决？

复现代码 #

let pdf = new jsPDF("p", "pt", "A4");
pdf.html("<button class='btn-close'>hello</button>", {
    width: 170,
    x: 30,
    y: 30,
    callback() {
        pdf.save("questions.pdf");
    }
});
pdf.save("questions.pdf");

报错信息 #

jsPDF.context2d.moveTo: Invalid arguments
Arguments { 0: -99996, 1: NaN, … }
0: -99996
1: NaN
callee:
length: 2
Symbol(Symbol.iterator): function values()
<get callee()>: function ()
<set callee()>: function ()
: Object { … }

原因及解决办法 #

btn-close类的Bootstrap样式包含position: absolute和负偏移量（如right: var(--bs-btn-close-x)），这些属性在jsPDF的HTML渲染引擎中会被解析成异常坐标值，触发canvas绘图的无效参数错误。

提供两种可行解决思路：

• 方法一：覆盖btn-close的定位样式
  给按钮添加自定义类，重置定位相关属性，让jsPDF能正常解析：

  <button class='btn-close custom-pdf-btn'>hello</button>
  

  对应CSS：

  .custom-pdf-btn {
    position: static !important;
    right: auto !important;
    top: auto !important;
  }
  

• 方法二：自定义关闭按钮样式
  不使用原生btn-close类，手动实现类似样式，规避引发问题的定位属性：

  <button class='custom-close-btn'>×</button>
  

  对应CSS：

  .custom-close-btn {
    border: none;
    background: transparent;
    font-size: 1.5rem;
    cursor: pointer;
    color: #000;
  }
  

另外注意：代码中调用了两次pdf.save()，会导致重复保存文件，建议仅保留callback内的调用。

内容的提问来源于stack exchange，提问作者Ezzeldien Rashad