制作pdf

╰+攻爆jí腚メ 2022-03-27 07:38 212阅读 0赞

1、引入html2canvas.js

2、html，用id为pdf包含要下载的区域

<div style="width:100%;height:auto" id="pdf">
        <div>要下载的区域</div>
    </div>

3、js，点击按钮触发Easyuisave()事件

$("#submit",parent.document).on("click",function(){//下载图片pdf
            		if($("#ff").form("validate")){
        				Easyuisave({
        					elem:$("#ff").serialize(),
        				});//调用子页面方法
        				top.layer.closeAll();//关闭弹窗
        				return false;
        			}else{
        				msg({
        					layer:layer,
        					title:"请完善表格内容！"
        				});
        			}
            	});

4、封装Easyuisave()事件

function Easyuisave(obj){//submit
    	$("#edit").click();
    	html2canvas(document.getElementById("box"), {
    		height:document.getElementById("pdf").offsetHeight+60,
               	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;
                   //pdf页面偏移
                   var position = 10;
                   //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', ["612.28",imgHeight]);
                   //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
                   //当内容未超过pdf一页显示的范围，无需分页
                   //if (leftHeight < pageHeight) {
                       pdf.addImage(pageData, 'JPEG',10, 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("电气运行报告"+".pdf");
               }
           })
    	
    }

注意：如果有滚动条，可能会下载不全，需要用锚点定位到页面顶部

发表评论取消回复

表情：

评论列表（有 0 条评论，212人围观）

还没有评论，来说两句吧...

相关阅读

相关 python爬取CSDN博客文章并制作成PDF文件

前言本文的文字及图片来源于网络,仅供学习、交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理。 PS：如有需要Python学习资料的小伙伴可以加点击下方链接

╰+哭是因爲堅強的太久メ/ 2022年12月08日 04:21/ 0 赞/ 212 阅读

相关如何制作pdf文件_如何修改pdf文件，pdf文件怎么进行编辑？

经常使用计算机办公的人对pdf肯定不陌生，办公时常常需要用到它，多掌握一些pdf技能可以有效提升办公效率，话不多说，马上来看看吧！ 1 横版的PDF文件怎么调整为竖版？

客官°小女子只卖身不卖艺/ 2022年10月24日 02:18/ 0 赞/ 311 阅读

相关 odoo8-qweb report 制作pdf报表方法介绍

首先推荐一个qweb制作report的视频，比较直观。 [http://v.youku.com/v\_show/id\_XMTI4OTU0MDQwOA==.html?from

向右看齐/ 2022年08月05日 08:58/ 0 赞/ 182 阅读

相关用C#制作PDF文件全攻略 .

前言 [http://blog.csdn.net/gatr/article/details/278173][http_blog.csdn.net_gatr_articl

痛定思痛。/ 2022年06月18日 06:28/ 0 赞/ 169 阅读

相关 java完整的利用itext5制作pdf、二维码图片插入pdf，并解析pdf中的二维码信息

利用itext5、zxing、QRCore制作pdf、二维码图片插入pdf，并解析pdf中的二维码信息，手机可以实现扫描获取二维码的信息，并进行验证你的解析是否正确。先是生

缺乏、安全感/ 2022年06月08日 00:58/ 0 赞/ 188 阅读

相关 Java——pdf首页转图片制作缩略图

public static final String FILETYPE_JPG = "jpg"; / 将指定pdf文件的首页转换为指定路径的

缺乏、安全感/ 2022年05月13日 11:22/ 0 赞/ 257 阅读

相关网页制作pdf

前言沉迷农药，抖音，总归是不好的。在要吃苦的年纪里选择安逸，那么老了一定会后悔，埋怨年轻的时候不知道努力的自己。于是又找出了尘封已久的kindle，打算好好看看书，给自

朴灿烈づ我的快乐病毒、/ 2022年05月11日 07:24/ 0 赞/ 265 阅读

相关 iText 制作PDF

前言由于在MVC项目中需要使用PDF，所以自己抽空也来看看itext，以便于丰富自己的知识吧。在此也简单的记录一下，说不定以后可能还用的到。在此您可以下载你想使用的版本

秒速五厘米/ 2022年04月10日 09:25/ 0 赞/ 296 阅读

相关制作pdf

1、引入html2canvas.js 2、html，用id为pdf包含要下载的区域 <div style="width:100%;height:auto" id="

╰+攻爆jí腚メ/ 2022年03月27日 07:38/ 0 赞/ 213 阅读

相关 Java制作PDF转图片小工具

背景： > 前几日一位朋友突然找我帮忙将PDF转换成图片，我仗义相助，建议他使用福昕阅读器，然而他说转换需要VIP会员，老贵了。我花了半天时间寻找免费会员，结果不出所料没有找

红太狼/ 2022年02月15日 06:15/ 0 赞/ 388 阅读