javascript - Download table as PNG using JQuery - Stack Overflow

admin管理员组

文章数量:1356914

I want to download a html table as a PNG image, I found a way using JQuery to extract the table as an Image but it opens in a new tab and don't automatically download I must use right click then save as image to be able to download it.

is there any way to make it download automatically?

This is the JQuery used to export as PNG Image

$('#preview-table').tableExport({type:'png',escape:'false'});

I want to download a html table as a PNG image, I found a way using JQuery to extract the table as an Image but it opens in a new tab and don't automatically download I must use right click then save as image to be able to download it.

is there any way to make it download automatically?

This is the JQuery used to export as PNG Image

$('#preview-table').tableExport({type:'png',escape:'false'});

• javascript
• jquery
• html
• download

Share Improve this question Follow edited Nov 16, 2016 at 20:43 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Jul 17, 2016 at 21:07 Ahmed Magdy IbrahimAhmed Magdy Ibrahim 11511 gold badge22 silver badges1111 bronze badges 3

• I this solution might work take a look stackoverflow./a/31087577/2377278 – Sai prasant Commented Jul 17, 2016 at 21:11
• As of now there is no way to export the table to an image using Jquery. There is no tableExport() function as the part of the Jquery library. That must be some other plugin. Please clarify. – user1593881 Commented Jul 17, 2016 at 21:16
• @Raw N He uses this plugin here tableExport.jquery.plugin and it actually does exactly this. It saves tables to images and other file formats. – Christos Lytras Commented Nov 16, 2016 at 23:51

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

In order to do this and force the browser to download the data as file, you have to change the mime type from data:image to data:application/octet-stream. You need to create your own html2canvas conversion and handle the onrendered event manually. Then inside onrendered event handler function, you store the canvas data url. After that, use regular expression to change the base64 data mime type from data:image to data:application/octet-stream. Then you can use window.open(uri) to force the browser to download the file, but if you want to specify a filename, you need to create a anchor link element and set the download attribute with the filename you desire:

HTML:

<table id="preview-table">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro ercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>


<button id="export">Table Export</button>

CSS:

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}

Javascript:

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="tableExport.jquery.plugin/html2canvas.js"></script>

<script type="text/javascript">

$('#export').on('click', function() {
    html2canvas($('#preview-table'), {
        onrendered: function(canvas) {                                      

            var saveAs = function(uri, filename) {
                var link = document.createElement('a');
                if (typeof link.download === 'string') {
                    document.body.appendChild(link); // Firefox requires the link to be in the body
                    link.download = filename;
                    link.href = uri;
                    link.click();
                    document.body.removeChild(link); // remove the link when done
                } else {
                    location.replace(uri);
                }
            };

            var img = canvas.toDataURL("image/png"),
                uri = img.replace(/^data:image\/[^;]/, 'data:application/octet-stream');

            saveAs(uri, 'tableExport.png');
        }
    }); 
});

</script>

Here you can find a working example: http://zikro.gr/dbg/html/tableExport/

Check Rob W's answer on Browser/HTML Force download of image from src=“data:image/jpeg;base64…” and Reddy's answer on Save file Javascript with file name [duplicate]

本文标签： javascriptDownload table as PNG using JQueryStack Overflow