使用 doc.output() 的问题 - jsPDF

Question

我在使用时遇到问题jsPDF。当使用doc.output('datauri');在另一个窗口中打开新的 PDF 时，没有任何反应。

这就是我正在做的事情：

       $(".email_button").click(function(){
            // LOOP THROUGH EACH CANVAS SECTION AND STORE THE DATA INTO PDF FORM USING JSPDF CONVERT 
            var canvas = $(".ifp_container_printing_15 canvas").get();
            var imgData = canvas[0].toDataURL();
            var doc = new jsPDF();

            doc.setFontSize(40);
            doc.text(35, 25, "Paranyan loves jsPDF");
            doc.addImage(imgData, 'png', 15, 40, 180, 160);
            doc.output('dataurlnewwindow');     //opens the data uri in new window
        });

这是我的来源：

<script type="text/javascript" src="/printing/jsPDF-master/jspdf.js"></script>
<script type="text/javascript" src="/printing/jsPDF-master/libs/png_support/zlib.js"></script>
<script type="text/javascript" src="/printing/jsPDF-master/libs/png_support/png.js"></script>
<script type="text/javascript" src="/printing/jsPDF-master/jspdf.plugin.addimage.js"></script>
<script type="text/javascript" src="/printing/jsPDF-master/jspdf.plugin.png_support.js"></script>

我没有收到任何错误，转换后的图像工作完全正常，我能够输出该图像image data url。只有在使用时才output不会发生任何事情。建议、想法？

更新：

这是我现在正在做的事情：

        $(".email_button").click(function(){
            // LOOP THROUGH EACH CANVAS SECTION AND STORE THE DATA INTO PDF FORM USING JSPDF CONVERT 
            var canvas = $(".ifp_container_printing_15 canvas").get();
            var ctx=canvas[0].getContext("2d");
            ctx.fillRect(20,20,150,100);
            ctx.fillStyle = 'white'; // or whatever color
            ctx.fillRect(0, 0, canvas[0].height, canvas[0].width);

            var imgData = canvas[0].toDataURL('image/jpeg');
            console.log(imgData);
            var doc = new jsPDF();
            doc.addImage(imgData, "jpeg", 60,50);           
            doc.output('dataurlnewwindow');
        });

这工作正常，但我只得到白色背景，没有显示图像。建议？

解决了：

除了遵循下面的答案之外，如果您需要使用KinecticJS我使用的以下内容填充图层（画布）的背景：

var box = new Kinetic.Rect({
            width: floorObj.width,
            height: floorObj.height,
            fill: 'white',
            draggable: false,
            name: 'background'
});

这里发生的事情是。我的图像是一个PNG，所以默认情况下它有一个透明的背景，但不能很好地转移到jsPDF 所以我只是创建了一个简单的图层，它使用相同的图像尺寸来创建白色背景。所以它的渲染效果PDF非常好。

Answer 1

尝试使用它而不是最后一行。

window.open(doc.output('bloburl'), '_blank');

我还遇到了 adblock 阻止我的新窗口的问题。