使用jspdf将网页转化成pdf(解决滚动条以外变成黑色问题及缺少echarts图表问题)

案例

最近遇到一个这样的需求，前端需要将网页或者某个网页中的相关部分,生成pdf，在网上也找到了不少方法，但是拿来用了以后，不是pdf不全的问题，就是有黑色覆盖问题

比如含有黑色部分，页面看不到的滚动条下面就是黑色;

页面很全但是缺少echarts

最后，研究了很久，结合了两种不同的方法，成功将pdf导出。代码如下

首先需要引入相关js文件

<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<script src="https://cdn.bootcss.com/jspdf/1.3.4/jspdf.debug.js"></script>

function exportpdf() {var element = $("#content");    // 这个dom元素是要导出pdf的div容器var w = element.width();    // 获得该容器的宽var h = element.height();    // 获得该容器的高// element.css({//    "background-color": "white",//  "position": "absolute",//   "top": "0px",//     "z-index": "-1",//  "height": h,// });var offsetTop = element.offset().top;    // 获得该容器到文档顶部的距离var offsetLeft = element.offset().left;    // 获得该容器到文档最左的距离var canvas = document.createElement("canvas");var abs = 0;var win_i = $(window).width();    // 获得当前可视窗口的宽度（不包含滚动条）var win_o = window.innerWidth;    // 获得当前窗口的宽度（包含滚动条）if(win_o>win_i){abs = (win_o - win_i)/2;    // 获得滚动条长度的一半}canvas.width = w * 4;    // 将画布宽&&高放大4倍canvas.height = h * 4;var context = canvas.getContext("2d");context.scale(4, 4);context.translate(-offsetLeft-abs,-offsetTop);// 这里默认横向没有滚动条的情况，因为offset.left(),有无滚动条的时候存在差值，因此// translate的时候，要把这个差值去掉html2canvas(element, {allowTaint: true,taintTest: true,canvas: canvas,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;//页面偏移var position = 0;//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高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($("#title").text()+'.pdf');}});
}

生成pdf如下：

使用jspdf将网页转化成pdf(解决滚动条以外变成黑色问题及缺少echarts图表问题)相关推荐

带中文的网页下载为PDF格式的文件(jsPDF)
1.调研主要需要用到插件jsPDF,jsPDF可以将html下载为pdf格式的文件,但无法支持中文字形,下载带中文的网页会有乱码,经验证可以通过如下3种方案下载中文网页. 2.方案 2.1.方案一( ...
使用html2canvas和jspdf把网页保存pdf并下载
使用html2canvas和jspdf把网页保存pdf并下载直接上代码,先引入两个插件,jspdf放前面 <script src="/static/js/jspdf.debug.js ...
jspdf与zip.js结合。解决转pdf文件清晰度与文件过大的问题
jspdf与zip.js结合.解决转pdf文件过大的问题一.问题产生:使用jspdf转换html到pdf清晰度不够二.问题解决:在jspdf.debug.js源代码中下载部分集成zip.js 一. ...
CAD怎么转化成PDF？手机就可以轻松解决
相信小伙伴们平时在办公室可能会遇到文件格式转换的问题,因为有些文件适合编辑,但不适合发送.我们需要考虑接收文件的人是否能顺利打开文件.例如,CAD文件,如果我们将CAD文件转换为PDF格式,即使对方没 ...
vue 使用html2canvas和jspdf插件将网页保存为pdf
最近有如此需求,需要将页面部分内容保存为pdf文件,并下载.最终使用html2canvas和jspdf组合. 思路很简单,先用html2canvas将指定容器的html绘制成canvas,再用jspd ...
vuepdf转换html,Vue网页html转换PDF（最低兼容ie10）的思路详解
Vue网页html转换PDF(最低兼容ie10)的思路详解发布时间:2020-10-16 13:05:09 来源:脚本之家阅读:95 作者:冷藏封 HTML转PDF: 1.页面底层实现--Vue: ...
非常好的在网页中显示pdf的方法
今天有一需求,要在网页中显示pdf,于是立马开始搜索解决方案,无意中发现一个非常好的解决方法,详见http://blogs.adobe.com/pdfdevjunkie/web_designers_g ...
Python编程：使用wkhtmltopdf将html网页转成pdf文件
官网:https://wkhtmltopdf.org/ github: https://github.com/wkhtmltopdf/wkhtmltopdf Mac环境: brew install C ...
【python知识】win10下如何用python将网页转成pdf文件
一.说明本篇记录一个自己享用的简单工具.在大量阅读网上文章中,常常遇到一个专题对应多篇文章,用浏览器的收藏根本不够.能否见到一篇文章具有搜藏价值,就转到线下,以备日后慢慢消化吸收.这里终于找到一个办 ...

使用jspdf将网页转化成pdf(解决滚动条以外变成黑色问题及缺少echarts图表问题)

案例

使用jspdf将网页转化成pdf(解决滚动条以外变成黑色问题及缺少echarts图表问题)相关推荐

最新文章

热门文章