html2canvas+jsPDF实现横向打印iframe中的内容

需要用到的插件：html2canvas jsPDF.debug.js jquery

html2canvas github地址：https://github.com/niklasvh/html2canvas

jsPDF和html2canvas插件已上传到我的阿里云网盘（需要自取），地址：

https://www.aliyundrive.com/s/auACtPpkw4w

效果预览

html2暂时不支持IE内核浏览器

//判断浏览器内核是否是IE
if(!!window.ActiveXObject || "ActiveXObject" in window){alert('截图打印暂不支持IE内核浏览器，请更换火狐或谷歌chrome内核浏览器，360等双核浏览器请切换至极速模式');return;
}
//获取iframe
var shareContent = document.getElementById('form_iframe');
//滚动iframe到顶部,如果不在顶部会截不完整
shareContent.contentWindow.scrollTo(0,0);
//获取iframe的宽高
var width = shareContent.contentWindow.document.documentElement.scrollWidth;
var height = shareContent.contentWindow.document.documentElement.scrollHeight;
var canvas = document.createElement("canvas"); //创建一个canvas节点
//定义任意放大倍数 支持小数,表单内容过多，请尽量往小了调。目前测试，打印3页chrome下会出现崩溃
var scale = 1.5;
canvas.width = width * scale; //定义canvas 宽度 * 缩放
canvas.height = height * scale ; //定义canvas高度 *缩放
canvas.style.width = width * scale + "px";
canvas.style.height = height * scale + "px";
var content = canvas.getContext("2d");
content.scale(scale,scale);
//配置canvas参数var newOptions = {scale:scale,canvas : canvas,background:"#ffffff",//设置背景色，避免打印iframe出现黑底width: width,height: height,};

接着开始执行html2canvas截图以及生成pdf

//获取iframe Body
var frameBody = $('#form_iframe').contents().find('body');
html2canvas(frameBody, newOptions).then(function (canvas) {//获取canvas画布的宽高var contentWidth = canvas.width;var contentHeight = canvas.height;//一页pdf显示html页面生成的canvas高度;var pageHeight = contentWidth /841.89  * 592.28;//未生成pdf的html页面高度var leftHeight = contentHeight;//页面偏移var position = 0;//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高var imgWidth = 841.89;var imgHeight = 841.89/contentWidth * contentHeight;var pageData = canvas.toDataURL();var pdf = new jsPDF('l', '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 -= 592.28;//避免添加空白页if(leftHeight > 0) {pdf.addPage();}}}pdf.save("content.pdf");
});

html2canvas+jsPDF实现横向打印iframe中的内容相关推荐

Android开发，使用Log打印日志，打印相同内容在Logcat中只能连续显示两次(遍历打印List中的内容，打印结果条数比List的size小)。
这个问题也不算什么有技术含量的问题,不过我感觉还是有必要写篇博客记录,以免有人遇到和我一样的困扰,也是因为在网上搜索发现,没有多少文章说明这个如题的原因,可能是大多都没经历过这个问题,或者是感觉不值得 ...
window.print()打印网页中指定内容的实现方法
一般直接使用window.print();是直接打印了整个页面,但只打印其中的一部分时就需要一些方法了 1.在页面的代码头部处加入JavaScript: <script language=jav ...
利用webBrowser获取页面iframe中的内容
1.获取frame的document HtmlDocument htmlDoc = webBrowser1.Document; htmlDoc = webBrowser1.Document.Win ...
window.print()打印网页中指定内容
<!DOCTYPE html> <html><head><meta charset=" utf-8"><meta name=& ...
html2canvas + jspdf 实现 html导出pdf
html2canvas + jspdf 实现 html导出pdf 1.下载插件 npm install html2canvas jspdf --save 2.utils中创建htmlToPdf.js文 ...
在IFrame中查找IFRAME中的元素的方式
下面是内部iframe找外部mainFrame的情况 var websiteSearchButton = window.parent.parent.document.getElementById('m ...
python爬取网易云音乐飙升榜音乐_python爬取网易云音乐热歌榜单（获取iframe中数据，src为空）...
一.分析思路网易云音乐热歌榜的页面采用嵌入内联框架的方式,若爬虫直接从官网入口进入访问热歌榜 http://music.163.com/#/discover/toplist?id=3778678,是 ...
IE下访问iframe中页面出现SCRIPT5: 拒绝访问
问题描述在同一域下,因在父页面上设置了document.domain,而导致无法正常和Iframe(也是同域下)进行通信,IE下抛出的错误是:SCRIPT5:拒绝访问,导致无法操作iframe中的内 ...
C语言练习之交换两个数组中的内容
目录前言一.思路二.源代码以及运行截图源代码: 运行截图: 总结前言学习了数组的一些基本知识,因此进行这个练习,现在将我的思路和代码分享出来. 将数组A中的内容和数组B中的内容进行交换.( ...

html2canvas+jsPDF实现横向打印iframe中的内容

html2canvas+jsPDF实现横向打印iframe中的内容相关推荐

最新文章

热门文章