前端window.print()导出PDF

导出PDF实现页头，页脚，页码，可实现水印

简单强大之处，根据前端HTML只需window.print()浏览器调用直接输出，解决了后端输出图片必须绝对链接的问题

只要你懂一点前端，就能轻松实现，对比目前后端输出PDF的功能非常复杂和维护成本极高

Demo实现功能

功能	支持
页头	是
页脚	是
页码	是
图片	是
超链接	是
自定义文件名	是
每页水印	是（可实现，demo未提供）

Demo实现效果截图

未导出前

导出预览

成品文件

由于不能上传文件，图片代替在这里插入图片描述，以下为每页输出的PDF

PS：由于没买WPS会员还给打了非会员水印，个人水印无法打印了

设计思路

1、主要页眉和页脚的开发比较难，需要在打印的时候去计算每页的高度和宽度，让其置顶和置于页脚
2、中间内容块需要根据实际样式稍作调整，每页根据页眉页脚进行间距（前提是页眉页脚高度必须固定），作者小鱼亲测100+页都不会有问题，能够正常按照要求输出PDF
3、以上版本为非完善版

附上核心代码：

$(document).ready(function() {
          function t() {
            var e = $(".header"); //获取页眉div的对象
            var h = e.offset().top + e.height(); //获取页脚偏移量加页脚高度的值
            //alert("头:" + e.height());
            //判断页脚div底部到页面顶端的实际距离是否小于页面可见区域高度
            if (h < document.body.clientHeight) {
              //当页面刚好可以包容所有内容不需要下拉时直接加上个定位就是了，当然这里也可以用绝对和相对属性
              //具体设置根据你实际情况来定吧
              $(".header").css({
                position: "fixed",
                right: "3%",
                top: "0px"
              });
              return;
            }
            function t2() {
              var a = $(document).scrollTop() + document.documentElement.clientHeight; //获取页面滑动偏移量加页面可见区域的高度
              //判断页脚div底部到页面顶端的实际距离是否小于页面滑动偏移量加页面可见区域高度
              if (a >= h) {
                //如果页面内容太多，需要下滑展示的时候，给页脚一个固定定位属性
                $(".header").css({
                  position: "fixed",
                  right: "3%",
                  top: "0px"
                });
              } else {
                //当页面重新上滑页脚需要被隐藏的时候移除它的定位属性，这样不论何时，它肯定是被页面撑起来固定到底部展示的。
                $(".header").removeAttr("style");
              }
            }
            t2();
            //在页面大小改变时触发方法t2
            $(document).resize(t2);
            //在页面滑动时触发方法t2
            $(document).scroll(t2);
          }

          function f() {
            var e = $(".footer"); //获取页脚div的对象
            var h = e.offset().top + e.height(); //获取页脚偏移量加页脚高度的值
            //alert("脚：" + e.height());
            //判断页脚div底部到页面顶端的实际距离是否小于页面可见区域高度
            if (h < document.body.clientHeight) {
              //当页面刚好可以包容所有内容不需要下拉时直接加上个定位就是了，当然这里也可以用绝对和相对属性
              //具体设置根据你实际情况来定吧
              $(".footer").css({
                position: "fixed",
                left: "0%",
                bottom: "0px"
              });
              return;
            }
            function f2() {
              var a = $(document).scrollTop() + document.documentElement.clientHeight - 50; //获取页面滑动偏移量加页面可见区域的高度
              //判断页脚div底部到页面顶端的实际距离是否小于页面滑动偏移量加页面可见区域高度
              if (a >= h) {
                //如果页面内容太多，需要下滑展示的时候，给页脚一个固定定位属性
                $(".footer").css({
                  position: "fixed",
                  left: "0%",
                  bottom: "0px"
                });
              } else {
                //当页面重新上滑页脚需要被隐藏的时候移除它的定位属性，这样不论何时，它肯定是被页面撑起来固定到底部展示的。
                $(".footer").removeAttr("style");
              }
            }
            f2();
            //在页面大小改变时触发方法t2
            $(document).resize(f2);
            //在页面滑动时触发方法t2
            $(document).scroll(f2);
          }
          //直接运行方法t
          t();
          f();
        });

总结，以上是作者网上经过综合多位技术大佬自己研究的纯前端导出PDF的代码，目前该功能在网上即使找破脑袋也未必找到完整的Demo。##### 真需要Demo的小伙伴们需要给3位数的打赏即可，后续可提供该功能技术指导，解决导出上的样式问题，非诚勿扰。联系方式邮箱在图片上