#1
  1. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    May 2004
    Location
    Boston, MA USA
    Posts
    556
    Rep Power
    51

    PHP: Printing to Forms


    Hi:

    I have a CRM which I wrote primarily in PHP/MySQL with some JavaScript. I would like to print address labels, name badges, etc. to pre-formatted media.

    I have created a couple of PHP reports, primarily using tables but adjusting cell height, width etc is awkward and susceptible to error, especially when text might wrap to multiple lines.

    Can someone point me in the direction of the most effective way to do this?

    As well, if there is a open source solution already developed that would be handy.

    Thanks!
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jul 2003
    Posts
    4,437
    Rep Power
    652
    I'd suggest you create a PDF from the form for printing.
    There are 10 kinds of people in the world. Those that understand binary and those that don't.
  4. #3
  5. Wiser? Not exactly.
    Devshed God 2nd Plane (6000 - 6499 posts)

    Join Date
    May 2001
    Location
    Bonita Springs, FL
    Posts
    6,250
    Rep Power
    4150
    Yes, generating a PDF is generally the best way to go if you want to generate something for print with specific positioning.

    An alternative is to use CSS with some absolute positioning and fixed pixel sizes to get close.

    I've combined the two approaches recently in one project. I use plain CSS/HTML to generate a page then run it through a HTML-to-PDF converted before presenting it to the user. I'm not entirely sure how accurate it is as I don't have any of the paper that it's supposed to be printed on to test with, but the client hasn't complained so I'm assuming it's pretty close.

    Essentially what I did was create HTML sort of like:
    Code:
    <body>
    <div class="pdf-page">
      <div class="page-header"></div>
      <div class="info-box"><span class="info-name">...</span>...</div>
      <div class="info-box"><span class="info-name">...</span>...</div>
    </div>
    </body>
    Then css like:
    Code:
            .pdf-page {
                position: relative;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
    
                //make room for pre-printed header graphic
                padding-top: 15mm;
               
                //paper dimensions
                width: 215.9mm;
                height: 279.4mm;
            }
    
            .page-header {
                position: relative;
                height: 20mm;
                width: 100mm;
                margin: 0 auto;
             }
    
            .info-box {
                position: relative;
                height: 30mm;
            }
    
            .info-name {
                position: absolute;
                top: 0;
                left: 0;
                font-size: 12px;
            }
    Recycle your old CD's



    If I helped you out, show some love with some reputation, or tip with Bitcoins to 1N645HfYf63UbcvxajLKiSKpYHAq2Zxud
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    May 2004
    Location
    Boston, MA USA
    Posts
    556
    Rep Power
    51
    Originally Posted by kicken
    Yes, generating a PDF is generally the best way to go if you want to generate something for print with specific positioning.

    An alternative is to use CSS with some absolute positioning and fixed pixel sizes to get close.

    I've combined the two approaches recently in one project. I use plain CSS/HTML to generate a page then run it through a HTML-to-PDF converted before presenting it to the user. I'm not entirely sure how accurate it is as I don't have any of the paper that it's supposed to be printed on to test with, but the client hasn't complained so I'm assuming it's pretty close.

    Essentially what I did was create HTML sort of like:
    Code:
    <body>
    <div class="pdf-page">
      <div class="page-header"></div>
      <div class="info-box"><span class="info-name">...</span>...</div>
      <div class="info-box"><span class="info-name">...</span>...</div>
    </div>
    </body>
    Then css like:
    Code:
            .pdf-page {
                position: relative;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
    
                //make room for pre-printed header graphic
                padding-top: 15mm;
               
                //paper dimensions
                width: 215.9mm;
                height: 279.4mm;
            }
    
            .page-header {
                position: relative;
                height: 20mm;
                width: 100mm;
                margin: 0 auto;
             }
    
            .info-box {
                position: relative;
                height: 30mm;
            }
    
            .info-name {
                position: absolute;
                top: 0;
                left: 0;
                font-size: 12px;
            }
    That looks great; I will give a try... Thanks!
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    May 2004
    Location
    Boston, MA USA
    Posts
    556
    Rep Power
    51
    Your Suggestions works great, with one exception:

    Even with the printer margins set to zero the forms start printing too far down the page and too far to the right. I can take care of the vertical by having the first form simply a shorter height than the others but I am not sure how to move all of the printing to the left.

    Is it possible yo use a negative number for "position" or is there another way to cheat the printing up and to the left?

    Thanks!
  10. #6
  11. Wiser? Not exactly.
    Devshed God 2nd Plane (6000 - 6499 posts)

    Join Date
    May 2001
    Location
    Bonita Springs, FL
    Posts
    6,250
    Rep Power
    4150
    Originally Posted by SeanF
    Is it possible yo use a negative number for "position"
    Yes.
    Code:
    position: absolute; 
    top: -10px;
    left: -30px;
    You may need to remove margins/padding from the body if you didn't already.
    Code:
    html, body { margin: 0; padding: 0; }
    Recycle your old CD's



    If I helped you out, show some love with some reputation, or tip with Bitcoins to 1N645HfYf63UbcvxajLKiSKpYHAq2Zxud

IMN logo majestic logo threadwatch logo seochat tools logo