chrome pdf 打印边距问题处理

た入场券 2022-10-24 13:24 582阅读 0赞

## 需求 ##

> 将网页打印成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==][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 以上宽度设计的，这时候浮动容器会错位、超过宽度的图片和表格会显示不完全。

## 处理边距的问题 ##

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

## 谷歌浏览器为例 ##

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

## 打印效果 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]

[https_oss.phxg.cn_download_genFileByGotenberg_E4_BC_98_E5_B1_B1_E7_BE_8E_E5_9C_B0A_E5_8C_BA_url_aHR0cHM6Ly93d3cuYmFpZHUuY29tLw]: https://oss.phxg.cn/download/genFileByGotenberg/%E4%BC%98%E5%B1%B1%E7%BE%8E%E5%9C%B0A%E5%8C%BA?url=aHR0cHM6Ly9hcHAucGh4Zy5jbi8jL0F1dG9SZXBvcnQ=
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]: /images/20221024/bd9f8c0f9cd84f45ad11012090abfa8c.png