如何使用jsPDF将多个图像添加到PDF上

问题描述：

function genPDF_fromUrl(link) { 
    var doc = new jsPDF(); 
    doc.setFontSize(40); 
    doc.text(80, 25, 'MAP001'); 

    const rtnimg = compute(doc, link); 
    console.log(rtnimg) 
    Promise.all(rtnimg).then((success) => { 
     doc.save("map.pdf"); 
    }); 
    console.log("Finish hello PDF!") 
} 
function compute(doc, link) {  
    return link.map(l => { 
     let x = 0; 
     let y = 0; 
     x += 10; 
     y += 10; 
     return new Promise((resolve, reject) => { 
      var genImg = new Image(); 
      genImg.setAttribute('crossOrigin', 'anonymous'); 
      genImg.src = l; 
      console.log("genimg: ", genImg); 

      genImg.onload = function() { 
      console.log("doc: ", doc); 
       doc.addImage(genImg, 'PNG', x, y, 100, 100);  
      } 
      resolve(); 
     }); 
    }); 
}

结果总是只有文本'MAP001'的PDF，我不知道为什么图像不会显示。

下面是控制台输出：

genImg: is a img tag like < img crossorigin="anonymous" src="https://cors.now.sh ... a link" > 

rtnimg : (33) [Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise] 

Finish hello PDF! 

doc: {internal: {…}, addPage: ƒ, setPage: ƒ, insertPage: ƒ, movePage: ƒ, …}

下面是我对PDF打印只是一个形象的一次成功尝试。

function genPDF_fromUrl(link) { 
     var genImg = new Image(); 
     genImg.setAttribute('crossOrigin', 'anonymous'); 
     genImg.src = link[0]; 

     genImg.onload = function() {  
     var doc = new jsPDF(); 
     doc.setFontSize(40); 
     doc.text(80, 25, 'MAP001'); 
     doc.addImage(genImg, 'PNG', 0, 0, 100, 100);   
     doc.save("map.pdf"); 
     }  
}

看起来像“var doc = new jsPDF（）;”必须在onload功能，但我不能做到这一点的多个图像。

从'console.log（）'s看起来好吗？并且给出了预期的输出结果？ – NewToJS

是的，rtnimg回复承诺状态'决心'。 –

你有没有尝试在你的'compute（）'函数中添加一些'console.log（）'，你尝试添加图像？检查'genImg'等...？请更新您的问题并解释您所做的调试和尝试找出问题。谢谢。 – NewToJS

答

您正在开始PDF创建，然后等待每个图像。我的提议是预先加载所有图像并等待所有图像下载完毕并回调，并准备通过调用addImage函数在jsPDF中打印。

我做到了，在下面的方式前一段时间，作为一个更复杂的jsPDF插件

function Picture(src) { 
    this.src = src; 
    this.img = null; 
} 

function Preloader() { 
    this.pictures = []; 
    this.onpicturesloaded = null; 
} 

Preloader.prototype.setPicture = function(src) { 
    var id = src.split("/").pop().split(".")[0].toLowerCase(); 
    this.pictures[id] = new Picture(src); 
    return this.pictures[id]; 
}; 

Preloader.prototype.loadPictures = function() { 
    var self = this, pictures = self.pictures, n = 0; 
    for(var id in pictures) { 
     if(pictures.hasOwnProperty(id)) { 
      var pic = self.pictures[id]; 
      n++; 
     } 
    } 
    for(var id in pictures) { 
     if(pictures.hasOwnProperty(id)) { 
      var pic = self.pictures[id]; 
      var decrease = function(e) { 
       if(--n == 0) { 
        self.onpicturesloaded(); 
       } 
      } 
      var img = new Image(); 
      img.onload = function() { 
       var pic = self.pictures[this.alt]; 
       pic.img = this; 
       decrease(); 
      }; 
      img.alt = id; 
      img.src = pic.src; 
     } 
    } 
};

我使用剥离文件名为ìd，直接获得相关图像的一部分，该原因是loadPictures函数中的双循环有一点点的开销，如果你觉得这个太糟糕了，可以随意将它改成一个真正的数组，在这里你可以直接得到图片数为pictures.length。

然后，这id也被用于jsPDF为alias为每个图像，以加快整个过程，从而完整的图像路径存储，而不是在picture.src。

这是（更多PR以下）以上所有的东西的用法：

var pl = new Preloader(); 
pl.setPicture("pdf/a.jpg"); 
pl.setPicture("pdf/b.jpg"); 
pl.setPicture("pdf/c.jpg"); 

pl.onpicturesloaded = function() { 
    var doc = new jsPDF(); 
    var pic = pl.pictures["a"]; 
    doc.addImage(pic.img, "jpg", 10, 10, 100, 100, pic.img.alt, "FAST"); 
    // add more images, print text, and so on 
    doc.save('mydocument.pdf'); 
}; 
pl.loadPictures();

请注意，这只是在即时即jsPDF插件的提取物，没有它，我需要一些部件例如，在canvas内部绘制并将图片数据添加到PDF中。

所以，我相信这可以进一步简化和剥离，但无论如何，你可以得到的想法。

如何使用jsPDF将多个图像添加到PDF上

相关推荐