DataTables图像(或至少图像标题)导出为PDF

Question

使用DataTables和Buttons(不是 TableTools,已退役)扩展.有些单元格有进度条和小图标.有没有办法将这些图像(或至少它们的标题)导出为PDF？在此页面上发现了一些可能的黑客攻击,但所有这些都是针对已退役的TableTools.

检查https://datatables.net/reference/button/pdf和https://datatables.net/reference/api/buttons.exportData%28%29但找不到任何方法来实现这一目标.通过添加此代码进行测试:

stripHtml: false

但整个HTML代码(如img src = ...)包含在PDF文件中而不是图像中.

如果无法导出图像,是否有办法导出每个图像的至少alt或title属性？那就足够了.

Answer 1

我假设您使用的是pdfHtml5.dataTables使用pdfmake来导出pdf文件.当在浏览器中使用pdfmake时,它需要将图像定义为base64编码的dataurls.

示例:您已<img src="myglyph.png">在某些行的第一列中呈现了一个- 这些字形应包含在PDF中.首先创建Image对字形的引用:

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

在你的customize功能中,你现在必须

1)构建一个包含应包含在PDF中的所有图像的字典
2)用text节点替换image节点以引用图像

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
    }
}

这是一个getBase64Image函数的例子

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

如果您只是想title在PDF中显示图像 - 或者以任何其他方式想要操纵PDF的文本内容 - 那么它会更容易一些.每行中每列的内容可以通过exportOptions.format.body回调进行格式化:

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;
            }
        }
    }
]

format.body不能与图像一起使用的原因是只让我们将数据传递回textPDF文档的节点部分.

也可以看看

• http://pdfmake.org/#/gettingstarted(查找图片部分)
• https://github.com/bpampuch/pdfmake/blob/master/examples/images.js

Answer 2

由于没有收到任何建议,我不得不进行黑客攻击,以便按照我想要的方式格式化PDF文件.

如果某人有相同的问题,您可以使用隐藏的跨度在图像本身附近显示图像alt/title.我敢肯定这不是最好的做法,但它会做到这一点.所以代码看起来像:

<img src='image.png' alt='some_title'/><span class='hidden'>some_title</span>

这样,数据表将只显示图像,而PDF文件将包含您需要的文本.