javascript 问题使用 doc.output() - jsPDF
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25006362/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Issue using doc.output() - jsPDF
提问by David Biga
I am having an issue with using jsPDF. When using doc.output('datauri');to open a new PDF in another window, nothing happens.
我在使用jsPDF. 使用doc.output('datauri');在另一个窗口中打开新 PDF 时，没有任何反应。
Heres what I am doing:
这是我在做什么：
$(".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
});
Heres my sources:
继承人我的来源：
<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>
I am getting no errors and the image converted works completely fine and I am able to output that image data url. Its only when using the outputthat nothing happens.
Suggestions, thoughts?
我没有收到任何错误，转换后的图像完全正常，我可以将其输出image data url。只有在使用时才output什么都没有发生。建议，想法？
UPDATE:
更新：
Here is what I am doing now:
这是我现在正在做的事情：
$(".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');
});
This works fine but I only get a white background with no image showing. Suggestions?
这工作正常，但我只得到一个没有图像显示的白色背景。建议？
Solved:
解决了：
Along with following the answer below, if you need to fill the background of a layer(canvas) using KinecticJSI used the following:
除了遵循下面的答案之外，如果您需要使用以下方法填充图层（画布）的背景KinecticJS：
var box = new Kinetic.Rect({
width: floorObj.width,
height: floorObj.height,
fill: 'white',
draggable: false,
name: 'background'
});
What happened here is. My image is a PNGso by default it has a transparent background but that does not work well with transferring over to jsPDFSo I just created a simple layer which used the same image dimensions to create a white background. So on rendering of PDFit worked perfectly.
这里发生的事情是。我的图像是PNG默认情况下它具有透明背景，但不能很好地转移到 ，jsPDF因此我只是创建了一个简单的图层，该图层使用相同的图像尺寸来创建白色背景。所以在渲染PDF它时效果很好。
回答by Hyman
Looks like you're pulling out the data from your canvas element wrong. Looks like it should be more like this:
看起来您从画布元素中提取数据是错误的。看起来应该更像这样：
Where ever your canvas is originally drawn...do this before drawing your PNG.
您的画布最初是在哪里绘制的...在绘制 PNG 之前执行此操作。
canvas.fillStyle = 'white'; // or whatever color
canvas.fillRect(0, 0, canvas.height, canvas.width);
Then this again.
然后又是这个。
$(".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('image/jpeg').slice('data:image/jpeg;base64,'.length);
// Convert the data to binary form
imgData = atob(imgData);
var doc = new jsPDF();
doc.setFontSize(40);
doc.text(35, 25, "Paranyan loves jsPDF");
doc.addImage(imgData, 'JPEG', 15, 40, 180, 160);
doc.output('datauri');
});
I got this mainly from their example.
我主要是从他们的例子中得到的。
回答by Yevhenii Bahmutskyi
Try using this instead of your last line.
尝试使用它而不是你的最后一行。
window.open(doc.output('bloburl'), '_blank');
I also had a problem with adblock blocking my new window.
我也遇到了 Adblock 阻止我的新窗口的问题。
回答by Hemant
source :
来源 ：
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script>
<script type="text/javascript">
function savePDF() {
var imgData;
html2canvas($("#someHtml"), {
useCORS: true,
onrendered: function (canvas) {
imgData = canvas.toDataURL(
'image/png');
var doc = new jsPDF('p', 'pt', 'a4');
doc.addImage(imgData, 'PNG', 10, 10);
doc.save('sample-file.pdf');
window.open(imgData);
}
});
}
</script>
<div id="someHtml" class="maindiv">
//HTML code with images(cdn)
</div>
