8 24 81

使用Js将页面打印或保存为Pdf

    很久没有写前端的文章了,今天就来说说js一个比较方便的功能,打印当前页面或保存成pdf吧。

js有一个原生的函数,print(),顾名思义就是打印。但是有时候我们需要打印页面某些部分,所以需要对页面进行处理一下:

可以写一个函数去封装:

 function preview() {
            body = window.document.body.innerHTML;
            startpoint= "<!--startpoint-->";
            endpoint= "<!--endpoint-->";
            printdb= body.substring(body.indexOf(startpoint) + 17); 
            printdb = printdb.substring(0, printdb.indexOf(endpoint));
            window.document.body.innerHTML = printdb ;
            window.print();
            window.document.body.innerHTML = body ;
    }

这里首先获取当前页面的innerHtml,然后设置想要页面开始的点,和结束的点,这样就可以匹配出我们想要打印的部分了,

接着我们需要把当前页面的innerhtml设置为打印的页面,然后打印,最后把页面设置会一开始的样子。

当然如果我们不需要打印部分页面的话直接:

 window.print();

就搞定了。

打印效果图:

 

不过这里的打印会出现我们input有值,但是打印的pdf中input没有值的情况:

所以我们需要将jq将input中的值循环赋值:

            var input = $('input');
            input.each(function () {
                $(this).attr("value", $(this).val());
            });

 这样就不会出现input不打印的情况了。

posted @ 2019-08-07 16:57  Ivan_Ivan  阅读(5091)  评论(3编辑  收藏  举报