很久没有写前端的文章了,今天就来说说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不打印的情况了。

使用Js将页面打印或保存为Pdf的更多相关文章

  1. js调用页面打印

    ----------------------调用页面打印-------------------------------- <body> <div id="divPrint& ...

  2. JS实现页面打印

    [原文链接] 1.js实现(可实现局部打印) <input id="btnPrint" type="button" value="打印" ...

  3. 转: JS实现页面打印

    转载原文: http://shengren-wang.iteye.com/blog/1161367 1.js实现(可实现局部打印) <!--打印的实现1:start--> <inpu ...

  4. JS截取页面,并保存到本地

    想截取浏览器上内容,并做成图片保存到本地. 可以使用html2canvas.js进行操作. <!DOCTYPE html> <html lang="en"> ...

  5. android网页打印,安卓网页打印,h5页面打印,浏览器打印,js打印工具

    Android设备打印比较麻烦,一般设备厂商都提供原生app开发的SDK,我们web开发者为难了,不会原生开发啊 给大家提供一个思路,实现web加壳,利用打印浏览器实现 简单来说就是把我们的web页面 ...

  6. angular js 页面添加数据保存数据库

    一.编写实体类Controller层返回数据使用 package entity; import java.io.Serializable; public class Result implements ...

  7. JS控制页面内容

    JS操作页面内容 innerText:普通标签内容(自身文本与所有子标签文本)innerHTML:包含标签在内的内容(自身文本及子标签的所有)value:表单标签的内容outerHTML:包含自身标签 ...

  8. Jqprint实现页面打印

    好些项目需要实现页面打印,特别是一些后台管理类系统,下面介绍一款轻量级的打印插件: 1.实现页面打印要引入jQuery和Jqprint.点击下载Jqprint插件 <script languag ...

  9. 开源的javascript实现页面打印功能,兼容所有的浏览器(情况属实)

    这篇文章完全是属于技术文章,也是记录一下自己在项目当中遇到的坑爹问题啊,因为是B/S的程序,所以打印功能还是必须要有的,对于打印我选择了一个js插件,发现非常的简单和方便,所以这里拿出来和大家分享一下 ...

随机推荐

  1. 近年NOI题目总结

    NOI2015D1T1 题目大意:$T$ 组数据.在一个程序中有无数个变量 $x_i$.现在有 $n$ 条限制,形如 $x_i=x_j$ 或者 $x_i\ne x_j$.(对于每个限制 $i,j$ 给 ...

  2. ZROI 暑期高端峰会 A班 Day6 DP

    [THUPC2018]城市地铁规划 (日常讲题之前 YY--) 一眼出 \(O(n^3+nk)\) 做法. \(dp[i][j]\) 表示前 \(i\) 个点,前 \(i\) 个点度数和为 \(j\) ...

  3. React 获取真实Dom v8.6.2版本

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. shell 字符串拼接

    #!/bin/bash name="Shell" url="http://c.biancheng.net/shell/" str1=$name$url #中间不 ...

  5. 执行git log/status等命令时,重新打开了个窗口,必须按q才能退出

    终端运行: git config --global core.pager ''

  6. docker nginx-php容器镜像瘦身优化

    1. 在安装好php环境的容器,参考上面贴出的链接那篇文章的部分,做好基础工作: #创建工作目录 mkdir /rootfs #进入工作目录 cd /rootfs #创建基础目录 mkdir -p b ...

  7. Python【每日一问】26

    问: [基础题]:输入一行字符,分别统计出其中英文字母.空格.数字和其它字符的个数 [提高题]:一球从 100 米高度自由落下,每次落地后反跳回原高度的一半:再落下,求它在第 10 次落地时,共经过多 ...

  8. AQS2--出队

    队列不卡死,一定要:前面节点变成头结点唤醒时候能够唤醒后面节点,依次类推. 设置前面节点=-1就是为了前面节点走的时候,唤醒自己. 正常没有阻塞节点,设置前面=-1,再旋转一次尝试获取锁,才阻塞.即使 ...

  9. GIT 安装和使用

    目录 GIT 安装和使用 一.GIT 介绍 二.GIT 安装 三.GIT 使用 1. 配置 2. 创建版本库 3. 远程仓库 4. 分支管理 5.标签管理 6. 自定义 GIT 安装和使用 一.GIT ...

  10. [终极巨坑]golang+vue开发日记【一】,环境搭建篇

    写在前面 这个golang+vue大部分的内容是基于bydmm(橙卡)大佬的视频学来的,我在这里只是做一下个人开发的笔记,就是图一个乐,毕竟我只是个应届毕业生,如果真的要学请:bydmm的b站空间. ...