首页 / JQUERY / 使用jspdf生成pdf报表_jquery

使用jspdf生成pdf报表_jquery

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了使用jspdf生成pdf报表_jquery，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3907字，纯文字阅读大概需要6分钟。

内容图文

由于前台html已经动态生成报表，而且，前台有一个功能，一个date range组件，当你拖动的时候，报表会在不提交到后台的情况下动态变化。
因此需要用到js生成生报表：

用到的组件：

jquery.js
jspdf.js
canvg.js
html2canvas.js
jspdf.plugin.autotable.js

前台动态生成的chart现在一般是用的html5的canvas或者是svg,很不幸运，我遇到的是svg, 如果是flash没研究过。

由于报表还需要保持原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

输出不成功，所示才使用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()); $('body').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; }

以上所述就是本文的全部内容了，希望大家能够喜欢。

内容总结

以上是互联网集市为您收集整理的使用jspdf生成pdf报表_jquery全部内容，希望文章能够帮你解决使用jspdf生成pdf报表_jquery所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/326103.html

来源：【匿名】