jquery jsPDF大表格,第二页中的标题重叠

hi3rlvi2  于 2023-04-05  发布在  jQuery
关注(0)|答案(4)|浏览(217)

我使用jsPDFsvg_to_pdf将SVG和表格导出为PDF。这是我的代码:

function svg_to_pdf(svg, callback) {

console.log("svgtopdf.js");
svgAsDataUri(svg, {}, function(svg_uri) {
var image = document.createElement('img');

image.src = svg_uri;
image.onload = function() {
  var canvas = document.createElement('canvas');
  var context = canvas.getContext('2d');
  var doc = new jsPDF('portrait', 'pt', 'a4', true);
  var dataUrl;

  source = $('#datos_alumnos')[0];
  specialElementHandlers = {
      '#bypassme' : function(element, renderer){
          return true;
      }
  };

  margins = {
            top: 40,
            bottom: 60,
            left: 40,
            width: 270
        };

  canvas.width = image.width;
  canvas.height = image.height;
  context.drawImage(image, 0, 0, image.width, image.height);
  dataUrl = canvas.toDataURL('image/jpeg');
  doc.addImage(dataUrl, 'JPEG', 0, 0, 500, 263);

  doc.fromHTML(
    source,
    40,
    270, {
        'width': 550,
        'elementHandlers': specialElementHandlers
    },

    function(dispose){
        //doc.save('SVG.pdf');
    }
    , margins);

callback(doc);
}
});
}

结果是一个PDF,图像在顶部,表格在下一个。当它进入第二页时,问题就来了,因为表格的标题与第一行重叠,看起来像这样。
http://i.imgur.com/vlfm4Fv.png
可以去掉第二页的标题吗?

kgqe7b3p

kgqe7b3p1#

好了,我已经找到了一个可能的解决方案,如果你正在使用这个脚本的jsPDF
https://raw.githubusercontent.com/MrRio/jsPDF/master/dist/jspdf.debug.js
你可以下载它,并修改行5201有一个负值,例如;

this.margins.top = -50;

这样,PDF的第二页上就没有标题了。
我试着用代码玩了一下,没有太大的成功,如果我找到一个更好的方法,我会更新这个答案(不知道我是否被允许这样做)。

n7taea2i

n7taea2i2#

当你绘制表格时,只需用途:

startY: doc.internal.getNumberOfPages() > 1 ? doc.autoTableEndPosY() + 20 : 200,
e4yzc0pl

e4yzc0pl3#

尝试添加css类,如-head { display:tfoot { display:table-row-group } tr { page-break-inside:避免}

drkbr07n

drkbr07n4#

我做了一个工作,而不是添加页眉到所有的网页,添加页眉单独的第一页。从第二页添加它作为页脚。

相关问题