javascript 如何使用jspdf将图像保存在pdf的多页中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24069124/
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
How to save a image in multiple pages of pdf using jspdf
提问by user3687972
I have a table(columns aligned differently) which is to be saved as pdf.I converted the table to image using html2canvas and then saved the image into pdf usng jspdf. It works well if the size of the image is less than or equal to page size of pdf but if the image size is bigger than the page size then it saves only first page of pdf(which has only a part of the image) and rest of the image is not displayed/saved in pdf. here the javascript code I used.
我有一个表格（列对齐方式不同），它要保存为 pdf。我使用 html2canvas 将表格转换为图像，然后将图像保存为 pdf usng jspdf。如果图像的大小小于或等于 pdf 的页面大小，则效果很好，但如果图像大小大于页面大小，则它只保存 pdf 的第一页（只有图像的一部分），其余部分图像的 pdf 格式不显示/保存。这里是我使用的 javascript 代码。
$("#btnVC_saveGLSummary").click(function () {
html2canvas($("#tblSaveAsPdf1"), {
onrendered: function (canvas) {
var myImage = canvas.toDataURL("image/jpeg");
var d = new Date().toISOString().slice(0, 19).replace(/-/g, "");
filename = 'report_' + d + '.pdf';
var doc = new jsPDF();
doc.addImage(myImage, 'JPEG', 12, 10);
doc.save(filename);
}
});
});
Any ideas how to get the remaining part of the image on the second page of pdf.
任何想法如何在pdf的第二页上获取图像的剩余部分。
回答by Carlos Rodríguez
I use this method
我用这个方法
function makePDF(){
var quotes = document.getElementById('container-fluid');
html2canvas(quotes, {
onrendered: function(canvas) {
//! MAKE YOUR PDF
var pdf = new jsPDF('p', 'pt', 'a4');
for (var i = 0; i <= quotes.clientHeight/980; i++) {
//! This is all just html2canvas stuff
var srcImg = canvas;
var sX = 0;
var sY = 1120*i; // start 980 pixels down for every new page
var sWidth = 778;
var sHeight = 1120;
var dX = 0;
var dY = 0;
var dWidth = 778;
var dHeight = 1120;
window.onePageCanvas = document.createElement("canvas");
onePageCanvas.setAttribute('width', 778);
onePageCanvas.setAttribute('height', 1120);
var ctx = onePageCanvas.getContext('2d');
// details on this usage of this function:
// https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images#Slicing
ctx.drawImage(srcImg,sX,sY,sWidth,sHeight,dX,dY,dWidth,dHeight);
// document.body.appendChild(canvas);
var canvasDataURL = onePageCanvas.toDataURL("image/png", 1.0);
var width = onePageCanvas.width;
var height = onePageCanvas.clientHeight;
//! If we're on anything other than the first page,
// add another page
if (i > 0) {
pdf.addPage(595, 842); //8.5" x 11" in pts (in*72)
}
//! now we declare that we're working on that page
pdf.setPage(i+1);
//! now we add content to that page!
pdf.addImage(canvasDataURL, 'PNG', 0, 0, (width*.72), (height*.71));
}
//! after the for loop is finished running, we save the pdf.
pdf.save('Test3.pdf');
}
});
}
I hope it will be helpful
我希望它会有所帮助
Inspired by another stack overflow response
受另一个堆栈溢出响应的启发
回答by Shuvro Akash
It works for html2canvas and jspdf.
它适用于 html2canvas 和 jspdf。
var imgData = canvas.toDataURL('image/png');
var imgWidth = 210;
var pageHeight = 295;
var imgHeight = canvas.height * imgWidth / canvas.width;
var heightLeft = imgHeight;
var doc = new jsPDF('p', 'mm');
var position = 10; // give some top padding to first page
doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
while (heightLeft >= 0) {
position += heightLeft - imgHeight; // top padding for other pages
doc.addPage();
doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
}
doc.save( 'file.pdf');
回答by yodofizzy
var ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 1025, sectionWidth, 1250, 0, 0, 1800, 950);
var image2 = new Image();
image2 = Canvas2Image.convertToJPEG(canvas);
image2Data = image2.src;
doc.addImage(image2Data, 'JPEG', -105, 5, 440, 325);
Basically, you get the context of your canvas and then you can use the drawImagefunction to create a new Image that is a portion of your original canvas. The parameters of drawImageare:
基本上，您获得画布的上下文，然后您可以使用该drawImage函数创建一个新图像，该图像是原始画布的一部分。的参数drawImage是：
drawImage(img, startX, startY, originalW, originalH, destX, dextY, destW, destH);
Where startX and Y are your starting locations for the clipping on the original images, original W and H are the height and width of your clipping (on the original picture), basically how much to clip, destX and Y are where on your PDF to put the new clipping and destH and W define how big the clipping is when placed on the canvas (they stretch the image once you've clipped it)
Hope this helped,
Cheers
其中 startX 和 Y 是您在原始图像上剪辑的起始位置，原始 W 和 H 是您剪辑的高度和宽度（在原始图片上），基本上要剪辑多少，destX 和 Y 是您的 PDF 上的位置放置新的剪裁和 destH 和 W 定义剪裁在画布上时的大小（剪裁后它们会拉伸图像）
希望这有帮助，
干杯
