HTML Table to PDF

Status
Not open for further replies.

Ashleyuk1984

Active Member
1,242
2010
304
1,010
Hi,
I'm wanting to export my HTML table to a PDF file.

I've found this script, Export HTML Table to PDF using jsPDF - JSFiddle and it does pretty much what I want it to do.
However, I would like to add an image to the top of the 'exported' PDF file (with a small piece of text underneath the image), and a small piece of text underneath the actual table. But I don't want the image or the text to be shown in the HTML file.
So ideally, I'd like to add those bits within the actual function part of the code.

HTML would show just the Table.

Exported PDF would look like:

Image
Text

HTML Table

Text

Can anyone help with this please?
You can edit the jsfiddle above, and just 'update' the code. You'll be given a new URL with your updates.

Thank you
 
4 comments
Before calling to addHTML, you can add images or text to your jsPDF object:

Code:
[COLOR=#101094][FONT=inherit]var[/FONT][/COLOR][COLOR=#303336][FONT=inherit] imgData [/FONT][/COLOR][COLOR=#303336][FONT=inherit]=[/FONT][/COLOR][COLOR=#7D2727][FONT=inherit]'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAXwBfAAD/2wBDAAoHBwkHBgoJCAkLCwoMDxkQDw4ODx4WFxIZJCAmJSMgIyIoLTkwKCo2KyIjMkQyNjs9QEBAJjBGS0U+Sjk/QD3/2wBDAQsLCw8NDx0QEB09KSMpPT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT3/wgARCAAaABQDAREAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAABQYAAwQB/8QAGAEBAQEBAQAAAAAAAAAAAAAAAwEAAgT/2gAMAwEAAhADEAAAAXKbOK1c92KOHzuQcxaHNjdidpy5yl//xAAfEAACAQMFAQAAAAAAAAAAAAABAgADEhMEEBEhIjH/2gAIAQEAAQUC+QuVq6duEqnoephWKDia/FLjLjt//8QAHREAAgIBBQAAAAAAAAAAAAAAAAIBEQMSEyAiMf/aAAgBAwEBPwEhIZLj2DOttcCkNp7G8xZfH//EAB4RAAIDAAEFAAAAAAAAAAAAAAABAgMREiAhIjFR/9oACAECAQE/AR2ONmS9MolkcZZ8aHDl4b2FTEaEun//xAAhEAABAwMEAwAAAAAAAAAAAAABAAIRAxAxEjJBQiFhYv/aAAgBAQAGPwJQ7acIg8FQWFzfS0B0t+shcpkNqHx1KqahU29rZKybf//EAB0QAQADAQACAwAAAAAAAAAAAAEAESExQVFhgZH/2gAIAQEAAT8hUFrUE1U6+ZZvXITcrvpNdp4xEO+l1b7Gv7BQdYMALdXDkpwD7ipT+kOT/9oADAMBAAIAAwAAABBnmCSOz//EABsRAQACAwEBAAAAAAAAAAAAAAEAESExYSBx/9oACAEDAQE/EAXUQdz5KIsIMuNjTLWFPNMVwaOQoRsVXn//xAAcEQEAAgIDAQAAAAAAAAAAAAABABEhMSBhcVH/2gAIAQIBAT8QUMsIdQ9/JZNpSUTIImK3bZ5AbtfZa3cpbvj/AP/EABwQAQACAwEBAQAAAAAAAAAAAAEAESExQXFRwf/aAAgBAQABPxCsIatahd4Y+dDAb93fjD4HtO4qLlXU0ej2pdETsO11xEdV8cP2hExkSA2d3NHkA0Q0CIxSEyKmjyf/2Q=='[/FONT][/COLOR][COLOR=#303336][FONT=inherit];[/FONT][/COLOR]
[COLOR=#303336][FONT=inherit]pdf[/FONT][/COLOR][COLOR=#303336][FONT=inherit].[/FONT][/COLOR][COLOR=#303336][FONT=inherit]addImage[/FONT][/COLOR][COLOR=#303336][FONT=inherit]([/FONT][/COLOR][COLOR=#303336][FONT=inherit]imgData[/FONT][/COLOR][COLOR=#303336][FONT=inherit],[/FONT][/COLOR][COLOR=#7D2727][FONT=inherit]'JPEG'[/FONT][/COLOR][COLOR=#303336][FONT=inherit],[/FONT][/COLOR][COLOR=#7D2727][FONT=inherit]20[/FONT][/COLOR][COLOR=#303336][FONT=inherit],[/FONT][/COLOR][COLOR=#7D2727][FONT=inherit]20[/FONT][/COLOR][COLOR=#303336][FONT=inherit],[/FONT][/COLOR][COLOR=#7D2727][FONT=inherit]20[/FONT][/COLOR][COLOR=#303336][FONT=inherit],[/FONT][/COLOR][COLOR=#7D2727][FONT=inherit]26[/FONT][/COLOR][COLOR=#303336][FONT=inherit]);[/FONT][/COLOR][COLOR=#303336][FONT=inherit]
[/FONT][/COLOR][COLOR=#303336][FONT=inherit]pdf[/FONT][/COLOR][COLOR=#303336][FONT=inherit].[/FONT][/COLOR][COLOR=#303336][FONT=inherit]text[/FONT][/COLOR][COLOR=#303336][FONT=inherit]([/FONT][/COLOR][COLOR=#7D2727][FONT=inherit]50[/FONT][/COLOR][COLOR=#303336][FONT=inherit],[/FONT][/COLOR][COLOR=#7D2727][FONT=inherit]40[/FONT][/COLOR][COLOR=#303336][FONT=inherit],[/FONT][/COLOR][COLOR=#7D2727][FONT=inherit]"Header"[/FONT][/COLOR][COLOR=#303336][FONT=inherit]);[/FONT][/COLOR]


Hope that helps!
 
Last edited:
Thanks daisu,
That certainly gets me started.

A couple of questions if I may...
1. Does the image data have to be in Base64 format? Or can I just obtain the picture from a URL?
2. What do the numbers represent, in lines 'pdf.addimage' and 'pdf.text'.

Thanks
 
1. Try this for image from URL
https://stackoverflow.com/questions/22172604/convert-image-url-to-base64



2. From the DOCS

addText( x-coord, y-coord, text)

[FONT=&amp] addImage: addImage will write image to pdf and convert images to Base64. Following parameters are required to add an image. [/FONT]


  • imageData: Pass image
  • format: extension of image
  • x-axis: position of image from left
  • y-axis: position of image from top
  • width: width of image
  • height: height of image
  • alias: Name the image alias which is comfortable for you.

[FONT=&amp]Syntax: pdf.addImage(imgData, 'image format', x, y, w, h, 'alias');
[/FONT]
 
Status
Not open for further replies.
Back
Top