使用HTML和CSS打印地址标签

时间:2015-11-23 16:51:08

标签: html css

我想在105 * 48的地址标签纸上打印地址标签。

我无法在这些标签盒中正确放置我的内容。基于浏览器和打印机设置内容的打印方式不同。我的目标是实现类似下面的东西,这在印刷品上应该看起来一样。请注意没有边距。

address label

您能否建议采用最佳方法在浏览器中统一打印这些标签。

我们可以使用简单的HTML和CSS实现这一目标。

[编辑]

添加示例代码..

    <html>
    <head>
    <style>
        body {
        margin: 0;
        padding: 0;
    }        }
    * {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.page {
    width: 21cm;
    min-height: 29.7cm;
    padding: 0cm;
    margin: auto;
    background: white;
    }

.box {
        display:block;
        box-sizing: border-box;
        width:95mm;
        height:48mm;
        float:left;
        text-align: left;
        vertical-align: top;
        border: 1px solid red;
        Padding:5mm;
    }

@page {
    size: A4;
    margin: 4mm 0 4mm 0 ;
}
@media print {
    .page {
        margin: 0;
        border: initial;
        border-radius: initial;
        width: initial;
        min-height: initial;
        box-shadow: initial;
        background: initial;
        page-break-after: always;
    }

}       
</style>
</head>
<body>
<div class="page">
        <div class="box"><h2>Mr. TEST</h2><p>how are you</p></div>
        <div class="box"><h2>Mr. TEST</h2><p>how are you</p></div>      
</div> 
</body>
</html>

1 个答案:

答案 0 :(得分:0)

此答案是对Boulder Information Services上优秀文章的扩展,他们描述了使用CSS打印多页标签,并在必要时使用前导空白。还有一个双击功能可以显示/隐藏标签的轮廓。

<?php
error_reporting(E_ALL);
ini_set('display_errors', '1'); 

session_start();
session_write_close();

if ($_SESSION['user_customer_id']=="" || !isset($_SESSION['user_customer_id'])) {
    header("location:index.html");
    die();
}

$db = getConnection();

$blnActive = (isset($_GET["active"]));
$blnAll = (isset($_GET["all"]));
$blanks = 0;
if (isset($_GET["blanks"])) {
    $blanks = passed_var("blanks", "get");  //passed_var is a function that cleanses the GET parameter.
}
$sql = "SELECT DISTINCT pers.full_name, pers.first_name, pers.last_name, pers.full_address, pers.street, pers.suite, pers.city, pers.state, pers.zip
FROM `cse_person` pers 
WHERE pers.deleted = 'N'
AND pers.customer_id = :customer_id
";

$sql .= "
ORDER BY TRIM(pers.full_name)
";
//LIMIT 0, 10
//die($sql);
$stmt = $db->prepare($sql);
$stmt->bindParam("customer_id", $_SESSION['user_customer_id']);
$stmt->execute();
$clients = $stmt->fetchAll(PDO::FETCH_OBJ);

$db = null;

//die(print_r($clients));
$arrStreets = array();
if ($blanks > 0) {
    for($int = 0; $int < $blanks; $int++) {
        $arrStreets[] = "<span class='full_name'>&nbsp;</span><br>&nbsp;<br>&nbsp;&nbsp; &nbsp; &nbsp;";
    }
}
foreach ($clients as $client) {
    $street = $client->street;
    $city = $client->city;
    $suite = $client->suite;
    $state = $client->state;
    $zip = $client->zip;

    //nothing

    //name
    $full_name = $client->first_name . " " . $client->last_name;

    $full_name = str_replace("-", " - ", $full_name);   //so that ucwords works on hyphenated names
    $full_name = ucwords(strtolower($full_name));
    $full_name = str_replace(" - ", "-", $full_name);
    $arrStreets[] = "<span class='full_name'>" . $full_name . "</span><br>" . $street . "<br>" . $city . ", " . $state . " " . $zip;
}

$row_counter = 0;
foreach($arrStreets as $street) {
    if (!isset($arrRow[$row_counter])) {
        $arrRow[$row_counter] = array();
    }
    $label = '<div class="label">' . $street . '</div>';
    $arrRow[$row_counter][] = $label;
    if (count($arrRow[$row_counter])==3) {
        //however, might be new page
        if (($row_counter%30)==0) {
            if ($row_counter != 0) {
                $arrRow[$row_counter][2] .='
                <div class="page-break">' . $row_counter . '</div>';
            }
        }
        $row_counter++;
    }
}
?>
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Avery Labels (5160) Report</title>
    <style>
    body {
        width: 8.5in;
        margin: 0in .1875in;
        }
    .label{
        /* Avery 5160 labels -- CSS and HTML by MM at Boulder Information Services */
        width: 2.025in; /* plus .6 inches from padding */
        height: .875in; /* plus .125 inches from padding */
        padding: .125in .3in 0;
        margin-right: .125in; /* the gutter */

        float: left;
        font-size:0.9em;

        text-align: left;
        overflow: hidden;

        outline: 1px white; /* outline doesn't occupy space like border does */
        }
    .page-break  {
        clear: left;
        display:block;
        page-break-after:always;
        }
    .full_name {
        font-size:1.1em;
        font-weight:bold;
    }
    </style>

</head>
<body ondblclick="showDotted()">
<?php if ($blanks==0) { ?>
<div id="blanks_link">
    If you have a partially printed sheet of labels, please <a href="javascript:enterBlanks()">click here to enter the number of blanks</a> you wish to skip.
</div>
<?php } ?>
<?php foreach($arrRow as $row) {
    echo $row[0];
    if (isset($row[1])){
        echo $row[1];
    }
    if (isset($row[2])){
        echo $row[2];
    }
}
?>


<script language="javascript">
var blnDotted = false;
function showDotted() {
  var cols = document.getElementsByClassName('label');
  for(i=0; i<cols.length; i++) {
      if (!blnDotted) {
        cols[i].style.outline = '1px dotted';
      } else {
          cols[i].style.outline = '1px white';
      }
  }
  if (!blnDotted) {
      blnDotted = true;
  } else {
      blnDotted = false;
  }
}
function init() {
    setTimeout(function() {
        hideBlankLink();
    }, 3000);
}
function hideBlankLink() {
    document.getElementById("blanks_link").style.display = "none";
}
function enterBlanks() {
    var labels = prompt("Please enter the number of labels you want to skip to start", "0");

    if (labels != null) {
        document.location.href = "multi_labels.php?<?php echo $_SERVER['QUERY_STRING']; ?>&blanks=" + labels;
    }
}
</script>
</body>
</html>

只要您需要它,这里就是getConnection函数:

function getConnection() {
    $dbhost = "YOURHOST";
    $dbuser="YOURUSER";
    $dbpass="YOURPWD";
    $dbname="YOURDB";

    $dbh = new PDO("mysql:host=$dbhost;dbname=$dbname", $dbuser, $dbpass);            
    $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    return $dbh;
}