chrome pdf 打印边距问题处理 |
您所在的位置：网站首页 › 打印边距离调整数据 › chrome pdf 打印边距问题处理 |
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 以上宽度设计的，这时候浮动容器会错位、超过宽度的图片和表格会显示不完全。 处理边距的问题 /* 设置打印的边距问题，@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; } 打印的时候才生效的css样式 @media print{ // 设置打印的时候才会生效的样式 .notPrint { display: none; } } 谷歌浏览器为例 实际打印效果用户完全可以自己设置打印页面间距@page设置margin为0时，默认没有显示是否显示页眉页脚选项，边距设置为自定义时会显示页眉页脚选项 打印效果
|
【本文地址】
今日新闻 |
推荐新闻 |