我想在 105*48 的地址标签页上打印地址标签。
我无法将我的内容正确地放入这些标签框中。根据浏览器和打印机设置，内容的打印方式有所不同。我的最终目标是实现如下所示的目标，并且打印出来的效果也应该相同。注意没有边距。
您能否建议实现跨浏览器统一打印这些标签的最佳方法。
我们可以使用简单的 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>
最佳答案
这个答案是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'> </span><br> <br> ";
}
}
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>
Just in case you need it, here is the getConnection function:
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;
}
关于html - 使用 HTML 和 CSS 打印地址标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33876340/