使用数据表和按钮( 不是 TableTools,已停用)扩展。一些单元格有进度条和小图标。有没有办法将这些图像(或至少它们的标题)导出为 PDF?在此页面上发现了一些可能的 hack,但所有这些都是针对已退役的 TableTools。
已检查 https://datatables.net/reference/button/pdf和 https://datatables.net/reference/api/buttons.exportData%28%29但找不到任何方法来实现这一目标。通过添加此代码进行测试:
stripHtml: false
但是整个 HTML 代码(如 img src=...)包含在 PDF 文件中,而不是图像中。
如果无法导出图像,有没有办法至少导出每个图像的 alt 或 title 属性?那就足够了。
最佳答案
我假设您使用的是 pdfHtml5。 dataTables 使用 pdfmake 来导出 pdf 文件。当在浏览器中使用 pdfmake 时,它需要将图像定义为 base64 编码的数据 URL。
示例:您已经渲染了 <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
不能与图像一起使用,只是让我们将数据传回 text
PDF 文档的节点部分。另见
关于pdf - 数据表图像(或至少图像标题)导出为 PDF,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35090747/