zoukankan      html  css  js  c++  java
  • 使用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不打印的情况了。

  • 相关阅读:
    Vue CLI Plugin Electron Builder 打包出现空白问题
    git 不小心提交大文件出错问题
    electron-vue创建项目
    electron ico文件问题
    多尺寸ico图标制作工具GIMP
    ps ico图标制作插件
    fluent-ffmpeg
    CopyWebpackPlugin 拷贝某个文件夹的文件到某个文件夹
    electron-vue 目录有中文打包报错问题
    js 给控件新增class
  • 原文地址:https://www.cnblogs.com/Ivan-Wu/p/11316357.html
Copyright © 2011-2022 走看看