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

时间:2023-03-09 02:51:27
使用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();

就搞定了。

打印效果图:

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

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

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

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

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