html打印140mm
时间: 2023-07-01 14:05:53 浏览: 52
要在 HTML 中打印 140mm 的纸张,可以使用 CSS 的 @page 规则来定义打印页面的大小和边距。以下是一个示例:
```html
<!DOCTYPE html>
<html>
<head>
<style>
@page {
size: 140mm 210mm; /* 定义页面大小为 140mm x 210mm */
margin: 0; /* 取消默认边距 */
}
body {
font-size: 12pt; /* 设置字号 */
line-height: 1.5; /* 设置行高 */
padding: 20mm; /* 设置页面内边距 */
}
</style>
</head>
<body>
<!-- 在这里编写要打印的内容 -->
<h1>Hello, world!</h1>
<p>This is a sample page.</p>
</body>
</html>
```
在打印时,选择“纸张大小”为“自定义”,然后输入“140mm x 210mm”即可。
相关问题
html 58mm前端打印样式
要实现58mm前端打印样式,可以考虑以下几点:
1. 设置页面大小为58mm,可以使用CSS的@page规则设置页面大小为58mm,例如:
```css
@page {
size: 58mm;
}
```
2. 调整页面布局,因为58mm的纸张大小比较小,需要精简布局,避免内容过于拥挤,可以使用CSS的@media规则针对不同屏幕大小进行布局调整,例如:
```css
@media print and (max-width: 58mm) {
/* 根据需要进行布局调整 */
}
```
3. 设置字体大小和行间距,因为58mm的纸张大小比较小,需要设置合适的字体大小和行间距,以保证阅读体验,例如:
```css
body {
font-size: 8pt;
line-height: 1.2;
}
```
4. 调整表格样式,因为58mm的纸张大小比较小,需要精简表格样式,避免内容过于拥挤,可以使用CSS的border-collapse属性将表格边框合并,以节省空间,例如:
```css
table {
border-collapse: collapse;
}
td, th {
border: 1px solid black;
padding: 2px;
}
```
总之,58mm前端打印样式需要考虑到页面大小、布局、字体大小和行间距、表格样式等方面,根据具体需求进行调整。
html 57mm小票打印格式开发
以下是一个简单的57mm小票打印格式的HTML示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>小票打印格式</title>
<style type="text/css">
@media print {
/* 定义打印时的样式 */
body {
font-size: 12px;
}
/* 定义票据的样式 */
.ticket {
width: 57mm;
height: auto;
margin: 0 auto;
border: 1px solid #000;
padding: 5px;
font-family: 'Microsoft YaHei', sans-serif;
}
/* 定义票据表格的样式 */
.ticket table {
width: 100%;
border-collapse: collapse;
}
.ticket table td, .ticket table th {
border: 1px solid #000;
padding: 5px;
}
.ticket table th {
background-color: #eee;
}
/* 定义票据页脚的样式 */
.ticket .footer {
margin-top: 10px;
text-align: center;
}
}
</style>
</head>
<body>
<div class="ticket">
<table>
<thead>
<tr>
<th colspan="2">商品名称</th>
<th>单价</th>
<th>数量</th>
<th>金额</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">商品1</td>
<td>10.00</td>
<td>2</td>
<td>20.00</td>
</tr>
<tr>
<td colspan="2">商品2</td>
<td>20.00</td>
<td>1</td>
<td>20.00</td>
</tr>
<tr>
<td colspan="2">商品3</td>
<td>30.00</td>
<td>3</td>
<td>90.00</td>
</tr>
<tr>
<td colspan="4" align="right">合计:</td>
<td>130.00</td>
</tr>
</tbody>
</table>
<div class="footer">
联系电话:10086
</div>
</div>
</body>
</html>
```
需要注意的是,这只是一个简单的示例,实际应用中还需要根据具体需求进行调整和完善。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)