Recent news

Thursday, 26 May 2016

Export or Convert HTML Page Content into Image jQuery Plugin




Export is a jQuery plugin which export or convert html page content into Image. This plugin is able to convert or export html content into PNG, JPG & GIF format. This plugin requires d3.js library, html2canvas and htmltable_export. 

How To Use

1. Add the below library reference
  
 <script type="text/javascript" src="https://raw.githubusercontent.com/kayalshri/tableExport.jquery.plugin/master/tableExport.js"></script>
    <script type="text/javascript" src="https://raw.githubusercontent.com/kayalshri/tableExport.jquery.plugin/master/jquery.base64.js"></script>
    <script type="text/javascript" src="https://raw.githubusercontent.com/kayalshri/tableExport.jquery.plugin/master/jspdf/libs/sprintf.js"></script>
    <script type="text/javascript" src="https://raw.githubusercontent.com/kayalshri/tableExport.jquery.plugin/master/jspdf/jspdf.js"></script>
    <script type="text/javascript" src="https://raw.githubusercontent.com/kayalshri/tableExport.jquery.plugin/master/jspdf/libs/base64.js"></script>
    <script type="text/javascript" src="https://raw.githubusercontent.com/kayalshri/tableExport.jquery.plugin/master/html2canvas.js"></script>

    <script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script>
    <script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script>


2. Now add the below html tag.

<div id="containerDiv" class="container-fluid">
This is an example
</div>
<div id="exportMenu" class="row col-sm-12 col-md-12 text-center">
    <div class="btn-group">
        <div id="dLabel" class="btn btn-default" data-toggle="dropdown">
            Export
            <span class="caret"></span>
        </div>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
            <li><a href="#" onclick="javascript:exportAll('containerDiv', 'png');">PNG</a></li>
            <li><a href="#" onclick="javascript:exportAll('containerDiv', 'jpg');">JPG</a></li>
            <li><a href="#" onclick="javascript:exportAll('containerDiv', 'gif');">GIF</a></li>
        </ul>
    </div>
</div>


3. Add the below code to perform operation

function exportAll( exportDivId, fileType )
    {
        $( "#" + exportDivId ).exportAll( {
            callbackBeforeCanvg:{name: callbackForExportAllBeforeCanvg, arguments: exportDivId},
            callbackOnRendered: {name: callbackForExportAllOnRendered, arguments: exportDivId},
            fileName: "ExportImage",
            fileType: fileType,
            windowTitle: "Export window",
            listStyleToGet:["fill", "stroke", "opacity", "fill-opacity", "shape-rendering", "stroke-opacity",
                "font", "font-size", "font-weight", "font-family", "color",
                "float", "height", "width"]
        } );
    }
    // Remove github logo and menu before export
    function callbackForExportAllBeforeCanvg( exportDivId, targetExportDivId )
    {
        $( "#" + targetExportDivId + " #githubLink" ).remove();
        $( "#" + targetExportDivId + " #exportMenu" ).remove();
    }
    function callbackForExportAllOnRendered( exportDivId, targetExportDivId )
    {
        alert( "Export done" );
    }



Pranav Singh Author: Pranav Singh

Hello, I am Author of this blog. The main purpose of this blog is to provide all the jQuery plugins which is helpful in designing and developing a web application in a single location from the web.

Previous
Next Post »

E-mail Newsletter

Sign up now to receive breaking news and to hear what's new with us.

Recent Articles