Les tables de données d'image (ou au moins le titre de l'image) à l'exportation au format PDF

Je suppose que vous êtes en utilisant pdfHtml5. dataTables est à l'aide de pdfmake pour l'exportation de fichiers pdf. Lorsque pdfmake est utilisée à partir d'un navigateur, il a besoin d'images pour être défini comme encodées en base64 dataurls.

Exemple : Vous avez rendu une <img src="myglyph.png"> dans la première colonne de certaines lignes - ces glyphes doivent être inclus dans le fichier PDF. D'abord créer un Image de référence pour les glyphes :

var myGlyph = new Image();
myGlyph.src = 'myglyph.png';

Dans votre customize fonction, vous devez maintenant

1) construire un dictionnaire avec toutes les images qui doivent être inclus dans le fichier PDF

2) remplacer text nœuds avec image nœuds d'images de référence

buttons : [
    { 
    extend : 'pdfHtml5',
    customize: function(doc) {

        //ensure doc.images exists
        doc.images = doc.images || {};

        //build dictionary
        doc.images['myGlyph'] = getBase64Image(myGlyph);
        //..add more images[xyz]=anotherDataUrl here

        //when the content is <img src="myglyph.png">
        //remove the text node and insert an image node
        for (var i=1;i<doc.content[1].table.body.length;i++) {
            if (doc.content[1].table.body[i][0].text == '<img src="myglyph.png">') {
                delete doc.content[1].table.body[i][0].text;
                doc.content[1].table.body[i][0].image = 'myGlyph';
            }
        }
    },
    exportOptions : {
        stripHtml: false
    }
}

Voici un exemple de getBase64Image fonction

function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);
    return canvas.toDataURL("image/png");
}

---

Si vous voulez juste pour montrer la title des images dans le PDF ou de toute autre manière de vouloir manipuler le contenu du texte du document PDF - alors c'est un peu plus facile. Le contenu de chaque colonne, dans chaque ligne peut être mis en forme par le biais de la exportOptions.format.body rappel :

buttons : [
    { 
    extend : 'pdfHtml5',
    exportOptions : {
        stripHtml: false
        format: {
            body: function(data, col, row) {
                var isImg = ~data.toLowerCase().indexOf('img') ? $(data).is('img') : false;
                if (isImg) {
                    return $(data).attr('title');
                }
                return data;
            }
        }
    }
]

La raison format.body ne peuvent pas être utilisés avec des images, c'est que n'est laisser nous passer des données à la text nœud de la partie du document PDF.

Voir aussi

• http://pdfmake.org/#/gettingstarted (voir la section Images)
• https://github.com/bpampuch/pdfmake/blob/master/examples/images.js

OriginalL'auteur davidkonrad

En plus de davidkonrad réponse. J'ai créé dynamiquement toutes les images en base64 et utilisés dans les tables de données pdfmake comme ceci:

for (var i = 1; i < doc.content[2].table.body.length; i++) {
    if (doc.content[2].table.body[i][1].text.indexOf('<img src=') !== -1) {
        html = doc.content[2].table.body[i][1].text;

        var regex = /<img.*?src=['"](.*?)['"]/;
        var src = regex.exec(html)[1];


        var tempImage = new Image();
        tempImage.src = src;

        doc.images[src] = getBase64Image(tempImage)

        delete doc.content[2].table.body[i][1].text;
        doc.content[2].table.body[i][1].image = src;
        doc.content[2].table.body[i][1].fit = [50, 50];
    }

    //here i am removing the html links so that i can use stripHtml: true,
    if (doc.content[2].table.body[i][2].text.indexOf('<a href="details.php?') !== -1) {
        html = $.parseHTML(doc.content[2].table.body[i][2].text);
        delete doc.content[2].table.body[i][1].text;
        doc.content[2].table.body[i][2].text = html[0].innerHTML;
    }

}

OriginalL'auteur Alex Lykesas