使用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不打印的情况了。
使用Js将页面打印或保存为Pdf的更多相关文章
- js调用页面打印
		----------------------调用页面打印-------------------------------- <body> <div id="divPrint& ... 
- JS实现页面打印
		[原文链接] 1.js实现(可实现局部打印) <input id="btnPrint" type="button" value="打印" ... 
- 转: JS实现页面打印
		转载原文: http://shengren-wang.iteye.com/blog/1161367 1.js实现(可实现局部打印) <!--打印的实现1:start--> <inpu ... 
- JS截取页面,并保存到本地
		想截取浏览器上内容,并做成图片保存到本地. 可以使用html2canvas.js进行操作. <!DOCTYPE html> <html lang="en"> ... 
- android网页打印,安卓网页打印,h5页面打印,浏览器打印,js打印工具
		Android设备打印比较麻烦,一般设备厂商都提供原生app开发的SDK,我们web开发者为难了,不会原生开发啊 给大家提供一个思路,实现web加壳,利用打印浏览器实现 简单来说就是把我们的web页面 ... 
- angular js 页面添加数据保存数据库
		一.编写实体类Controller层返回数据使用 package entity; import java.io.Serializable; public class Result implements ... 
- JS控制页面内容
		JS操作页面内容 innerText:普通标签内容(自身文本与所有子标签文本)innerHTML:包含标签在内的内容(自身文本及子标签的所有)value:表单标签的内容outerHTML:包含自身标签 ... 
- Jqprint实现页面打印
		好些项目需要实现页面打印,特别是一些后台管理类系统,下面介绍一款轻量级的打印插件: 1.实现页面打印要引入jQuery和Jqprint.点击下载Jqprint插件 <script languag ... 
- 开源的javascript实现页面打印功能,兼容所有的浏览器(情况属实)
		这篇文章完全是属于技术文章,也是记录一下自己在项目当中遇到的坑爹问题啊,因为是B/S的程序,所以打印功能还是必须要有的,对于打印我选择了一个js插件,发现非常的简单和方便,所以这里拿出来和大家分享一下 ... 
随机推荐
- dos下编辑过sh脚本后无法运行
			情景: 同样的的脚本,在不同的机器下运行有的可以成功,有的运行失败, 前提:sh脚本windos下编辑过. 脚本在windows上修改之后,在每行尾部多了个 ^M,导致sh脚本在执行的时候可能shba ... 
- hibernate关联关系 (多对多)
			hibernate的多对多 hibernate可以直接映射多对多关联关系(看作两个一对多 多对多关系注意事项 一定要定义一个主控方 多对多删除 主控方直接删除 被控方先通过主控方解除多对多关系,再删 ... 
- [RN] 全国城市列表选择 (包含定位城市、热门城市、全国城市)
			全国城市列表选择 (包含定位城市.热门城市.全国城市) 用ScrollView 实现,解决 SectionList 实现的卡顿问题 实现效果如图: 代码实现如图: 主逻辑文件 cityList.js ... 
- day 14
			Sow an act, and you reap a habit. Sow a habit, and you reap a character. Sow a character, and you re ... 
- fping 命令说明
			参数: -a 表示只在输出报告⾥列出当前存活的IP -d 解析主机名 -f 参数表示读⼊这个文件 -s 显示汇总信息 -g 指定⽹网段 
- Lab7:同步互斥
			并发进程的正确性 独立进程 不和其他进程共享资源或状态 确定性 -> 输入状态决定结果 可重现 -> 能够重现起始条件 调度顺序不重要 并发进程 在多个进程间有资源共享 不确定性 不可重现 ... 
- 依赖注入之unity(winform方式)
			依赖注入之unity(winform方式) 要讲unity就必须先了解DI和IOC及DIP,如下链接提供DI和IOC的基础:https://www.cnblogs.com/zlp520/p/12015 ... 
- 笔记:Map(就是用来Ctrl+C,V的)
			JDK1.8:List -> Map: 1,Map<String, String> maps = userList.stream().collect(Collectors.toMap ... 
- 25个led灯新玩法
			Microbit板子的25个led灯,是5X5的阵列,led(lights emitting diodes)中文叫发光二极管,有单向导电性,还发光,有各种颜色的,红,蓝,黄等等.mPython可以让你 ... 
- [转帖]图解分布式一致性协议Paxos
			图解分布式一致性协议Paxos https://www.cnblogs.com/hugb/p/8955505.html Paxos协议/算法是分布式系统中比较重要的协议,它有多重要呢? <分 ... 
