一丶区域打印
将当前区域装载到一个容器 并将该容器绝对定位到左上角 进行打印操作
一般的打印工作 都能解决 但对表格有不好的兼容性 只会拿出表格内容
二丶转图片打印
通过html2canvas插件将局部转为图片 再通过printJs将图片调为打印操作
这个操作仅适用于内容不多的页面 耗时长 效果不佳
因为html2canvas 生成图片的时候 会处理样式
对没有固定值的元素特别不友好 阵型会乱 相比推荐第一种
三丶区域克隆打印
这个操作流程其实和第一种一样
但页面是重新生成的 相对第一种会更有可控性
毕竟打印的页面和原页面有一定出入
以下一般有插件实现 下面推荐几款
推荐vue-print-nb 和 printJs
统一的处理流程如下： 有兴趣可以去读下源码
第一步 生成html文档头
第二步 克隆 link标签 样式标签 自定义样式
第三步 克隆打印区域
第四步 生成iframe框架 并将生成的document添加进去
然后选择监听load事件 执行打印功能 最后当打印线程堵塞结束后执行移除操作
打印分析：
浏览器默认打印区域为整个页面
A4纸张的大小为 21m * 29.7cm 一英尺等于 2.54cm
系统获取页面时 会将整页内容在可控的情况下进行缩放
面对固定宽度时 会忽略超出的距离
面对自适应布局时 会可控的缩放距离 如 ：百分比 flex
A4的纸张是有默认大小的 即使网页会随着自适应布局缩放 但也会有不可控的因素
可求纸张在当前屏幕的大小 将打印内容进行适配
内容不足以填充全屏的 打印的区域大小要固定 内容区域采用自适应布局
内容足以填充全屏的 打印的区域不固定 内容区域采用自适应布局
求A4纸张的大小 可以通过电脑屏幕的英寸求出 屏幕的宽
比如 我的电脑16英寸 16:9 屏占比 公式如下
屏宽² + （屏高）² = （屏幕尺寸的面积）²
x²+(0.5625X)² = (408.94)²
x = 35.64
35.64 / 2.54 = 14.03
实际英寸也差不多 但是浏览器没有提供电脑的英寸大小相关参数
网上也有很多获取英寸的例子 例如 ： 利用1in获取当前屏幕1英寸的像素 但实际出入很大
我得到的是 96dpi 而我实际的dpi为 137dpi
通过计算得到合理的dpi就失败了
当采用计算获得的96dpi 在我1920 * 1080 的屏幕中 A4纸的大小为：
纵向（29.7 / 2.54）* 96 == 1122.24
横向（21 / 2.54）* 96 == 793.92
纵向打印 内容不足撑起页面时 可以将打印区域宽固定在 793.92
横向打印 内容超出当前页面时 可以将超出的元素 在 1122宽 的基础上进行zoom缩放
未缩放的内容 要保持在一个固定宽的容器内 不然其他内容会在内容不足的情况下占据更多的空间 因为你采用了自适应布局
打印功能Css作用：
【1】page-break-before（指定元素前添加分页符）
【2】page-break-after（指定元素后添加分页符）
【3】page-break-inside（用于设置是否在指定元素中插入分页符）
注意：
不能对绝对定位的元素使用以上三种分页属性。
请尽可能少地使用分页属性，并且避免在表格、浮动元素、带有边框的块元素中使用分页属性。
分页的表格可以使用分页符放到下一页，不然因为table头部样式多 造成分页表头样式杂乱。
【4】设置默认的打印方向 和 边距
@page{
size: portrait; /* 纵向 */
size: landscape;/* 横向 */
margin:1cm 2cm 1cm 2cm; * 边距 上右下左 */
}
【5】除去默认的页眉页脚
@mediaprint {
@page{
margin:0;
}
body{
margin:1cm;
}
}
【6】添加指定的页眉页脚
@page {
size: A4 portrait; /* */
margin: 3.7cm 2.6cm 3.5cm; /* 国家标准公文页边距 GB/T 9704-2012 */
@bottom-left, @bottom-center, @bottom-right { /* 页面内容区域底部添加一条 1px 的灰线 */
border-top: 1px solid gray;
}
@bottom-center { /* 页脚中间显示格式如 "第 3 页" 的页码 */
content: "第" counter(page) "页";
}
}
【7】伪类选择器
/* 通过分别设置左页和右页不同的左右页面距，为装订边留出更多的空间 */
@page :left {
margin-left: 2.5cm;
margin-right: 2.7cm;
}
@page :right {
margin-left: 2.7cm;
margin-right: 2.5cm;
}
还有以下伪类 ：
支持的有 :left、:right、:first、:blank
:left、:right：需要双面打印的时候，通常会用到，对左页和右页设置不同的样式（如页码）；
:first：用于匹配文档的第一页；
:blank：用于匹配文档的空白页；
注意⚠️：代码里面设置了左页和右页的不同样式，不代表用户代理那里就一定会进行双面打印；
注意⚠️：空白页既可以是左页也可以是右页，设置左页和右页的样式也会显示到空白页面上，如果不需要刻意清楚
综合解决问题：
table表格 长度超出打印区域
可以使用IE的css属性 zoom 对元素焦点进行缩放。
当然css也有缩放，但是属于画面上的缩放，体积不会变小。依然会占据原大小，实际效果不佳。
当表格超出时应该采用计算的形式将表格缩放至所在区域大小。计算公式为 区域大小 / 表格大小 。
区域的大小就是通过上面计算出的纸张的宽 针对不一样的纸张和方向开展计算
将得到的缩放值赋给 表格
在默认的打印范围缩放 打印的显示效果最佳
注：禁止直接搬运 请在有深入研究后借鉴
