Skip to content

Instantly share code, notes, and snippets.

@jdpace

jdpace/pdfkit-example.rb

Created June 18, 2010 01:12
Download ZIP

Revisions

  1. jdpace revised this gist Jun 18, 2010. 1 changed file with 11 additions and 0 deletions.
    11 changes: 11 additions & 0 deletions pdfkit-example.rb
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,14 @@
    ##################################################################
    # This file uses PDFKit to render a PDF modeled after a Prawn #
    # example. It uses RaphaelJS to generate SVG. #
    # #
    # Note: There seems to be a bug in wkhtmltopdf that is creating #
    # an additional page. Seems to be related to `overflow: hidden`. #
    # #
    # Prawn PDF: http://majesticseacreature.com/prawn-sample.pdf #
    # Prawn Source: http://gist.github.com/441285 #
    ##################################################################

    html = <<-HTML
    <html>
    <head>
  2. jdpace renamed this gist Jun 18, 2010. 1 changed file with 0 additions and 0 deletions.
    0 PDFKit Version of a Prawn Example → pdfkit-example.rb
    View file
    File renamed without changes.
  3. jdpace created this gist Jun 18, 2010.
    143 changes: 143 additions & 0 deletions PDFKit Version of a Prawn Example
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,143 @@
    html = <<-HTML
    <html>
    <head>
    <style>
    html * {
    margin: 0;
    padding: 0;
    }

    #canvas {
    width: 500px;
    height: 500px;
    overflow: hidden;
    background-color: #CCC;
    position: relative;
    }

    #canvas h1 {
    font-family: Courier;
    font-size: 80px;
    font-weight: bold;
    color: #000;
    opacity: 0.75;
    width: 400px;
    height: 100px;
    position: absolute;
    left: 50px;
    top: 210px;
    z-index: 5;
    text-align: center;
    }

    #canvas h1 em {
    color: #F00;
    font-style: normal;
    }

    #canvas a#repo {
    position: absolute;
    display: inline-block;
    height: 28px;
    width: 180px;
    color: #FFF;
    background-color: #000;
    font-family: Arial;
    font-size: 14px;
    line-height: 28px;
    text-align: center;
    text-decoration: none;
    -webkit-transform: rotate(-90deg);
    right: -76px;
    top: 236px;
    z-index: 10;
    }

    #flowers {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 500px;
    height: 500px;
    overflow:hidden;
    }

    #lorem {
    color: #000;
    font-family: Arial;
    font-size: 12px;
    line-height: 1.4em;
    text-align: justify;
    width: 500px;
    height: 500px;
    overflow:hidden;
    }
    </style>
    </head>
    <body>

    <div id="canvas">
    <h1>PDF<em>Kit</em></h1>

    <div id='flowers'></div>

    <p id="lorem">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna.</p
    <a id="repo" href="http://github.com/jdpace/pdfkit">github.com/jdpace/pdfkit</a>
    </div>
    <script src="http://github.com/DmitryBaranovskiy/raphael/blob/master/raphael-min.js?raw=true&1ljkj" type="text/javascript"></script>
    <script type="text/javascript">
    function flower(paper, x, y) {
    var flower = paper.set();

    flower.push(
    petal(0,x,y,paper),
    petal(90,x,y,paper),
    petal(180,x,y,paper),
    petal(270,x,y,paper)
    );
    flower.rotate(45)
    return(flower)
    }

    function petal(angle, x, y, paper) {
    var side = paper.width / 10;

    var triangle = paper.path("M"+x+" "+y+"L"+(x+side)+" "+(y+side)+"L"+(x+(side*2))+" "+y+"Z");
    triangle.attr({fill: randomColor()});
    triangle.rotate(angle,x,y);
    }

    function stringOfFlowers(paper,x,y,dir) {

    for(i=1;i<=4;i++) {
    var offset = paper.width / 5;
    var coX = x + (offset * i);
    var coY = y + (offset * i * dir);
    flower(paper,coX,coY);
    }
    }

    function randomColor() {
    return('rgb('+Math.floor(Math.random() * 255)+','+Math.floor(Math.random() * 255)+','+Math.floor(Math.random() * 255)+')');
    }

    var paper = Raphael('flowers', 500, 500);
    stringOfFlowers(paper, 0, 0, +1);
    stringOfFlowers(paper, 0, 500, -1);
    </script>
    </body>
    </html>
    HTML

    require 'rubygems'
    require 'pdfkit'

    kit = PDFKit.new(html, :page_width => '500px', :page_height => '500px',
    :margin_top => 0, :margin_bottom => 0, :margin_left => 0, :margin_right => 0,
    :dpi => 300)

    path = File.join(ENV['HOME'],'pdfkit-example.pdf')
    kit.to_file(path)

    puts "Saved example PDF to #{path}"