运用html2canvas 生成图片 然后 生成PDF chrome页面中图片在PDF中无法显示

问题:
运用html2canvas 生成图片 然后 生成PDF chrome页面中图片在PDF中无法显示
工具:html2canvas.js、jsPdf.debug.js

代码:
var downPdf = document.getElementById("renderPdf");//获取按钮元素

  downPdf.onclick = function() {

      html2canvas(document.body, {
          onrendered:function(canvas) {
          setTimeout(function(){
              var contentWidth = canvas.width;
              var contentHeight = canvas.height;

              //一页pdf显示html页面生成的canvas高度;
              var pageHeight = contentWidth / 595.28 * 841.89;
              //未生成pdf的html页面高度
              var leftHeight = contentHeight;
              //pdf页面偏移
              var position = 0;
              //a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
              var imgWidth = 555.28;
              var imgHeight = 555.28/contentWidth * contentHeight;

              var pageData = canvas.toDataURL('image/jpeg', 1.0);
             var triggerDownload = $("#downPng").attr("href", pageData).attr("download", "order-1111111111.jpg");
              var pdf = new jsPDF('', 'pt', 'a4');
              //有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
              //当内容未超过pdf一页显示的范围,无需分页
              if (leftHeight < pageHeight) {
                  pdf.addImage(pageData, 'JPEG', 20, 0, imgWidth, imgHeight );
              } else {
                  while(leftHeight > 0) {
                      pdf.addImage(pageData, 'JPEG', 20, position, imgWidth, imgHeight)
                      leftHeight -= pageHeight;
                      position -= 841.89;
                      //避免添加空白页
                      if(leftHeight > 0) {
                          pdf.addPage();
                      }
                  }
              }

              pdf.save('content.pdf');
               },5000)
          }
      })



  }

        求各位大神帮助!!!

1个回答

你是不是没有把这个放到$(function(){})里面 ,时间都没触发

weixin_42444664
weixin_42444664 回复yangwenxin_1: 遇到了同样的问题,多张图片只显示了前面的部分,请问楼主怎么解决的
23 天之前 回复
yangwenxin_1
yangwenxin_1 PDF生成了,只是html页面中有图片的地方在PDF中是空白的
5 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
node.js运用Phantom.js爬取页面生成pdf
工具是webstorm,按照下图引进phantom模块,其他开发工具请自行百度其他方法引入。注意:当后台放在Linux下,Linux需要安装有相应的字体,否则中文打印生成pdf代码: function test(){ var phantom = require('phantom');//需要引入phantom模块 const path = require(&quot;p...
html2canvas生成图片案例
html2canvas生成图片案例,如不想下载可查看本人博客 https://blog.csdn.net/dream0129/article/details/86983023
html2canvas插件生成图片
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术:VS、jQuery 作者:#33 撰写时间:撰写时间:2019年06月17日 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~...
前端页面使用html2canvas生成图片
最近小编一直被这个问题困扰着,公司项目需求:公众号长按图片保存到手机,但是页面上相关内容都是图片和文字(前后端都有)组成,于是乎我到网上各种找办法,最后锁定了这个html2canvas前端生成图片(canvas画布)的方法,但是问题随之而来,网上各种大佬的代码不是少这就是少那,对于刚入行半年的萌新来说有的根本看不懂,但是皇天不负有心人最后我终于找到了一篇代码解决了这个事情,接下来把代码放上来~ ...
用html2canvas生成pdf 图片模糊
为了找这个,我费了好大的劲。好了,不多说,开始。 想法:我的想法和网上的一样。先把canvas放大,再缩小。 使用vue的时候,先引入html2canvas.js(不知道为什么我的在本地引入就不管用了,只能在网上引用,这个链接搜cdn很管用:https://www.bootcdn.cn/all/) 直接看例子吧,应该能看懂 我也不知道为什么,在电脑上分的不是特...
使用html2canvas对当前页面进行生成图片
1.需要导入jquery2.导入(html2canvas.min.js)代码如下:function down(){ //l:横向, p:纵向; 单位: in:英寸,mm毫米;px:像素; 画布大小:默认是A4纸大小 // var pdf = new jsPDF('p', 'mm', [230, 250]); //230 x 250 html2canvas($("#exam
Echarts3之html2canvas下载图表(后续生成PDF)
Echarts提供了下载图表的功能,但是仅仅满足客户端下载到本地,不经过项目本身的后台,对于高度自定义是不能满足的。 首先页面引入html2canvas插件。<script src="//cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>然后引入Echarts。对应自己的echarts.js路径<script src=
使用 html2canvas 生成 分页的PDF(直接用)
直接上代码 &amp;lt;!DOCTYPE&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;gt; html2canvas example &amp;lt;/title&amp;gt; &amp;lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot;&am
html2canvas生成pdf(html高度自适应带iframe)
使用html2canvas及jspdf 将带iframe的页面保存成pdf,解决有滚动时不能全部截取的问题及转换过程中背景黑色的问题
生成图片插件 -> html2canvas
最近做h5项目好多都需要用到将页面生成图片,可长按保存,实现这个功能用到一个插件html2canvas.js。 项目中引用该插件,在js中编写如下代码: html2canvas($(&quot;.p3&quot;).get(0)).then(canvas =&amp;gt; { //执行拍照 //document.body.appendChild(canvas); // 图片导出为 png 格式...
TextView中图片在任意位置显示
tv.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { Drawable img = getResources().getDrawable(R.drawable.radar_imgpress);//获取图片到Drawable img.setBounds(0, 0, img
jasperreport 在servlet中生成pdf,页面无法显示,提示找不到服务器
代码如下:rn Map parameters = new HashMap();rn byte[] bytes = JasperRunManager.runReportToPdf(reportFile.getPath(),rn parameters, [color=#FF0000]ds[/color]);rn response.setContentType("application/pdf");rn response.setContentLength(bytes.length);rn ServletOutputStream ouputStream = response.getOutputStream();rn ouputStream.write(bytes, 0, bytes.length);rn ouputStream.flush();rn ouputStream.close();rn其中ds是用JRResultSetDataSource包装的查询出来的结果集,有数据,我用JRViewer.viewReport()rn查看过。rn现在情况是我用上面的代码生成pdf,出现无法显示网页,页面title找不到服务器。
asp.net中图片在aql中的存储和读取
绝对有用的,asp.net中图片在aql中的存储和读取,动态的
页面生成pdf
html工具类
asp.net 页面生成pdf
打开的一个页面.aspx的rn然后点击一个按钮.rn将这个页面的某个div内容生成pdf.rn请问这个怎么做.rn
TCPDF页面生成PDF
PHP代码实现网页转为PDF,可添加新字体,支持图片、背景图、简单的css,包含ttf2ufm.exe和php.exe文件
html2canvas生成图片模糊的解题思路
html2canvas生成图片模糊的解题思路前几天,以前的同事问我这个问题,由于这几年很少写前端,所以只给了大概的思路,现在分享一下: 看看库是否有设置生成图片精度的设置 生成高分辨率的图片,压缩显示 有没有最新版本的库可以使用 说说这个问题的如何给出思路: 图片模糊,属于种普遍的问题,作者应该能想到这个问题,所以是不是有可以设置的精度的参数 以前做前端的时候图片出现模糊的情况,可以用大图压缩显示
html2canvas生成图片并上传后台
$(document).click(function(){ html2canvas(document.getElementById("canva")).then(function(canvas) { document.body.appendChild(canvas); var blob = getBlob(canvas); var fd=new...
html2canvas生成图片时踩到的坑
html2canvas生成图片时踩到的坑 html2canvas ,是H5生成图片常用的框架,但是由于以前没有用过踩到了N多的坑,现在写下来好让自己以后再用时能注意这些问题; vue 工程下安装html2canvas npm install html2canvas npm 安装后需要在使用界面引入 import html2canvas from 'html2canvas' html2...
html2canvas生成图片并下载到本地
html2canvas生成图片并下载到本地 欢迎使用Markdown编辑器 你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客...
根据PDF生成图片
根据PDF的页数生成相应张数的图片,亲测有用,分享给大家,内附完整代码
PDF生成图片转
PDF生成图片转换
Java将PDF生成图片
Java将PDF生成图片,想向这方面了解的可以下载看看
java 将pdf生成图片。
rnrn现在在做pdf生成图片,生成出来发现图片太大,每一个都在200K以上,怎样做才能将图片大小更改,或有什么更好一点的解决办法。。rnrn请各位大虾指点。。。。
X5045芯片在单片机系统中的应用.pdf
X5045芯片在单片机系统中的应用.pdf
html导出pdf(html2canvas,jspdf.debug)
html2canvas,jspdf.debug俩个js文件,还有个小例子,例子有瑕疵,大概功能能实现,在优化吧,
可以提取pdf中图的软件
可以从PDF中提取图
数据库中图片在网页上显示问题
<%@ page contentType="text/html; charset=GB2312"%>rn<%@ include file="Connection/Connection.jsp"%>rn<%Statement statement=con.createStatement();rnString query = "Select aa01a58 from AA01 where aa01a06='谢振明'";rnResultSet result=statement.executeQuery(query);rnBufferedInputStream gifData=null;rnint i; rn if(result.next())rn rnbyte [] blocco = result.getBytes("aa01a58");rnresponse.setContentType("image/jpeg");rnServletOutputStream op = response.getOutputStream();rnfor(int i=0;irnrn以上代码运行有错,并且请问各位怎样将读出的ServletOutputStream流再写入图片文件,并且保存在服务端
导出页面生成PDF解决方案
用户访问JSP页面,服务器返回结果到浏览器,如何实现导出当前页面生成PDF文件?有哪位做过吗?rn  
JAVAj将页面生成PDF
JAVAj将页面生成PDF
页面在服务器端生成pdf和word
服务器端一页面有如下内容:rn1。顶部区域rn2。表格区域rn3。底部区域rnrn其中1和3是用户在编辑器里面自定义的内容,含大量自定义样式(不含图片)rnrnrn如果单独导出表格部分用itextsharp.dll 即可实现导出为pdf,关键问题是 顶部和底部怎么弄进去呢,那可是html串阿rnrn导出为word也存在同样问题,我可以利用office组件在服务器端生成表格部分,但客户自定义部分怎么办?rnrn我本有一个想法是在服务器端将该页面生成为一个图片,然后再利用组件插入word或pdf文档,但似乎生成图片也没有很好的解决办法;我又想到了水晶报表,虽然可以导出很多格式的文件,但存在授权和并发数问题,在加上客户不让用它,就放弃了。。。郁闷至极rnrn各位高手们帮帮忙啊!!rnrn
php 验证码生成图片无法显示
[code=php][/code]rnrn会生成一个长:210像素,高:47像素的图片大小,背景是灰色,显示7个随机字母或数,随机的蓝色或红色,rn一般情况下是正常的,但偶尔会出现,刷新后,只有一个210 * 47 的图片,里面是个红叉,就是那种图片不存在里显示的图标,但再刷新又没了,偶尔刷新又出现这情况,rnrn不知道调试方法和原因所在。求高人指教。
微信H5页面用Html2canvas生成图片的几种方式
Demo:仅供参考,实际业务场景请根据自己的需求修改(本案例提供的是思路和实现方式) &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;Demo&amp;lt;/title&amp;gt; &amp;lt;link rel=&quot;styleshee
导航栏的背景图片在火狐下无法显示
导航栏的背景图片在火狐下无法显示,但在IE6下可以正常显示出来,这是什么啊。。rn以下是我的CSS原码:rn[code=CSS]rnrn#ejcd rn LINE-HEIGHT: 25px;rn WIDTH: 988px;rn FLOAT: left;rn HEIGHT: 25px;rn FONT-SIZE: 12px;rn margin:0px;rn padding:0px;rn overflow:hidden;rn rnrn#ejcd ulrn list-style-type:none;rn WIDTH: 988px;rn background:url(../imgc/top/fl.jpg) no-repeat;rn margin-bottom:-3px;rnrn#ejcd ul lirn float:left;rn padding:3px 2px;rn rnrn#ejcd A:link rn FONT-FAMILY: "宋体"; COLOR: #000; FONT-SIZE: 12px; TEXT-DECORATION: nonernrn#ejcd A:visited rn FONT-FAMILY: "宋体"; COLOR: #000; FONT-SIZE: 12px; TEXT-DECORATION: nonernrn#ejcd A:hover rn LINE-HEIGHT: 25px; FONT-FAMILY: "宋体"; HEIGHT: 25px; COLOR: #bd5f00; FONT-SIZE: 12px; TEXT-DECORATION: nonernrnrn[/code]rn其中#ejcd主是导航的ID。。还请高手指点为什么会这样。。
jquery幻灯片在chrome下的问题!!
在用缩略图的时候,如果把缩略图定位在幻灯片图片的上面,在chrome的fadeIn和fadeOut效果就会出现卡屏,换成animate的动画也会出现卡动,求问这是为什么,有解决的方法不?
利用JavaScript将页面截图生成图片传给后台的插件:html2canvas
html2canvas是将html代码转换成为图片的插件,本主亲测,觉得效果不错,其官网为:http://html2canvas.hertzen.com/ 第一步:将html转化成canvas 第一步很简单,只要传入一个元素即可,如: html2canvas(document.body).then(function(canvas) { do...
Chrome扩展及应用开发.pdf
Chrome扩展及应用开发,Chrome官方开发文档 和W3C标准
PDF 生成图片在web上显示
加载硬盘PDF文件将PDF每页生成图片(bmp,jgp等 可自选)。代码写好直接下载就可运行,发布后有我写的加载图片的样式 你也可以试试。注意web.config注释 发布后应用程序池用4.0的经典 否则报错 别问我原因
pdf阅读器。chrome版本
这是chrome的插件,一般加密的datasheet pdf不能复制,但是我发现这个可以,所以共享
Chrome 扩展插件开发 pdf
适合浏览器插件开发入门。。。。。。。。。。。。。。。。。。。
相关热词 c#入门推荐书 c# 解码海康数据流 c# xml的遍历循环 c# 取 查看源码没有的 c#解决高并发 委托 c#日期转化为字符串 c# 显示问号 c# 字典对象池 c#5.0 安装程序 c# 分页算法