document.getElementById("exportSiteInfoTemp").onclick = function() {
var thisMinheight=$("#viewSiteInfoTempContent")[0].clientHeight+10000;
$("#viewSiteInfoTempModalEx").html($("#viewSiteInfoTempContent").html()).css({"display":"block","height":(thisMinheight)+"px"}); //
html2canvas($('#viewSiteInfoTempContent'), {
background:"#ffffff",
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('content.pdf');
}
}) $("#viewSiteInfoTempModalEx").html("").css("display","none");
//附;https://www.jianshu.com/p/570c84ee2e8d
}

  

<script type="text/javascript" src="$!{request.getContextPath()}/res/webFrameset/plugins/intoPdf/js/jspdf.debug.js"></script>
<script type="text/javascript" src="$!{request.getContextPath()}/res/webFrameset/plugins/intoPdf/js/html2canvas.js"></script>

  

导出pdf的更多相关文章

  1. .Net导出pdf文件,C#实现pdf导出

    最近碰见个需求需要实现导出pdf文件,上网查了下代码资料总结了以下代码.可以成功的实现导出pdf文件. 在编码前需要在网上下载个itextsharp.dll,此程序集是必备的.楼主下载的是5.0版本, ...

  2. JS导出PDF插件(支持中文、图片使用路径)

    在WEB上想做一个导出PDF的功能,发现jsPDF比较多人推荐,遗憾的是不支持中文,最后找到pdfmake,很好地解决了此问题.它的效果可以先到http://pdfmake.org/playgroun ...

  3. ITextSharp导出PDF表格和图片(C#)

    文章主要介绍使用ITextSharp导出PDF表格和图片的简单操作说明,以下为ITextSharp.dll下载链接 分享链接:http://pan.baidu.com/s/1nuc6glj 密码:3g ...

  4. JAVA导出pdf实例

    一.直接导出成PDF   Java代码 1. import java.io.FileNotFoundException; 2. import java.io.FileOutputStream; 3.  ...

  5. 利用ITextSharp导出PDF文件

    最近项目中需要到处PDF文件,最后上网搜索了一下,发现ITextSharp比较好用,所以做了一个例子: public string ExportPDF() { //ITextSharp Usage / ...

  6. iText导出pdf、word、图片

    一.前言 在企业的信息系统中,报表处理一直占比较重要的作用,本文将介绍一种生成PDF报表的Java组件--iText.通过在服务器端使用Jsp或JavaBean生成PDF报表,客户端采用超级连接显示或 ...

  7. Itext导出PDF,word,图片案例

    iText导出pdf.word.图片 一.前言 在企业的信息系统中,报表处理一直占比较重要的作用,本文将介绍一种生成PDF报表的Java组件--iText.通过在服务器端使用Jsp或JavaBean生 ...

  8. Ireport 报表导出 Poi + ireport 导出pdf, word ,excel ,htm

    Ireport 报表导出 Poi + ireport 导出pdf, doc ,excel ,html 格式 下面是报表导出工具类reportExportUtils 需要导出以上格式的报表 只需要调用本 ...

  9. Spring Boot 系列教程18-itext导出pdf下载

    Java操作pdf框架 iText是一个能够快速产生PDF文件的java类库.iText的java类对于那些要产生包含文本,表格,图形的只读文档是很有用的.它的类库尤其与java Servlet有很好 ...

  10. 纯前端导出pdf文件

    纯前端js导出pdf,已经用于生产环境. 工具: 1.html2canvas,一种让html转换为图片的工具. 2.pdfmake或者jspdf ,一种生成.编辑pdf,并且导出pdf的工具. pdf ...

随机推荐

  1. Mac下如何用SSH连接远程Linux服务器,centos无法复制粘贴

    CentOS 7.1安装完之后默认已经启动了ssh服务我们可以通过以下命令来查看ssh服务是否启动. 3.2查看22端口是否开放 #netstat -tnl 3.3查看ssh服务是否启动 #syste ...

  2. kafka-confluent管控中心安装

    https://www.confluent.io/  一个基于kafka的扩展平台,我们主要关注其管控中心. 由于监控中心只有企业版才有,所以下载企业版,并进行测试. 进入下载中心,可以看到两个版本: ...

  3. Oracle 命令

    net start oracleserviceorcl  启动服务 sql>shutdown     关闭数据库 sql>startup         打开数据库 sql> sel ...

  4. scala变量类型和性质

    最高的父类型为Any,最低类型为Nothing Any is the supertype of all types, also called the top type. It defines cert ...

  5. 23.pyspider安装

    1.pip安装pip3 install pyspider 2.验证安装 pyspider all 3.打开浏览器 输入:127.0.0.1:5000(如下图)

  6. Oracle exp/imp 导出/导入

    set NLS_LANG=AMERICAN_AMERICA.AL32UTF8 exp jjhd_test/11111111@a_syj file="d:\jjhd_test.dmp" ...

  7. hdfs standby namenode checkpoint 的一些参数

    dfs.namenode.checkpoint.period --两次检查点创建之间的固定时间间隔,默认3600,即1小时.所以去ann snn 看到的fsimage 相隔1个小时. dfs.name ...

  8. react-native获取设备信息app版本信息,react-native-device-info

    安装 yarn add react-native-device-info react-native link react-native-device-info link 之后就可以直接使用了,ios ...

  9. react-native启动页面设置,react-native-splash-screen

    用于解决iOS和Android启动白屏问题及简单的启动页面展示 下载 react-native-splash-screen yarn add react-native-splash-screen re ...

  10. Django之集合函数使用与mysql表的创建特殊字段分析

    1. 集合函数的使用场景: -- 单独使用: 不分组, 只查聚合结果 -- 分组使用: 按字段分组, 可查询分组字段与聚合结果 2. 导入聚合函数 from django.db.models impo ...