web前端|js教程
jspdf,生成pdf报表
web前端-js教程
由于前台html已经动态生成报表，而且，前台有一个功能，一个date range组件，当你拖动的时候，报表会在不提交到后台的情况下动态变化。
因此需要用到js生成生报表：
考试系统网站 源码下载,ubuntu 没有22端口,nodejs爬虫点总结,php中的运算符优先级什么意思,白银seo推广lzw
用到的组件：
php个人简单网页源码,vscode自动引入框架,ubuntu 睡眠模式,tomcat发布静态资源,sqlite屏显输出到文本,百度网盘图片爬虫,php 短网址源码,杭州seo优化营销方案,dz响应式网站,服装模板制作微信群lzw
jquery.jsjspdf.jscanvg.jshtml2canvas.jsjspdf.plugin.autotable.js
前台动态生成的chart现在一般是用的html5的canvas或者是svg,很不幸运，我遇到的是svg, 如果是flash没研究过。
怎么搭建一元云购网站源码,ubuntu 子系统 配色,python标准库爬虫,指数 php,seo超级社群lzw
由于报表还需要保持原html页面的外观，但是又不是整个html，真正需要转换成pdf报表的是：html+svg
前提：jsPDF 支持html，但支持不是很好，当你用一个html直接生成pdf的时候，其实他只保留了html里面文本，样式，结构都丢失了。
比如：table就丢失了。
jsPDF不支持svg导入。
思路：将svg转换成canvas，再将html+canvas转换成canvas，再使用html2canvas将canvas转换成图片，最后将图片写入pdf.
table的话就使用：jspdf.plugin.autotable.js
firefox: html2canvas不能直接将svg+html转换成canvas –> 先将svg元素转换成canvas –> html+canvas转换成canvas
chrome:html2canvas可以直接将svg+html转换成canvas
//将指定节点下面的所有svg转换成canvas//这里需要:canvg.jsfunction svg2canvas (targetElem) { var nodesToRecover = []; var nodesToRemove = []; var svgElem = targetElem.find(svg); svgElem.each(function(index, node) { var parentNode = node.parentNode; var svg = node.outerHTML; var canvas = document.createElement(canvas); canvg(canvas, svg); nodesToRecover.push({parent: parentNode,child: node }); parentNode.removeChild(node); nodesToRemove.push({parent: parentNode,child: canvas }); parentNode.appendChild(canvas); }); }
//这里是将html(文本)在一个iframe里面打开//主要是排除其它元素的干扰导致不成功，之前是一直输出不成功，所示才使用iframe//这段代码是官网抠下来的。//还有个问题就是：如果将页面的chart转换成canvas了，那web页面报表动态变化的功能将丢失。function openWithIframe(html){var iframe = document.createElement(iframe); iframe.setAttribute("id", "myFrmame"); var $iframe = $(iframe); $iframe.css({ visibility: hidden, position:static, z-index:4 }).width($(window).width()).height($(window).height()); $(ody).append(iframe);var ifDoc = iframe.contentWindow.document; //这里做是将报表使用到的css重新写入到iframe中，根据自身的需要 var style = ""; style+=""; style+=""; html = ""+style+""+html+"" ifDoc.open();ifDoc.write(html);ifDoc.close(); /* //这里做一些微调，根据自身的需要 var fbody = $iframe.contents().find("body"); fbody.find("#chart-center").removeAttr("width"); fbody.find(".page-container").css("width", "370px"); fbody.find(".center-container").css("width", "600px"); fbody.find("#severity-chart svg").attr("width", "370"); fbody.find("#status-chart svg").attr("width", "300"); */ return fbody;}
//导出pdffunction exportAsPDF(){ //得到要导出pdf的html根节点 var chartCenter = document.getElementById("chart-center").outerHTML; var fbody = openWithIframe(chartCenter); svg2canvas(fbody); //html2canvas官网的标准方法 html2canvas(fbody, { onrendered: function(canvas) {//var myImage = canvas.toDataURL("image/png");//alert(myImage);//window.open(myImage); /*canvas.toBlob(function(blob) { saveAs(blob, "report.jpg");}, "image/png");*/ //将图片转换成：base64编码的jpg图片。var imgData = canvas.toDataURL(image/jpeg);//alert(imgData); //l:横向， p：纵向var doc = new jsPDF(l, pt, a3);//var doc = new jsPDF(p, mm, [290, 210]);//var doc = new jsPDF();//默认是A4，由于我的报表比较大，所以专门设置了尺寸。doc.setFontSize(22);doc.setFontType("bolditalic");doc.text(500, 30, "Ticket Report"); //x:500, y:30 doc.addImage(imgData, jpeg, 10, 60); //写入位置：x:10, y:60 doc.addPage(); //新建一页 //这里就是把将table写入到pdf里面。var res = doc.autoTableHtmlToJson(document.getElementById("tickets-summary-table"), true);doc.autoTable(res.columns, res.data); doc.save( icket.report_+new Date().getTime()+.pdf);$(#myFrmame).remove(); //最后将iframe删除 }, background:"#fff", //这里给生成的图片默认背景，不然的话，如果你的html根节点没有设置背景的话，会用黑色填充。 allowTaint: true //避免一些不识别的图片干扰，默认为false，遇到不识别的图片干扰则会停止处理html2canvas }); };
以上所述就是本文的全部内容了，希望大家能够喜欢。
