Question

当我用jsPDF书写第一页时，它可以正确输出图像，但是在创建第二页和后面的页面后，图像的大小变得混乱，无法设置。我检查了坐标，宽度和高度，但它们是正确的。这是我正在使用的所有代码：

 getBase64Image = (img) => {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);
    var dataURL = canvas.toDataURL("image/png");
    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

saveAsPDF = () => {
var doc = new jsPDF();
let width = 100;
[...Array(this.chartTypes.length)].map((_, typeIdx) => {
  let chartType = this.chartTypes[typeIdx];
  doc.text(chartType, 20, 10);
  let x = 1;
  let y = 1;
  let urlArr = this.get_analysis_charts(chartType);
  urlArr.map((pathArr, chartIdx) => {
      let chartId = '#chart_' + typeIdx + '_' + chartIdx;
      let imgElem = d3.select(chartId).node();
      let ratio = imgElem.height / imgElem.width;
      let height = width*ratio;

      if (chartIdx % 2 === 0) {
        x = 1;
        y = 1;
        if (chartIdx > 0) {
          y = height + 1;
        } 
      } else {
        x = x + width + 1;
      } 

      let base64Img = this.getBase64Image(imgElem);
      doc.addImage(base64Img, 'PNG', x, y, width, height);
})
doc.addPage();
})
  doc.save('new_pdf.pdf');
}

因此，我看到的是第一页正确地填充了4张图像，但在下一页上却裁剪出了图像，好像它们根本没有调整大小并且不适合页面。我尝试将width和height设置为常数，但这并没有帮助，所以问题出在其他地方。

更新

事实证明，只有当我提供getBase64Image函数4*width和4*height的功能时，其他页面才开始工作，但是首页图像看起来很小。因此，我想这是画布绘制的问题。其他页面可以与以下代码配合使用：

getBase64Image = (img, width, height) => {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, width, height);
    var dataURL = canvas.toDataURL("image/png");
    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
  }

在saveAsPDF内部，以下两行是相关的：

let base64Img = this.getBase64Image(imgElem, 4*width, 4*height);
doc.addImage(base64Img, 'PNG', x, y, width, height);

但是使用此代码无法正确生成第一页。尽管现在我只能添加if-else条件并加以解决，但我不知道为什么会发生这种情况以及如何避免这种情况。

更新

在某个时刻，错误无处不在，可能是由于某些浏览器内存问题，很难说：

未捕获的RangeError：无效的字符串长度

使用pdf生成doc.save()时。

使用jsPDF创建新页面会弄乱新图像输出

0 个答案: