Javascript 如何使用jspdf在多页pdf中保存图像

我有一个表（列对齐方式不同），它将保存为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);
          }
         });
       });

你知道如何在pdf的第二页上获取图像的剩余部分吗

                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);

基本上，您可以获得画布的上下文，然后使用

drawImage

函数创建一个新图像，该图像是原始画布的一部分。

drawImage

的参数为：

drawImage(img, startX, startY, originalW, originalH, destX, dextY, destW, destH);

其中startX和Y是原始图像上剪辑的起始位置，original W和H是剪辑的高度和宽度（在原始图片上），基本上是要剪辑多少，destX和Y是PDF上放置新剪辑的位置，destH和W定义了在画布上放置剪辑时的大小（一旦你剪下图像，他们就会拉伸它）
希望这有帮助，
干杯

我使用这种方法

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');
  }
  });
  }

函数makePDF（）{
var quotes=document.getElementById（'container-fluid'）；
html2canvas（引用）{
onrendered：函数（画布）{
//！制作你的PDF
var pdf=新的jsPDF（'p'，'pt'，'a4'）；
对于（var i=0；i它适用于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');

这是以类似的方式进一步回答的，但我觉得我想给出一个例子，省去不必要的代码：

您可以轻松浏览所有页面，并在每个页面上放置“水印”文本或其他项目，如下所示：

let pdf = new jspdf();
// do something that creates multiple pages
for (let pageNumber = 1; pageNumber <= pdf.getNumberOfPages(); pageNumber++) {
  pdf.setPage(pageNumber)
  pdf.addImage('myImgOnEveryPage.png', 10,10,20,20);
  pdf.text('My text on every page, 12, 12);
}

let pdf=new jspdf（）；
//执行创建多个页面的操作
对于（让pageNumber=1；pageNumber），您可以通过在自己的代码中添加一些小的调整来轻松实现这一点

$("#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();
    var totalPages = doc.internal.getNumberOfPages();
    for(let i = 1; i < totalPages; i++) {
        doc.setPage(i);
        doc.addImage(myImage, 'JPEG', 12, 10);
    }       
    doc.save(filename);
    }
  });
});

$（“#btnVC_saveGLSummary”）。单击（函数（）{
html2canvas（$（“#tblSaveAsPdf1”）{
onrendered：函数（画布）{
var myImage=canvas.toDataURL（“image/jpeg”）；
var d=new Date（）.toISOString（）.slice（0,19）.replace（/-/g，“”）；
文件名='report_'+d+'.pdf'；
var doc=new jsPDF（）；
var totalPages=doc.internal.getNumberOfPages（）；
for（设i=1；i
出现错误：类型“Window”上不存在属性“onePageCanvas”，找不到名称“onePageCanvas”。请使用空白创建pdfcontent@BhartiLadumor-如果未在常规浏览器上下文中使用此选项，则
窗口
对象不可用。请使用
var-onePageCanv代替
window.onePageCanvas=
as=
在循环范围中将其声明为局部变量看起来类似于真实源代码如何演示多个页面？非常好，谢谢，一个小问题添加
position+=heightLeft-imghight；
在下一页中添加一些顶部填充我认为第三个an的位置计算有错误d后续页面。分配位置中的+=高度左-imgHeight表示页面高度被扣除两次。因此，位置不是0，-295，-590等，而是0，-295，-885等。解决方案只是使用=分配作为位置=高度左-imgHeight或将循环中的位置计算替换为：x=x+1；position=（pageHeightx）-1；我希望这对某人有所帮助。如何根据图像设置pdf页面大小，在该图像创建新页面和新页面上的新图像这是否使用html2canvas？还是不需要它？