JSFiddle - React, Tailwind, and code Playground

by anand potta

HTML

<script src="http://builds.emberjs.com/tags/v1.10.0/ember-template-compiler.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.10.0/ember.min.js"></script>
<div id="main"></div>

<script type="text/x-handlebars" data-template-name="index">
    <div id="main">
      <div class="res">
      
        <div class="content">
          <table class="table table-bordered" id="table-metabase">
        <thead>
            <tr>
                <th>Title</th>
                <th>Body</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>Zenefits</td>
                <td>4704</td>
            </tr>
            <tr>
                <td>Zenefits</td>
                <td>4705</td>
            </tr>
        </tbody>
    </table>
        </div>
        <a href="" {{action "generate"}}>Generate PDF</a>
      </div>
    </div>
    <div class="content-template">
      
      	<table class="table table-bordered" id="table-metabase">
        <thead>
            <tr>
                <th>Title</th>
                <th>Body</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>Zenefits</td>
                <td>4704</td>
            </tr>
            <tr>
                <td>Zenefits</td>
                <td>4705</td>
            </tr>
        </tbody>
    </table>
      
    </div>
    
</script>

<script type="text/x-handlebars" id="articles/index">
    <div class="container">
    <h1 style="float:left">EmberJS <small>Exporting HTML to PDF</small></h1>
    <button {{action "generate"}} style="float:right; margin: 10px;">Export to PDF</button>
    <table class="table table-bordered" id="table-metabase">
        <thead>
            <tr>
                <th>Title</th>
                <th>Body</th>
            </tr>
        </thead>

        <tbody>
          {{#each}}
            <tr>
               ...

CSS

h3
{
  border:1px solid black;
}
.content-template{
  display:none
}

JavaScript

App = Ember.Application.create({
    rootElement: '#main'
});

App.IndexController = Ember.ArrayController.extend({
    actions: {
        generate: function(){
        //alert($('#scroll-div').height());
        
        var pdf = new jsPDF();
        var specialElementHandlers = {
          '#editor': function (element, renderer) {
              return true;
          }
        };
        var $addr = $(this).closest('.res').find('.content');
        //console.log($addr);
        var $temp = $('.content-template');
        //console.log($temp);
        $temp.find('h3').text($addr.find('h3').text());
        pdf.fromHTML($temp.html(), 15, 15, {
              'width': 170,
              'elementHandlers':specialElementHandlers
            }
        );
        pdf.save('sample-file.pdf');	
      }
    }
});