是否可以设置页面大小
使用@page进行配置;
A4纸大小竖向@page{size:210mm 297mm } A4纸大小横向 @page{size:297mm 210mm ; } 如何强制分页
page-break-before: always
page-break-after:always
是否可以显示页码 为什么 等标签报错
示例 竖向样式
<style type="text/css">
/*解决html转pdf文件中文不显示的问题*/
body {
font-family: 方正小标宋_GBK;
/*font-weight: bold;*/
font-size: 14pt;
}
* {
margin: 0;
padding: 0;
font-size: 14pt;
font-family: SimSun;
line-height: 25px;
}
/*设定纸张大小*/
/* A4纸 portrait landscape */
@page{size:210mm 297mm }
/*@page{size:210mm 297mm landscape}*/
@media print {
/* 页面样式 */
body {
margin: 0;
padding: 0;
}
/* 页眉 */
@page {
margin-top: 1cm;
margin-bottom: 2cm;
}
/* 页脚 */
#footer {
position: fixed;
bottom: -10mm;
left: 0;
right: 0;
height: 2cm;
text-align: right;
}
/* 页码 暂未解决首页显示问题 */
/*#footer:after {*/
/* content: counter(page);*/
/*}*/
/* 首页不显示页码 */
@page :first {
/* 空的样式规则,不设置内容 */
}
#footer:after:first {
content: none;
}
@page :first {
margin-bottom: 0px;
}
}
table {
width: 100%;
margin-top: 4mm;
}
img {
background: #fff;
box-shadow: none;
}
div {
word-wrap:break-word;
text-indent:2em;
letter-spacing:4px;
width:670px;
margin: 0 auto;
}
.underline-multi{
text-decoration:underline;
}
.underline {
letter-spacing: 2px;
position: relative;
display: inline-block;
min-width: 300px; /* 固定长度 */
text-indent:0.5em;
}
.underline::after {
content: "";
position: absolute;
left: 0;
bottom: 2px; /* 下划线位置调整 */
width: 100%;
height: 1px;
background-color: black; /* 下划线颜色 */
}
/**
其他的字体需要导入
封面
*/
.cover{
/*font-family: 方正小标宋_GBK;*/
/*font-weight: bolder;*/
/*width: 800px;*/
/*white-space:normal;*/
/*word-break:break-all;*/
/*text-align: center;*/
/*mso-font-kerning: 1.0000pt;*/
}
.cover-title{
white-space:normal;
word-break:break-all;
text-align: center;
mso-font-kerning: 1.0000pt;
line-height: 70pt;
text-indent: 0em;
}
.contractor > div {
font-size: 14pt;
line-height: 32pt;
text-align: left;
}
.content{
font-size: 18pt;
line-height: 22pt;
}
/*一个字*/
.letter-1,.letter-2,.letter-3,.letter-4,.letter-5,.letter-6,.letter-7,.letter-8,.letter-9,.letter-10,.letter-11,.letter-12{
letter-spacing: 2px;
min-width: 25px;
text-align: center;
text-indent:0em;
display: inline-block;
}
/* 建议4位以内的数字 */
.letter-2{
min-width: 50px;
}
.letter-3{
min-width: 75px;
}
.letter-4{
min-width: 100px;
}
.letter-5{
min-width: 125px;
}
.letter-6{
min-width: 150px;
}
.letter-7{
min-width: 175px;
}
.letter-8{
min-width: 200px;
}
.letter-9{
min-width: 225px;
}
.letter-10{
min-width: 250px;
}
.letter-11{
min-width: 275px;
}
.letter-12{
min-width: 300px;
}
.font-18,div.font-18{
font-size: 18pt;
line-height: 110%;
}
div.font-42{
font-size: 42pt;
font-weight: 500;
}
div.font-36{
font-size: 36pt;
line-height: 110%;
}
div.font-32{
font-size: 32pt;
line-height: 110%;
}
div.font-22{
font-size: 22pt;
line-height: 110%;
}
.page-break-before{
page-break-before: always
}
.page-break-after{
page-break-after: always
}
/**
段落
*/
.paragraph{
/*font-family: 仿宋_GB2312;*/
line-height: 200%;
}
div.title{
font-weight: bold;
line-height: 240%;
}
div.right{
text-align: right;
}
div.center{
text-align: center;
}
div.bolder,span.bolder{
font-weight: bolder;
}
div.signature>div{
text-indent: 0em;
}
</style>
暂未实现功能:首页不显示页码,其他的页面显示页码