Question

我正在使用jsPDF将html转换为pdf。在某些情况下，html具有svg图表，一些数据在生成的pdf中重复。

e.g。如果图表有图例，它们就会重复。请参见下面的截图。城市名称和百分比重复出现。

以下是创建pdf的代码。

pdf.addHTML($("#page1"), options, function(){
            pdf.addPage();
            pdf.addHTML($("#page2"), options, function(){
                pdf.addPage();
                pdf.output('dataurlnewwindow');
            });
        });

编辑1：

这是我到目前为止所想到的。

<div id="outerDiv">
    <div id="pieChart"></div>
</div>

当我这样做时，pdf.addHTML($("#pieChart")，这里没有问题。

但是，当我执行此操作pdf.addHTML($("#outerDiv")时，标签会重复出现。

这就是我生成c3js图表的方法

var pieChart  = c3.generate({
            bindto: '#pieChart',

编辑2： -

以下是我的整个代码。

<!DOCTYPE html>
<html>

<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
    <script type="text/javascript" src="http://gabelerner.github.io/canvg/rgbcolor.js"></script>
    <script type="text/javascript" src="http://gabelerner.github.io/canvg/StackBlur.js"></script>
    <script type="text/javascript" src="http://gabelerner.github.io/canvg/canvg.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-alpha1/html2canvas.js"></script>

    <script type='text/javascript'>
    function replaceAllSVGsWithTempCanvas(elemSelector) {
        var svgElements = $(elemSelector).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', getStyle(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).attr('class', 'tempHide');
            $(this).hide();
        });
    }

    jQuery(document).ready(function($) {
        genChart();
    });

    function genPDF() {
        var options = {
            background: '#fff'
        };
        var pdf = new jsPDF('p', 'pt', 'a4');

        replaceAllSVGsWithTempCanvas(".content");

        pdf.addHTML($("#chartOuter"), options, function() {
            pdf.output('dataurlnewwindow');

            $(".content").find('.screenShotTempCanvas').remove();
            $(".content").find('.tempHide').show().removeClass('tempHide');

        });
    }

    function genChart() {
        var chart = c3.generate({
            data: {
                columns: [
                    ['data1', 30],
                    ['data2', 120],
                ],
                type: 'pie'
            }
        });
    }
    </script>
</head>

<body class="content">
    <table width="100%">
        <tr>
            <td width="50%">
                <div id="chartOuter">
                    <div id="chart"></div>
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="left">
                <input type="button" onclick="genPDF();" value="Generate PDF" />
            </td>
        </tr>
    </table>
</body>

</html>

编辑3： -

我尝试使用html2canvas将html转换为canvas。它也给出了同样的问题。

编辑4：

我现在可以修复重复的问题。但是用pdf写的图表和文字有点模糊。基本上，我添加了函数replaceAllSVGsWithTempCanvas，然后在写入pdf时使用它。但似乎这个功能对html造成了污点，使内容写入pdf模糊。事实上，饼图等不再是圆圈，而是看起来像椭圆形。

使用修改过的js编辑了这个问题。

Answer 1

看起来它是html2canvas中的一个错误。您应该在加载html2canvas后添加底部代码来修复它（Credits转到this guy）：

NodeParser.prototype.getChildren = function(parentContainer) {
    return flatten([].filter.call(parentContainer.node.childNodes, renderableNode).map(function(node) {
        var container = [node.nodeType === Node.TEXT_NODE && node.parentElement.tagName !== "text" ? new TextContainer(node, parentContainer) : new NodeContainer(node, parentContainer)].filter(nonIgnoredElement);
        return node.nodeType === Node.ELEMENT_NODE && container.length && node.tagName !== "TEXTAREA" ? (container[0].isElementVisible() ? container.concat(this.getChildren(container[0])) : []) : container;
    }, this));
};

Fiddle

由于html2canvas作为模块加载，您应该直接在源代码中找到NodeParser.prototype.getChildren并编辑它以匹配上面的内容。这意味着您无法从CDN加载它。

Answer 2

我认为通过两个步骤使其正常工作 首先，我注释掉了“addhtml插件”，因为我的控制台出现了这个错误：

Refused to execute script from 'https://raw.githubusercontent.com/MrRio/jsPDF/master/plugins/addhtml.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.

其次，我将pdf源从#chartOuter更改为#chart。

    pdf.addHTML($("#chart"), options, function () {
    var string = pdf.output('datauristring');
    $('.preview-pane').attr('src', string)
});

并没有更多的成功。

<强> -----
编辑 （因为我最初误解了这个问题）

需要使用外部div ...也许是整页。

好吧......说实话，我不知道为什么会出现这个问题但我注意到重复文本有serif，即使它被指定为“sans-serif” 所以我专注于此。
我试图更改字体大小...它影响了重复，但文本没有遵循css规则。好。

然后我试着在pdf创建部分之前删除文本......并且魔术！ ;）

$(".c3 svg").css({"font-size":"0px"});

这是完整的脚本，我没有触及原始代码的其余部分。

jQuery(document).ready(function ($) {
        genChart();
    });

    function genPDF() {
        var options = { background: '#fff'};
        var pdf = new jsPDF('p', 'pt', 'a4');

        $(".c3 svg").css({"font-size":"0px"});    // <-- This does the trick !

        pdf.addHTML($("#chartOuter"), options, function () {
            var string = pdf.output('datauristring');
            $('.preview-pane').attr('src', string)
        });
    }

    function genChart() {
        var chart = c3.generate({
            data: {
                columns: [
                    ['data1', 30],
                    ['data2', 120],
                ],
                type : 'pie'
            }
        });
    }

Answer 3

您可以尝试使用ChartJS而不是C3。

我已经调整了你的代码并成功地尝试了它。

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css">

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.min.js"></script>

    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>

    <!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.debug.js"></script> -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-alpha1/html2canvas.js"></script>
    <script type="text/javascript" src="https://raw.githubusercontent.com/MrRio/jsPDF/master/plugins/addhtml.js"></script>

    <script type='text/javascript'>

        jQuery(document).ready(function ($) {
            genChart();
        });

        function genPDF() {
            var options = { background: '#fff'};
            var pdf = new jsPDF('p', 'pt', 'a4');

            pdf.addHTML($("#chartOuter"), options, function () {
                var string = pdf.output('datauristring');
                $('.preview-pane').attr('src', string)
            });
        }

        function genChart () {
          var ctx = $("#chart");
          var options = {};

          var myPieChart = new Chart(ctx, {
              type: 'pie',
              data: {
                    labels: [
                        "data1",
                        "data2"
                    ],
                    datasets: [{
                            data: [30, 120],
                            backgroundColor: [
                                "#FF6384",
                                "#36A2EB"
                            ],
                            hoverBackgroundColor: [
                                "#FF6384",
                                "#36A2EB"
                            ]
                        }]
                },
              options: options
          });
        }
    </script>
</head>
<body>

    <table width="100%">
        <tr>
            <td width="50%">
                <div id="chartOuter">
                    <!-- <div id="chart"></div> -->
                    <canvas id="chart" width="400" height="400"></canvas>
                </div>
            </td>
            <td>
                <iframe height="550px" class="preview-pane" type="application/pdf" width="100%" frameborder="0" style="position:relative;z-index:999"></iframe>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="left">
                <input type="button" onclick="genPDF();" value="Generate PDF"/>
            </td>
        </tr>
    </table>

</body>
</html>

Answer 4

动态加载pdf模糊文件，同一文件的官方演示非常清楚。我找不到问题了吗？

使用Chrome浏览器。版本73.0.3683.86（正式版）（64位）这是我的代码：

  async process(buffer, index) {
      
      // Processing the decrypted data stream
      let uint8Array = new Uint8Array(buffer);
      var word = await this.Uint8ToBase64(uint8Array);
      var decryptedData = CryptoJS.AES.decrypt(word, this.authorKey, {
        mode: CryptoJS.mode.ECB,
        padding: CryptoJS.pad.Pkcs7
      });
      
      // Then turn wordArray to uint8Array
      let getUint8Array = await this.wordArrayToU8(decryptedData);
      
      // decryption ends
      this.loadingPdf(getUint8Array, index);
    },
    async loadingPdf(getUint8Array, index) {
      
      // render canvas
      let pdf = await pdfjsLib.getDocument({ data: getUint8Array, cMapUrl: cMapUrl, cMapPacked: cMapPacked  });
      let page = await pdf.getPage(1).then(page => {
        return page;
      });
      let canvas = document.getElementById("the-canvas" + index);
      const CSS_UNITS = 96.0 / 72.0;
      const DEFAULT_SCALE = 1.7;
      const UNKNOWN_SCALE = 0;
      let viewport = page.getViewport( DEFAULT_SCALE * CSS_UNITS);
      if (canvas.dataset.runed) return;

      canvas.width = viewport.width*CSS_UNITS;
      canvas.height = viewport.height*CSS_UNITS;
      this.canvasW =
        this.canvasW > (1000 / viewport.height) * viewport.width
          ? this.canvasW
          : (1000 / viewport.height) * viewport.width;
      canvas.style.width = (1000 / viewport.height) * viewport.width;
      canvas.dataset.runed = true;
      var context = canvas.getContext('2d');
      
       // [Important] Turn off anti-aliasing
      context.mozImageSmoothingEnabled = false;
      context.webkitImageSmoothingEnabled = false;
      context.msImageSmoothingEnabled = false;
      context.imageSmoothingEnabled = false;
      await page.render({
        //enableWebGL: true,
        // canvasContext: context,
        transform: [CSS_UNITS, 0, 0, CSS_UNITS, 0, 0],
      //  transform: [1, 0, 0, 1, 0, 0],
        canvasContext: canvas.getContext("2d"),
        viewport: viewport
      });
      this.loadedPages.push(index)
    },

使用jsPDF创建的pdf中的重复内容

4 个答案: