//-------------------------------点击打印的图标---------------------------------

<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对页面的打印的更多相关文章

  1. JS - 使用 html2canvas 将页面转PDF

    JS - 使用 html2canvas 将页面转PDF 本方法可以将页面元素块转为pdf. 网站地址 jspdf.js 官网地址:http://jspdf.com GitHub 主页:https:// ...

  2. js或jquery实现页面打印(局部打印)

    首先定义css样式:  复制代码代码如下: @media print { .noprint { display: none;color:green } }  对于不想打印的内容只用在标签中加上 cla ...

  3. js或jquery实现页面打印可局部打印

    方法一:直接用js的打印方法 <input id="btnPrint" type="button" value="打印" onclic ...

  4. 文档控件NTKO OFFICE 详细使用说明之预览PDF文件(禁止打印、下载、另存为、防抓包下载)

    1.在线预览PDF文件(禁止打印.下载.复制.另存为) (1) 运行环境 ① 浏览器:支持IE7-IE11(平台版本还支持Chrome和Firefox) ② IE工具栏-Internet 选项:将ww ...

  5. js实现(可实现局部打印)

    1.js实现(可实现局部打印) <input id="btnPrint" type="button" value="打印" oncli ...

  6. js导读,js引入,js选择器,事件,操作页面文档,计算后样式,数据类型

    js导读 ''' js属于编写运行在浏览器上的脚本语言 js采用ECMAScript语法 操作BOM:浏览器对象模型 eg:浏览器上下滑动,浏览器历史记录 操作DOM:文档对象模型 ''' js引入 ...

  7. 利用js和CSS实现网页局部打印

    1 局部打印方法: 作用:将id为dayin的内容,新建页面并打印,可解决打印某页面中的部分内容的问题.使用方法:将要打印的内容通过 <span id="dayin"> ...

  8. js和jquery实现页面滚动监听

    js和jquery实现页面滚动监听 一.总结 一句话总结:onscroll方法和监听页面元素的高度都可以实现滚动监听. 1.onscroll方法实现滚动监听的核心代码是什么? <body ons ...

  9. Ajax获取接口数据,url拼接参数跳转页面,js获取上一级页面参数给本页面

    1.Ajax获取接口数据 function demo(){ //假设请求参数 var requestBody = [{ "name":"zhang", &quo ...

随机推荐

  1. Windows 无法验证此设备所需的驱动程序的数字签名。某软件或硬件最近有所更改,可能安装了签名错误或损毁的文件,或者安装的文件可能是来路不明的恶意软件。(代码52)

    由未签名驱动导致的键鼠装无法使用的问题 usb 问题失效. 要是win 10的话  导致的结果就是 无线键鼠套装无法使用. 解决办法是 1.按下shift 按键 点击重启按钮 重启后 2.疑难解答-- ...

  2. Ubuntu安装“启动引导器”的设备选哪一项,选默认还是选/boot分区?

    如果你要用Ubuntu的引导器代替Windows的引导器,就选 /dev/sda. 如果你要保留Windows的引导器,就选 /boot分区,但这样一来,装完Ubuntu重启后,只能启动Windows ...

  3. 【js】js中const,var,let区别

    在node.js使用例子中,第一次看到const的声明,查询了一下,可以看得出来: http://www.cnblogs.com/ksl666/p/5944718.html 参考 主要内容是:js中三 ...

  4. pgmagick,pil不保存图片并且获取图片二进制数据记录

    PIL和pgmagick都是python中图像处理的库,只不过PIL功能更强大 pgmagick和PIL中对数据进行调整后经常需要调用write或者save方法保存图片,然后在读取图片的内容,这样很麻 ...

  5. D3.js系列——布局:打包图和地图

    一.打包图 打包图( Pack ),用于表示包含与被包含的关系,也可表示各对象的权重,通常用一圆套一圆来表示前者,用圆的大小来表示后者. 1.布局(数据转换) var pack = d3.layout ...

  6. CSS实现四种loading动画效果

    四种loading加载效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  7. JSP页面的基本结构 及声明变量

    一.JSP页面的基本结构 在传统的HTML页面文件里增加Java程序片和JSP标签就构成了一个JSP页面文件. 一个JSP页面可由5种元素组合而成: 1.普通的HTML标记符 2.Jsp标签.如指令标 ...

  8. list 组合,模糊查询llist 数据(不走数据库)

    @ResponseBody    @POST    @Path("/megerPerson/{realName}")    public ResultEntity partnerL ...

  9. Centos系统信息及日志

    1.确认内核版本: #uname -r #uname -a 2.确认发行版本: #cat /etc/redhat-release 3.查看系统载入的模块: #lsmod | grep XXX 载入一个 ...

  10. object hook实现禁止创建文件

    object hook实现禁止创建文件 原理不说了,大伙都懂得.. 要解决的问题: ,FILE_NON_DIRECTORY_FILE); if (!NT_SUCCESS(status)) { dpri ...