js_网页导出pdf文件
打印当前页面,一开始我认为是需要输出pdf的,后来了解的需求是能够打印就可以了。需求既然都研究了,记录下。
更好的打印方式,window.print();会弹出打印对话框,打印的是window.document.body.innerHTML中的内容。
这个导出PDF的插件输出的内容是有点模糊。
引入脚本
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
js代码
var downPdf = document.getElementById("exportToPdf");
downPdf.onclick = function() {
html2canvas(
document.getElementById("export_content"), {
dpi: 172, //导出pdf清晰度
onrendered: function(canvas) {
var contentWidth = canvas.width;
var contentHeight = canvas.height; //一页pdf显示html页面生成的canvas高度;
var pageHeight = contentWidth / 592.28 * 841.89;
//未生成pdf的html页面高度
var leftHeight = contentHeight;
//pdf页面偏移
var position = 0;
//html页面生成的canvas在pdf中图片的宽高(a4纸的尺寸[595.28,841.89])
var imgWidth = 595.28;
var imgHeight = 592.28 / contentWidth * contentHeight; var pageData = canvas.toDataURL('image/jpeg', 1.0);
var pdf = new jsPDF('', 'pt', 'a4'); //有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
//当内容未超过pdf一页显示的范围,无需分页
if(leftHeight < pageHeight) {
pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
} else {
while(leftHeight > 0) {
pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
leftHeight -= pageHeight;
position -= 841.89;
//避免添加空白页
if(leftHeight > 0) {
pdf.addPage();
}
}
}
pdf.save('content.pdf');
},
//背景设为白色(默认为黑色)
background: "#fff"
})
}
js_网页导出pdf文件的更多相关文章
- 网页导出PDF文件
转自-----出道诗人 var downPdf = document.getElementById("exportToPdf"); downPdf.onclick = functi ...
- asp.net2.0导出pdf文件完美解决方案【转载】
asp.net2.0导出pdf文件完美解决方案 作者:清清月儿 PDF简介:PDF(Portable Document Format)文件格式是Adobe公司开发的电子文件格式.这种文件格式与操作系统 ...
- .Net导出pdf文件,C#实现pdf导出
最近碰见个需求需要实现导出pdf文件,上网查了下代码资料总结了以下代码.可以成功的实现导出pdf文件. 在编码前需要在网上下载个itextsharp.dll,此程序集是必备的.楼主下载的是5.0版本, ...
- 利用ITextSharp导出PDF文件
最近项目中需要到处PDF文件,最后上网搜索了一下,发现ITextSharp比较好用,所以做了一个例子: public string ExportPDF() { //ITextSharp Usage / ...
- 纯前端导出pdf文件
纯前端js导出pdf,已经用于生产环境. 工具: 1.html2canvas,一种让html转换为图片的工具. 2.pdfmake或者jspdf ,一种生成.编辑pdf,并且导出pdf的工具. pdf ...
- 史上最全的springboot导出pdf文件
最近项目有一个导出报表文件的需求,我脑中闪过第一念头就是导出pdf(产品经理没有硬性规定导出excel还是pdf文件),于是赶紧上网查看相关的资料,直到踩了无数的坑把功能做出来了才知道其实导出exce ...
- .Net导出pdf文件,C#实现pdf导出 转载 http://www.cnblogs.com/hmYao/p/5842958.html
导出pdf文件. 在编码前需要在网上下载个itextsharp.dll,此程序集是必备的.楼主下载的是5.0版本,之前下了个5.4的似乎不好用. 下载之后直接添加引用. <%@ Page Lan ...
- C# 利用ITextSharp导出PDF文件
最近项目中需要导出PDF文件,最后上网搜索了一下,发现ITextSharp比较好用,所以做了一个例子: public string ExportPDF() { //ITextSharp Usage / ...
- Java导出pdf文件数据
提示:导出pdf文件,需要3个jar包iText-2.1.5.jar,iTextAsian.jar,iText-rtf-2.1.4.jar. public boolean outputPdfJhsy( ...
随机推荐
- Hibernate 中 load() 方法导致的 noSession 异常
之所以要写这个,是因为最近碰到了一个延迟加载的 load() 导致出现 noSession 的异常. 下面第三种方式解决这个问题需要用到一个本地线程的对象,也就是 ThreadLocal 类,之前写过 ...
- bzoj4798[CEOI2015] Calvinball championship
这年头,n方跑1万的题已经不多了... 题意 bzoj4798 不知道怎么叙述这个题意... 分析 如果某个序列字典序小于给定的序列,我们不妨考虑从左到右第一个小于给定的序列的位置,并枚举这个位置的数 ...
- java中的error该不该捕获
写java程序时,通常会被提示捕获异常,而又有一些异常是不需要强制捕获的,这是一个被说烂了的话题.像我一样从其他语言转过来的人确实有点迷惑,那我以我的理解重新解释一遍吧. 异常的基类是Exceptio ...
- Appium与Robotium区别
Appium是基于UIAutomator框架实现的.Appium测试进程与目标应用进程是分开的,所以Appium不能直接访问目标应用的各种element属性进行copy&paste,而只能模拟 ...
- SQL注入漏洞知识总结
目录: 一.SQL注入漏洞介绍 二.修复建议 三.通用姿势 四.具体实例 五.各种绕过 一.SQL注入漏洞介绍: SQL注入攻击包括通过输入数据从客户端插入或“注入”SQL查询到应用程序.一个成功的S ...
- mysql互为主从复制配置笔记--未读,稍后学习
MySQL-master1:192.168.72.128 MySQL-master2:192.168.72.129 OS版本:CentOS 5.4MySQL版本:5.5.9(主从复制的master和s ...
- 【codechef】Children Trips
Portal -->CC_Children Trips Solution (英文题解看得真爽qwq不过写的好详细啊ovo) 首先这题有一个很重要的条件就是边权是\(1\)或者\(2\),所以虽然 ...
- HTML 页面源代码布局介绍
http://www.cnblogs.com/polk6/archive/2013/05/10/3071451.html 此介绍以google首页源代码截图为例: 从上到下依次介绍: 1.<!D ...
- FindBugs错误修改指南 【转】
FindBugs错误修改指南 1. EC_UNRELATED_TYPES Bug: Call to equals() comparing different types Pattern id: EC_ ...
- 虚拟机安装ubuntu14.04.5系统
参考教程 在vitualbox安装 ubuntu14.04.2 LTS教程 http://jingyan.baidu.com/article/46650658228345f549e5f8cc.html ...