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

打印效果

chrome pdf 打印边距问题处理相关推荐

PDF编辑/PDF浏览/PDF打印：PDFPrinting.NET Crack
PDFPrinting.NET高级 PDF 编辑库,可完全控制您的 PDF 创建工作流程我们为 PDF 创建和编辑提供高级和低级 API.从简单的文档拆分到单个元素的精确删除. 从头开始创建 PDF ...
完美PDF打印：PDFPrinting.NET Crack
期待完美的打印效果和完美的文档显示. 在这里,您可以快速了解 PDFPrinting.NET 最重要的功能.如需更详细的概述,请查看快速入门指南或参考文档. 无需第三方 RDP 软件. 支持打印所有者 ...
cad导出pdf打印后尺寸不对的解决方案
从cad中导出pdf,为保持尺寸与实际尺寸一致的设置可以参考这篇文章中的设置,怎么将CAD绘制的图纸按原尺寸打印输出. 将导出的pdf拿去打印却发现与实际尺寸不一致这个是因为我在打印pdf的时候犯 ...
c++ byte转cbitmap_关于 C++ 打印 PDF 打印及 PDF 转图片、合并
关于 C++ 打印 PDF 打印及 PDF 转图片.合并原文: http://www.aqcoder.com/post/42 pdf(Portable Document Format 的简称,意为& ...
ASP.net的PDF打印（水晶报表）[摘]
如何部署ASP.NET Crystal Report (1) CRRedist2005_x86.msi 報表套件 (必要安裝) 取得方法在安裝有VS2005的機器上 C:\Program Files\ ...
Java实现PDF打印的解决方案
1.Java Print Service Java Print Service是Java自带的打印框架,所在的包javax.print.PrintService;. 实现PDF打印的代码流程如下 // ...
分享一个VS写的PDF打印控件
控件CLSID A04AC669-CB70-4E8B-9CC0-9B73FC153784 功能描述自己写的一个控件,某人寿公司的需求,可惜最后没用到. 需求如下: 1.给你一个一个PDF文档,让你打 ...
《SpringBoot2.0 实战》系列-整合FlyingSaucer + thymeleaf 实现模板文件转pdf打印
前言最近,接到一个模板打印pdf的任务,后来网上找了很多案例,本文做下记录. 如何开始添加依赖包  <dependency><gr ...
WPSOffice双面文档打印边距设置技巧(转)
WPSOffice双面文档打印边距设置技巧(转) 通常我们在打印文档时,多数情况下都会把文档左侧的页边距设置的大一些,这样有利于我们进行装订.但是当进行双面打印时,左右页边距在纸张的两面正好相反,反而 ...
vue 项目中实现pdf预览 pdf打印 pdf下载
在Vue项目中实现PDF预览.打印和下载可以通过以下步骤来实现: 安装pdf.js pdf.js是一个JavaScript库,可以用于在Web上渲染PDF文件. 可以使用npm安装pdf.js,命令如 ...

chrome pdf 打印边距问题处理

需求

打印方式

知识科普

处理边距的问题

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

谷歌浏览器为例

打印效果

chrome pdf 打印边距问题处理相关推荐

最新文章

热门文章