CODEWITHSUNDEEP
javascriptphpsavescreenshot
PhilipCy
PhilipCy

Reputation: 53

How to save html table as an image for client to save on their computer

I have a website which generates a table (using php echoes out a table) from some lines a user pastes into a text area. I would like my clients be able to save this table on their machine. This is what I have found so far http://html2canvas.hertzen.com/ but don't know how to use it. Also sometime in the future I would like it to have a "share on facebook" button so that the image is uploaded to their facebook account.

I have searched Google for 2 days now without any result all ones I could find like php function saved the image to the server instead of the clients machine. Any help would be highly appreciated.

Upvotes: 5

Views: 11001

Answers (2)

Sahil Jariwala
Sahil Jariwala

Reputation: 253

you can use canvas for that. Simply put all you data in canvas and you will get the output as image. A better example can be found here

<html>
<body>
<style type="text/css">
table
{
border=5;
}
</style>
<p><canvas id="canvas" style="border:2px solid black;" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var data = "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
             "<foreignObject width='100%' height='100%'>" +
               "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:40px'>" +
                 "<table><tr><td>HI</td><td>Welcome</td></tr><tr><td>Hello</td><td>World</td></tr> </table>" +
               "</div>" +
             "</foreignObject>" +
           "</svg>";
var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"});
var url = DOMURL.createObjectURL(svg);
img.onload = function() {
    ctx.drawImage(img, 0, 0);
    DOMURL.revokeObjectURL(url);
};
img.src = url;
</script>
</body>
</html>

Upvotes: 2

user1421727
user1421727

Reputation:

Use PHP GD to create images on the go.

Using this will return a header type Content-type: image/png when the php file is called. (Note: You cannot return html along with the image in this php, since we define the header type to image/png)

Alternatively you can generate pdf files which support tables. A best library to generate pdf's is FPDF See the table generation example in fpdf here

Links:

PHP GD

FPDF

Upvotes: 0

Related Questions