DataTables图片(或至少图片标题)导出为PDF [英] DataTables image (or at least image title) export to PDF
问题描述
使用数据表和按钮(已停用的 NOT TableTools)扩展.一些单元格具有进度栏和小图标.有没有办法将这些图像(或至少它们的标题)导出为PDF?在此页面上发现了一些可能的骇客，但是所有这些都是针对退休的TableTools的.
Using DataTables and Buttons (NOT TableTools, which is retired) extension. Some cells have progressbars and small icons. Is there a way to export these images (or at least their titles) to PDF? Found some possible hacks on this page, but all of them were for retired TableTools.
选中了 https://datatables.net/reference/button/pdf 和 https://datatables.net/reference/api/buttons.exportData%28%29 但找不到任何方法可以实现此目标.通过添加以下代码进行测试:
Checked https://datatables.net/reference/button/pdf and https://datatables.net/reference/api/buttons.exportData%28%29 but couldn't find any method to achieve this goal. Tested by adding this code:
stripHtml: false
但整个HTML代码(例如img src = ...)包含在PDF文件中，而不是图像中.
but whole HTML code (like img src=...) was included in PDF file instead of images.
如果无法导出图像，是否可以导出至少每个图像的alt或title属性?那就足够了.
If exporting images isn't possible, is there a way to export at least alt or title attribute of each image? That would be enough.
推荐答案
我假设您正在使用pdfHtml5. dataTables使用pdfmake来导出pdf文件.在浏览器中使用pdfmake时，需要将图像定义为base64编码的数据URL.
I assume you are using pdfHtml5. dataTables is using pdfmake in order to export pdf files. When pdfmake is used from within a browser it needs images to be defined as base64 encoded dataurls.
示例:您已经在某些行的第一列中呈现了<img src="myglyph.png">-这些字形应包含在PDF中.首先创建对字形的Image引用:
Example : You have rendered a <img src="myglyph.png"> in the first column of some of the rows - those glyphs should be included in the PDF. First create an Image reference to the glyph :
var myGlyph = new Image();
myGlyph.src = 'myglyph.png';
在customize函数中，您现在必须
1)用所有应包含在PDF中的图像构建字典
2)将text节点替换为image节点以引用图像
1) build a dictionary with all images that should be included in the PDF
2) replace text nodes with image nodes to reference images
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");
}
如果您只想在PDF中显示图像的title-或以其他任何方式想要处理PDF的文本内容-则容易一些.每行每一列的内容可以通过exportOptions.format.body回调进行格式化:
If you just want to show the title of images in the PDF - or in any other way want to manipulate the text content of the PDF - then it is a little bit easier. The content of each column in each row can be formatted through the exportOptions.format.body callback :
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不能与图像一起使用的原因是，仅允许我们将数据传递回PDF文档的text节点部分.
The reason format.body cannot be used along with images is that is only let us pass data back to the text node part of the PDF document.
另请参见
- http://pdfmake.org/#/gettingstarted (查找图像"部分)
- https://github.com/bpampuch/pdfmake/blob/master/examples/images.js
这篇关于DataTables图片(或至少图片标题)导出为PDF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
