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

    Join Date
    May 2004
    Location
    Boston, MA USA
    Posts
    557
    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,450
    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,262
    Rep Power
    4193
    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
    557
    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
    557
    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,262
    Rep Power
    4193
    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
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    May 2004
    Location
    Boston, MA USA
    Posts
    557
    Rep Power
    51
    This works great but I have discovered a new problem. If the "Paper Dimensions" matched the printed page, it looked like the pages after the first were printing OK. But there was actually a little error and each page was shifting up a little. What I want is for each page to have four forms on it and the first form is in exactly the same position on every page. So, logically, I used "page-break-after: always;" in the css. If I put a border around the four elements of the .pdf-page block I see the top of the border for page two is actually on page one. So, the "page-break-after". does not appear to be working.

    A google search for that attribute shows produced the following page:
    https://www.w3schools.com/cssref/pr_print_pageba.asp
    which states "Note: You cannot use this property on an empty <div> or on absolutely positioned elements."

    the ".pdf-page" section of my css file is here:

    Code:
            .pdf-page {
                position: relative;
                top: -50;
                left: 50;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
                margin: auto;
    
                //make room for pre-printed header graphic
                padding-top: 0mm;
               
                //paper dimensions
                width: 101.6mm;
                height: 355.6mm;
                page-break-after: always;
    	    text-align: center;
            }
    Is there something wrong with the way I have configured this?

    All suggestions welcomed.

    Thanks!
    Last edited by SeanF; June 7th, 2018 at 06:28 AM.

IMN logo majestic logo threadwatch logo seochat tools logo