js实现pdf对页面的打印
//-------------------------------点击打印的图标---------------------------------
<div class="dcsc"><img src="${rootUrl }images/pdf-icon.png" id="file_pdf_kong" class="center-block img-responsive" title="下载PDF"></div>
//------------------------------要打印的内容-------------------------------
<div class="right-box" id="content_kong" >
</div>
//----------------------------------------------引用的js-----------------------------------------------
<script type="text/javascript" src="${rootUrl}js/jspdf/html2canvas.js"></script>
<script type="text/javascript" src="${rootUrl}js/jspdf/jsPdf.debug.js"></script>
<script type="text/javascript" src="${rootUrl}js/jspdf/bluebird.js"></script>
<script type="text/javascript">
$("#file_pdf_kong").click(function() {
$('#content_kong').animate({
scrollTop : 0
});
//var p = $(this).data("name");
// console.log(p);
setTimeout('downloadPdf()', 500);
});
function downloadPdf() {
var filename = "projectImages.pdf";
// 将 id 为 content_kong 的 div 渲染成 canvas
html2canvas(document.getElementById("content_kong"), {
// 渲染完成时调用,获得 canvas
onrendered : function(canvas) {
// 从 canvas 提取图片数据
var imgData = canvas.toDataURL('image/jpeg', 1);
var canWidth = canvas.width;
var canHeight = canvas.height;
//一页pdf显示html页面生成的canvas高度;
var pageHeight = canWidth / 592.28 * 841.89;
//未生成pdf的html页面高度
var leftHeight = canHeight;
//pdf页面偏移
var position = 0;
//a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
var imgWidth = 595.28;
var imgHeight = 592.28 / canWidth * canHeight;
//l:横向, p:纵向
// var doc = new jsPDF("p", "mm", "a4");
var doc = new jsPDF("p", "pt", "a4");
//var doc = new jsPDF('', 'in', [(canWidth+10)/dpiX,(canHeight+10)/dpiY]);//设置PDF宽高为要显示的元素的宽高,将像素转化为英寸
//doc.addImage(imgData, 'JPEG', 0, 0,0,0);
//doc.addImage(imgData, 'JPEG', 0, 0,dpiX,dpiY);
if (leftHeight < pageHeight) {
doc.addImage(imgData, 'JPEG', 0, 0, imgWidth, imgHeight);
} else {
while (leftHeight > 0) {
doc.addImage(pageData, 'JPEG', 0, position+0, imgWidth, imgHeight);
leftHeight -= pageHeight;
position -= 841.89;
//避免添加空白页
if (leftHeight > 0) {
doc.addPage();
};
};
}
doc.save(filename);
},
background : "#ffffff" //设置PDF背景色(默认透明,实际显示为黑色)
});
}
</script>
js实现pdf对页面的打印的更多相关文章
- JS - 使用 html2canvas 将页面转PDF
JS - 使用 html2canvas 将页面转PDF 本方法可以将页面元素块转为pdf. 网站地址 jspdf.js 官网地址:http://jspdf.com GitHub 主页:https:// ...
- js或jquery实现页面打印(局部打印)
首先定义css样式: 复制代码代码如下: @media print { .noprint { display: none;color:green } } 对于不想打印的内容只用在标签中加上 cla ...
- js或jquery实现页面打印可局部打印
方法一:直接用js的打印方法 <input id="btnPrint" type="button" value="打印" onclic ...
- 文档控件NTKO OFFICE 详细使用说明之预览PDF文件(禁止打印、下载、另存为、防抓包下载)
1.在线预览PDF文件(禁止打印.下载.复制.另存为) (1) 运行环境 ① 浏览器:支持IE7-IE11(平台版本还支持Chrome和Firefox) ② IE工具栏-Internet 选项:将ww ...
- js实现(可实现局部打印)
1.js实现(可实现局部打印) <input id="btnPrint" type="button" value="打印" oncli ...
- js导读,js引入,js选择器,事件,操作页面文档,计算后样式,数据类型
js导读 ''' js属于编写运行在浏览器上的脚本语言 js采用ECMAScript语法 操作BOM:浏览器对象模型 eg:浏览器上下滑动,浏览器历史记录 操作DOM:文档对象模型 ''' js引入 ...
- 利用js和CSS实现网页局部打印
1 局部打印方法: 作用:将id为dayin的内容,新建页面并打印,可解决打印某页面中的部分内容的问题.使用方法:将要打印的内容通过 <span id="dayin"> ...
- js和jquery实现页面滚动监听
js和jquery实现页面滚动监听 一.总结 一句话总结:onscroll方法和监听页面元素的高度都可以实现滚动监听. 1.onscroll方法实现滚动监听的核心代码是什么? <body ons ...
- Ajax获取接口数据,url拼接参数跳转页面,js获取上一级页面参数给本页面
1.Ajax获取接口数据 function demo(){ //假设请求参数 var requestBody = [{ "name":"zhang", &quo ...
随机推荐
- Could not instantiate bean class [org.springframework.data.domain.Pageable]: Specified class is an interface解决方案
原文:http://pimin.net/archives/432 环境:Eclipse LUNA.Spring 4.1.1.或Spring 4.3.3.Spring Data Elasticsearc ...
- 直接拿来用!最火的Android开源项目(二)
在<直接拿来用!最火的Android开源项目(一)>中,我们详细地介绍了GitHub上最受欢迎的TOP20 Android开源项目,引起了许多读者的热议,作为开发者,你最常用的是哪些开源项 ...
- oracle: 浅谈sqlnet.ora文件的作用,及SQLNET.AUTHENTICATION_SERVICES设置
关于sqlnet.ora的说明: *****************************************************FROM ORACLE11G DOCS*********** ...
- Ado.Net基础拾遗一:读取数据
从数据库中读取数据: 使用DataReader对象从数据库中读取数据 首先需要添加几个命名空间 //需要添加的命名空间 using System.Configuration; using System ...
- vue假全家桶升级方式,形成类似于小程序的路径管理(新增require-css与require-text)
1.路径布局大致就是这样,完全模拟小程序,主要是靠require来做到的 2.首先index.html是这样的(配置js和css没有用requireJs主要是方便而且载入什么组件比较清晰) <! ...
- Kubernetes Fluentd+Elasticsearch+Kibana统一日志管理平台搭建的填坑指南
在初步完成Kubernetes集群架构的建立后,通过搭建一些监控组件,我们已经能够实现 图形化的监控每个node,pod的状态信息和资源情况 通过scale进行replicateSet的扩展和伸缩 通 ...
- 【Todo】Nodejs学习计划
/Users/baidu/Documents/Data/Interview/Web-Server开发/深入浅出Node.js-f46c.pdf /Users/baidu/Documents/Data/ ...
- 怎样制作一个横版格斗过关游戏 Cocos2d-x 2.0.4
本文实践自 Allen Tan 的文章<How To Make A Side-Scrolling Beat 'Em Up Game Like Scott Pilgrim with Coco ...
- docker入门——简介
从这里起航 本系列有感于<第一本Docker书>,当我拿到这本书时感觉如获至宝. 为了培养自己对docker的兴趣,不断鞭策自己,我决定开始写这个系列的博客——<站在蓝鲸的背上思考& ...
- Alternating Least Squares(ASL) for Implicit Feedback Datasets的数学推导以及用Python实现
近期在看CF的相关论文,<Collaborative Filtering for Implicit Feedback Datasets>思想非常好,非常easy理解.可是从目标函数 是怎样 ...