@cloudformatter template

A simple starting template for @cloudformatter testing

HTML

<script src="http://www.cloudformatter.com/Resources/Pages/CSS2Pdf/Script/xepOnline.jqPlugin.js"></script>
<script src="https://www.google.com/jsapi?autoload={&#39;modules&#39;:[{&#39;name&#39;:&#39;visualization&#39;,&#39;version&#39;:&#39;1.1&#39;,&#39;packages&#39;:[&#39;corechart&#39;]}]}"></script>
<div id="buttons" class="buttons"></div>
<div id="PrintMedia">
            
            <h1>Print Media</h1><p>This solution also supports various aspects of print media. The print media
                stylesheet is applied to the data before sending it to be processed and as such, you
                can affect various style changes as well as inject page information this way. Some
                browsers fully support CSS3 print media @page attributes while others do not.
                However, the system was created so you can either use @page or you can specify in
                code.</p>
            <p class="noprint">This paragraph will not print in the output because it's
                class is set to "noprint" and the print media css used sets all "noprint" elements
                to "display:none".</p>
            <p class="printme">Woops there it is! Woops there it is!</p>
          </div>

CSS

button {
    color:#111;
    background-image: linear-gradient(to bottom,#ffffff 0,#777777 100%);
    background-repeat: repeat-x;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    cursor: pointer;
    border-width:1px;
    border-color: #777;
    text-shadow: 0 -1px 0 rgba(0,0,0,.1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075);
}
.printme { display:none;}
@media print {
  .noprint {display:none;}
  .printme {display:block;}
}

JavaScript

var click="return xepOnline.Formatter.Format('PrintMedia', {render:'download'})";
jQuery('#buttons').append('<button onclick="'+ click +'">PDF</button>');