CSS To PDF

Convert HTML Css to PDF and Print

by kstubs

HTML

<script src="http://www.xportability.com/XEPOnline/xepOnline.jqPlugin.003.js"></script>
<p style="font-style:italic; float:right">you will need to enable pop ups for this to work</p>
<div style="clear:both">
    <button id="print_one">Print Me</button>
    <button id="print_two">Print Me (embed result)</button>
    <button id="no_print">No Print (style only)</button>
    <button id="clearme" style="display:none">Clear PDF Results</button>
    <input type="checkbox" id="style_me_2" />Style Me 2</div>
<div id="print_me">
     <h1 style="font-size:3em">Would be nice if this printed</h1>
 <b style="color:green">This is fancy</b>

    <p style="margin:15px">How about a paragraph?</p>
     <h1>A Table?</h1>

    <table>
        <tr>
            <th>Image</th>
            <th>Description</th>
        </tr>
        <tr>
            <td>
                <img src="http://images.all-free-download.com/images/graphicmedium/sunset_desert_cactus_clip_art_156133.jpg">
            </td>
            <td style="color: brown; text-align:justify;" fostyle="text-align-last: left; font-stretch: wider; font-size-adjust:0.6; hyphenate: true; color:rgb-icc (255, 255, 0, #CMYK, .1, .2, .7, .5);"><i>A beautiful sunset</i>
            </td>
        </tr>
    </table>
</div>

CSS

#print_me {
    font-family:helvetica;
}
.style_me_2 {
    color:blue !important;
    font-size:2em;
}
table td {
    padding:3pt;
}
@media print {
    #print_me {
        color: indianred;
    }
}

JavaScript

$('#print_one').click(function () {
    printMe();
});
$('#print_two').click(function () {
    printMe('embed');
    $('#print_one,#print_two').attr('disabled', 'disabled');
    $('#clearme').show();
});
$('#no_print').click(function () {
    printMe('none');
    $('#print_one,#print_two').attr('none');
    $('#clearme').show();
});
$('#clearme').click(function () {
    xepOnline.Formatter.Clear();
    $('#print_one,#print_two').attr('disabled', null);
    $('#clearme').hide();
});
$('#style_me_2').click(function () {
    $('#print_me').toggleClass('style_me_2');
});

function printMe(render) {
    render = (render === undefined) ? false : render;
    xepOnline.Formatter.Format('print_me', {
        render: render,
        pageMargin: ".25in"
    });
}