window.print打印pdf

1、前言

  前端打印pdf就是使用原生的window.print()方法实现，这里有几个问题你会遇到。

• 打印纸张大小，不同纸张大小，你需要相应调整表格宽度和最大分页高度
• 分页时机，不适当的话会导致表格跨页分断
• 背景色打印，这个是不能设置的，但是通过css属性可以实现
• 打印时的css设置

前端环境：vue+element ui

2、代码实例

3、代码解析

• 背景色打印

需要打印的内容包含在这个css属性里面的class即可

-webkit-print-color-adjust: exact;
-moz-print-color-adjust: exact;
-ms-print-color-adjust: exact;
print-color-adjust: exact;

• 打印时的css设置
  @media print{}这个css里面的属性会在打印时才会运行渲染

• 打印纸张大小

   @page {
        size: A3;
        margin: 0;
    }

在@page里面可以设置纸张大小，这里设置的是A3大小，至于宽高，网页打印的宽高好像是跟屏幕有关，这里设置宽1100px刚好更我屏幕打印时的宽度相当，每页高度这里选用1558px，高度好像相对稳定。

• 分页时机
  这里分页是根据你的控件高度计算而知的，当累计高度高于分页高度则将当前控件前插入分页符，设置方法如下：

item.style.pageBreakBefore = "always";

通过设置style为page-break-before:always实现
ps:网上全是page-break-after:always实现的，难道page-break-before不香么

• html结构
  1、这里是通过tableConfigList这个配置变量，控制两个大的div的id、class和table的宽度
  2、每个需要分页的控件都用class="thisPage"标记，便于查找
  3、绘制两次需要网页内容，一次是用于用户看的，一次是用于打印的隐藏内容，打印的时候，设置隐藏用户看的，显示打印的内容，实现直接打印，而不影响用于观感

• 解析saveAsPdf方法

 	saveAsPdf() {
                let commentReport = document.getElementById("comment_report");
                let printReport = document.getElementById("print_report");
                let toolBox = document.getElementById("toolBox")
                toolBox.className = "print_hide";
                commentReport.className = "print_hide";
                printReport.className = "print_content";

                let thisPage = printReport.querySelectorAll('.thisPage');
                let curHeight = 0;
                let a3PageHeight = 1558;
                for (let item of thisPage) {
                    let contentHeight = parseInt(window.getComputedStyle(item).height)
                    if ((curHeight + contentHeight) > a3PageHeight) {
                        console.log("a page")
                        item.style.pageBreakBefore = "always";
                        // 清空
                        curHeight = 0;
                    }
                    if(contentHeight {
                        window.print();
                        toolBox.className = "toolBox";
                        printReport.className = "comment_hide";
                    }, 1000
                )
            }

1、获取用于显示的report内容和用于打印的report内容
2、将toolBox、commentReport、printReport对应class的html元素，设置class为print时的才会渲染的class
3、控制page-break-before:always属性的设置，当加上当前元素，超过页高度，则当前元素设置style为page-break-before:always，提示print方法这里要分页
4、处理单页超过打印纸张大小问题，这里超过了，没有去处理，只处理了超过后下一个元素加上不超过纸张高度下，追加上下一个元素
5、最后要设置延时，不然会渲染不足。

demo地址:https://github.com/Hitvz/pdfoutput
参考博客：vue+element打印页面功能