Изображение DataTables (или изображение с наименьшим изображением) в PDF

Question

Использование таблиц и кнопок (NOT Расширение 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 не может быть использована вместе с изображениями, что выпускаемая только нам передавать данные обратно в text узел части PDF документа в ,

Смотрите также

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

Таким образом DataTables покажет только изображение, в то время как PDF файл будет содержать текст, который нужно.

Answer 3

В дополнение к davidkonrad's answer. Я создал динамически все base64 изображения и использовать их в DataTables pdfmake, как это:

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

}