我制作了一个小演示:
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// draw a blue cloud
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
context.closePath();
context.lineWidth = 5;
context.fillStyle = '#8ED6FF';
context.fill();
context.strokeStyle = '#0000ff';
context.stroke();
download.addEventListener("click", function() {
// only jpeg is supported by jsPDF
var imgData = canvas.toDataURL("image/jpeg", 1.0);
var pdf = new jsPDF();
pdf.addImage(imgData, 'JPEG', 0, 0);
pdf.save("download.pdf");
}, false);
<script src="//cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>
<canvas id="myCanvas" width="578" height="200"></canvas>
<button id="download">download</button>
请查看https://github.com/joshua-gould/canvas2pdf。该库可以创建您的画布元素的PDF表示,与其他建议的解决方案不同,其他方案在PDF文档中嵌入图像。
//Create a new PDF canvas context.
var ctx = new canvas2pdf.Context(blobStream());
//draw your canvas like you would normally
ctx.fillStyle='yellow';
ctx.fillRect(100,100,100,100);
// more canvas drawing, etc...
//convert your PDF to a Blob and save to file
ctx.stream.on('finish', function () {
var blob = ctx.stream.toBlob('application/pdf');
saveAs(blob, 'example.pdf', true);
});
ctx.end();
所以今天的话题是 jspdf-1.5.3。 回答关于让pdf文件页面与画布完全相同的问题。在尝试了不同组合后,我发现你需要像这样做。 我们首先需要为输出的pdf文件设置正确方向的高度和宽度,否则可能会裁剪边缘。然后我们从'pdf'文件本身获取尺寸,如果尝试使用画布的尺寸,则可能会再次裁剪边缘。我不确定为什么会发生这种情况,我最好的猜测是jsPDF在库中将尺寸转换为其他单位。
// Download button
$("#download-image").on('click', function () {
let width = __CANVAS.width;
let height = __CANVAS.height;
//set the orientation
if(width > height){
pdf = new jsPDF('l', 'px', [width, height]);
}
else{
pdf = new jsPDF('p', 'px', [height, width]);
}
//then we get the dimensions from the 'pdf' file itself
width = pdf.internal.pageSize.getWidth();
height = pdf.internal.pageSize.getHeight();
pdf.addImage(__CANVAS, 'PNG', 0, 0,width,height);
pdf.save("download.pdf");
});
从这里了解有关更改方向的信息:https://github.com/MrRio/jsPDF/issues/476
<script src="http://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
<script type="x/kendo-template" id="page-template"></script>
<canvas id="myCanvas" width="500" height="500"></canvas>
<button onclick="ExportPdf()">download</button>
function ExportPdf(){
kendo.drawing
.drawDOM("#myCanvas",
{
forcePageBreak: ".page-break",
paperSize: "A4",
margin: { top: "1cm", bottom: "1cm" },
scale: 0.8,
height: 500,
template: $("#page-template").html(),
keepTogether: ".prevent-split"
})
.then(function(group){
kendo.drawing.pdf.saveAs(group, "Exported_Itinerary.pdf")
});
}
就是这样,只需在画布上写任何内容,然后按下下载按钮即可将所有内容导出为PDF格式。 这里是Kendo UI的链接-http://docs.telerik.com/kendo-ui/framework/drawing/drawing-dom