小编dri*_*83s的帖子

将长html导入分割PDF

我的情况是:

单击按钮时,将html上的数据导入PDF文件.

由于此PDF必须具有一些复杂的必需样式,因此我的第一步是使用html2canvas.js将此页面转换为图像,然后使用jsPDF.js将此图像导入PDF

当数据太大时,必须拆分PDF以保存所有数据,这样做,所以我在这里使用了代码:https://github.com/MrRio/jsPDF/pull/397

我的问题是:在Firefox上,第2页或第3页上的PDF分割页面无法显示,它们完全是空白的.但在第1页它很好.(这是为firefox)

我测试了其他浏览器它们都很好.有人可以说明如何解决这个问题吗?

这是我的plnkr:http://plnkr.co/edit/ElvAsriK2nssq2U9pgKX?p = preview

function initTemplate(){
      datas=getData();
      var templateData=_.template($('#tpl').html(), datas);
      $('#tplW').html(templateData);
      getPDF();
      //  $('#tplW').append(_.template($('#tpl').html(), datas));
      // $('body').html( _.template($('#tpl').html(), datas));

 }


   function getData(){
      var htmlData=$(".MsoNormalTable .inner").find("tr.tablerow");
         var datas=[];
         $.each(htmlData,function(i,v){
             var d=[];
             var tds=$(v).find("td");
             $.each(tds,function(index,val){
                 d.push($(val).text());
             });
              datas.push(d); 
         });
       return datas;
   }



function getPDF() {
    // initTemplate();
         html2canvas($('#tplW')[0], {
        onrendered: function(canvas){

            canvasToImageSuccess(canvas);
        }
    });



    function canvasToImage (canvas){
        var img = new Image();
        var dataURL = canvas.toDataURL('image/png');
        img.src = dataURL;
        return img;
    }; …
Run Code Online (Sandbox Code Playgroud)

javascript pdf html2canvas jspdf

11
推荐指数
1
解决办法
347
查看次数

标签 统计

html2canvas ×1

javascript ×1

jspdf ×1

pdf ×1