html页面实现A4打印
2019-10-10 本文已影响0人
AAA前端
- 最近有个项目需要获取数据，然后渲染页面后。用户可以在页面右击鼠标打印。
- 代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<style>
body {
background: rgb(204, 204, 204);
}
page[size="A4"] {
background: white;
width: 21cm;
height: 29.7cm;
display: block;
margin: 0 auto;
margin-bottom: 0.5cm;
}
@media print {
body,
page[size="A4"] {
margin: 0;
box-shadow: 0;
}
}
</style>
<body>
<page size="A4">
里面是打印的内容
</page>
</body>
</html>
- 这样实现了对A4宽度的设置，打印的高度不用管，打印的时候会自动调节高度。
