在javascript中将html导出为pdf答案

【问题标题】：Export html to pdf in javascript在javascript中将html导出为pdf
【发布时间】：2016-06-08 00:24:30
【问题描述】：

我使用html2canvas 从 HTML 创建 PDF

结果：生成的地图没有路径
这是我所拥有的：

html2canvas(document.getElementById('pdf-canvas'), {
      onrendered: function (canvas) {
          var data = canvas.toDataURL("image/png");
          var docDefinition = {
              content: [{
                  image: data,
                  width: 500,
              }]
          };
          pdfMake.createPdf(docDefinition).download("Score_Details.pdf");
      }
  });

然后我用canvg和fabric

结果：它正在生成没有地图的路径
这是我所拥有的

1)fabric 

var canvas = new fabric.StaticCanvas( undefined, {
    width: 500,
    height: 500,
} );
 var svgEl = document.body.getElementsByTagName('svg')[0];
 var serializer = new XMLSerializer();
 var svgStr = serializer.serializeToString(svgEl);
 var path = fabric.loadSVGFromString(svgStr,function(objects, options) {      
   var obj = fabric.util.groupSVGElements(objects, options);
   canvas.add(obj).renderAll();      
   var data = canvas.toDataURL();       
   var docDefinition = {
       content: [{
           image: data,
           width: 500,
       }]
   };
   pdfMake.createPdf(docDefinition).download("Score_Details.pdf");
 });

2)canvg

var svgImage = document.body.getElementsByTagName('svg')[0];
var serializer = new XMLSerializer();
var str = serializer.serializeToString(svgImage);   
var $canvas = $('<canvas/>');
$canvas.attr('width', '150px;')
$canvas.attr('height', '150px;')
$canvas.appendTo('body');
canvg($canvas.get(0), str);


html2canvas($canvas, {
  onrendered: function (canvas) {
    var a = document.createElement('a');
    a= canvas.toDataURL();
    var docDefinition = {
      content: [{
          image: a,
          width: 500,
      }]
  };
  pdfMake.createPdf(docDefinition).download("Score_Details.pdf");
  $canvas.remove(); //removes canvas from body
  }
});

我是否必须使用另一个库，或者我是否错过了使用 html2canvas、canvg 和 fabric 的东西？

【问题讨论】：

你应该用英文提问：stackoverflow.com/help/how-to-ask

标签： javascript html2canvas

【解决方案1】：

我找到了一个用于导出为 PDF 文件的库，你可以试试。 jsPDF

【讨论】：

我试过这个库，但这个灵魂不能解决我的问题。路径未生成

【解决方案2】：

J'ai testé jsPDF mais j'arrive toujours pas à générer le trajet 语音代码

html2canvas(document.getElementById("pdf-canvas"), {
  onrendered: function(canvas) {

      var imgData = canvas.toDataURL('image/png');
      console.log('Report Image URL: '+imgData);
      var doc = new jsPDF('p', 'mm', [297, 210]); //210mm wide and 297mm high

      doc.addImage(imgData, 'PNG', 10, 10);
      doc.save('sample.pdf');
  }
});

【讨论】：