Question

我有12张图，我想生成2页的pdf，每页有6张图。但是，当我将svg转换为canvas时，jspdf只能看到两个潜水的一部分。

$('#downloadx2').click(function() {

      var svgElements = $("#body_id").find('svg');

      //replace all svgs with a temp canvas
      svgElements.each(function() {
        var canvas, xml;

        // canvg doesn't cope very well with em font sizes so find the calculated size in pixels and replace it in the element.
        $.each($(this).find('[style*=em]'), function(index, el) {
          $(this).css('font-size', getStylex(el, 'font-size'));
        });

        canvas = document.createElement("canvas");
        canvas.className = "screenShotTempCanvas";
        //convert SVG into a XML string
        xml = (new XMLSerializer()).serializeToString(this);

        // Removing the name space as IE throws an error
        xml = xml.replace(/xmlns=\"http:\/\/www\.w3\.org\/2000\/svg\"/, '');

        //draw the SVG onto a canvas
        canvg(canvas, xml);
        $(canvas).insertAfter(this);
        //hide the SVG element
        ////this.className = "tempHide";
        $(this).attr('class', 'tempHide');
        $(this).hide();
      });

      var doc = new jsPDF("p", "mm");
      var width = doc.internal.pageSize.width;    
      var height = doc.internal.pageSize.height;

      html2canvas($("#div_pdf1"), {
        onrendered: function(canvas) {
          var imgData = canvas.toDataURL(
            'image/png', 0.1);

            doc.addImage(imgData, 'PNG', 5, 0, width, height/2,'','FAST');
            doc.addPage();

        }
      });


      html2canvas($("#div_pdf2"), {
        onrendered: function(canvas2) {
          var imgData2 = canvas2.toDataURL(
            'image/png', 0.1);


            doc.addImage(imgData2, 'PNG', 5, 0, width, height/2,'','FAST');
            doc.save('.pdf');
        }
      });
    });




<body id="body_id">
   <div id="div_pdf1" >
     <svg></svg>
     <svg></svg>
     <svg></svg>
    </div>

   <div id="div_pdf1" >
     <svg></svg>
     <svg></svg>
     <svg></svg>
   </div>
</body>

当我运行此代码时，生成的pdf将使用相同的画布查看第一个（div_pdf1）div的两个页面。那么如何让它们以PDF格式出现在两页中。

Answer 1

您似乎尝试按顺序运行2个部分，但这不是javascript的工作原理并实际运行您的代码。

没什么大不了的，只是你的心智模型和执行代码的引擎之间的一个小误解。

一个快速的临时调试工具，用于查看正在发生的情况并验证是否存在差异，将console.log添加到关键点并在运行代码后检查其打印输出的顺序。

console.log('[1] just before: svgElements.each');
svgElements.each(function() {
  console.log('[2] just after: svgElements.each');

还围绕这部分代码：

console.log('[3] just before html2canvas-div_pdf1');
html2canvas($("#div_pdf1"), {
  console.log('[4] just after html2canvas-div_pdf1');

最后围绕这部分代码：

console.log('[5] just before html2canvas-div_pdf2');
html2canvas($("#div_pdf2"), {
  console.log('[6] just after html2canvas-div_pdf2');

我怀疑您会看到代码没有按照您认为的顺序打印日志行。

接下来，您可以尝试使用一个setTimeout函数将2次调用包装到html2canvas，并强制延迟执行该代码一段任意时间。

请注意，这不是推荐的最终生产质量解决方案，但它会使代码输出成为您想要的。

svg转换为画布 - 无法生成多页pdf

1 个答案: