Need help writing PDF button code to include images

pmconsulting

Link to test case: https://database.rpespud.com/print-quote/?post_ids=2461
Debugger code (debug.datatables.net): N/A
Error messages shown: N/A
Description of problem:

My document includes <img> HTML in the first column. I need a function to convert these to base 64 so that the images are included in the PDF file.

I've found a JS function that will create a canvas element containing the image and then assign the base64 version of that image to a variable:

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);
  var dataURL = canvas.toDataURL("image/png");
  return dataURL.replace(/^data:image\/?[A-z]*;base64,/);
}

var base64 = getBase64Image(document.getElementById("imageid"));

I need an example of how I incorporate this function into the datatable code properly so that I can include the first, image column in my example in both PDF and Print buttons.

allan

You would need to use the customize method of the pdfHtml5 button to modify the document structure and use something like this method to embed it into the pdf.

I don't have such and example at this time, but I will take a look later today, all being well to see if I can whip one together.

Allan

pmconsulting

I read that post, however, it explains how to embed an individual, specific image at the top of the table. I think the reason so many are confused by printing is that many have tables where one or more columns contain images. On the HTML page, those are all <img> tags. However, when printing or generating a PDF, the images must all be either already in base64 format, or a script must be written to do that step.

The scripts, like the one I mentioned, seem to create a canvas on the page, place the image into the canvas, then read that image back as base64, and replace the standard image tag with an image tag containing the base64 encoded image.

It's a dark, murky hole, this whole image issue. What I ended up doing was to use datatables.js to generate an export button, since the data export I need doesn't require images. For Print, I appended a matching button after the export button and simply trigger a window.print() when its's clicked. The print dialog opens, displaying the contents of the page, including the images, which can then be printed. I use @media {...} CSS to hide the page header, footer & button elements.

It's sort of a hack, but gets to reasonable print output, which can also be saved as a PDF by most browsers, and I don't have to figure out the process of iterating through and replacing all printable <ing> elements at all.

It might be worth considering the addition of a function that would automatically do the base64 conversion for any table images with a particular class or attribute.

It's surprising to see how many questions on this there, and how few answers or how little patience the responders have. I don't think anyone expects images to be missing on print or PDF, and the really don't expect that getting them included should be this difficult.

allan

I think using print to pdf functionality is an excellent way of doing this, and to be honest, I've often thought about dropping the pdf button and just having that with the print button as the supported way of creating pdfs. That the pdfmake library is massive (well over 1MB) and limited in fonts, are other reasons as well.

I totally get that images shouldn't be cut out - its just that I haven't been able to make that a priority for development yet. It should be automatic, and that is what I'd been planning to look at today - but as usual, other support questions took over.

Allan

pmconsulting

Yeah - drop the PDF button. It creates more problems than it solves. The browser already prints & saves that as PDF. If anyone needs more than that, they can add pdfmake to do it.

You support it, but don't need it clogging up your CDN, mystifying most users & then clogging up the forum.