Vue-Print-Nb是一个前端打印的库,用户很轻松就能安装,但是如果需要使用自定义页码时,往往会出现页头显示时间、标题,页脚显示网址与页码。
但是我们的需求往往需要自定义页码,可能在页面左上角,右下角等等。
最关键的是我们并不需要其他信息的显示。
此时可以用到CSS3中的打印相关选择器,将页面多余部分隐藏,然后使用@bottom-right等选择器选择每个页面的相关位置,并使用content将页码渲染到上面。
@page {
margin: 15mm 0mm;
padding: 0mm;
@bottom-right {
content: counter(page) ' / ' counter(pages);
margin-right: 15mm;
}
}
实现这样的效果