Question

参数＆＃39;链接＆＃39;是一系列图像＆＃39;链接。

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: ƒ, …}

结果始终是仅包含文字＆＃39; MAP001＆＃39;的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"); 
        }      
}

以下是我在PDF上仅打印图像的成功尝试。

let newEntry = FBRef.child("category").childByAutoId()
newEntry.setValue(["someValue": true])

似乎＆＃34; var doc = new jsPDF（）;＆＃34;必须处于onload功能，但我无法为多个图像执行此操作。

Answer 1

您正在开始创建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中。

这是（更少）使用上述所有内容：

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上

1 个答案: