chrome pdf 打印边距问题处理

需求

将网页打印成pdf,Chrome 可直接将网页保存(打印)为 PDF (无需安装 Adobe ),或者邮件点击打印,但是式样跟网页上显示的有很大不同。

问题是无法选择「纸张大小」,Chrome 在保存为 PDF 文件时,默认纸张大小是 A4。若布局为纵向,显示大小为 210mm×297mm ;若布局为横向,显示大小为 297mm×210mm。

打印方式

知识科普

需要了解一下DPI ( Dot Per Inch )的指标。Windows 下的网页打印的默认 DPI 为 96dpi。按照 1 英寸=25.41mm 换算, A4 纸张可实际显示的像素宽度为 794px×1123px ,即打印网页的宽度为 794px。

实际打印还会有页边距,如果页边距为 5mm (窄边距),网页内容最大宽度约 750px ,若页边距为 19mm (默认边距),网页内最大元素分辨率约 650px。

基于此,很多网页在打印时会变形,因为打印时内容容器的宽度只有 750px 或者 650px ,但现在的网页内容大多都是基于至少 1000px 以上宽度设计的,这时候浮动容器会错位、超过宽度的图片和表格会显示不完全。

处理边距的问题

<style type="text/css" media="print">
/* 设置打印的边距问题,@page用于修改打印页的样式, 仅仅 margin, padding, border 和 background 等打印时需要的属性可以使用, 其他属性将直接忽略*/
/* 并且不要用vh、vm单位。给@page设置margin可以在所有打印页生效。如果想单独设置第一页等需要加伪类 */
/*  
:first打印文档的时候,第一页的样式
:left对打印文档的左侧页样式
:right打印文档的所有右页
*/
@page {
    size: auto;  
    margin: 0;
}
.page_wrapper {
   margin: 0 auto;
   width: 100%; // 移动端使用
   width: 210mm; // pc端使用
   background: rgb(248, 247, 247);
   overflow: hidden;
   border: 1px solid #eee;
}
</style>

打印的时候才生效的css样式

<style lang="less" scoped>
@media print{
  // 设置打印的时候才会生效的样式
     .notPrint {
         display: none;
     }
 }
</style>

谷歌浏览器为例

  • 实际打印效果用户完全可以自己设置打印页面间距
  • @page设置margin为0时,默认没有显示是否显示页眉页脚选项,边距设置为自定义时会显示页眉页脚选项

打印效果

在这里插入图片描述

参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:终极编程指南 设计师:CSDN官方博客 返回首页

打赏作者

yw00yw

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值