chrome pdf 打印边距问题处理

需求

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

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

打印方式

• 地址：打印地址：https://oss.phxg.cn/download/genFileByGotenberg/%E4%BC%98%E5%B1%B1%E7%BE%8E%E5%9C%B0A%E5%8C%BA?url=aHR0cHM6Ly93d3cuYmFpZHUuY29tLw==
• 使用方式：url=后面的地址就是打印的网页地址，注意点就是：打印的地址需要通过base64加密即可
• 或者直接将完整的路径复制到浏览器地址栏或者调用接口都可以

知识科普

需要了解一下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时，默认没有显示是否显示页眉页脚选项，边距设置为自定义时会显示页眉页脚选项

打印效果