zoukankan      html  css  js  c++  java
  • 导出pdf

    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>
    	
    

      

  • 相关阅读:
    矩阵的零散知识总结2
    矩阵上的零散总结1
    立志
    抄一首小诗开篇,哈哈
    【python】15行代码实现动漫人脸检测(opencv)
    【python】15行代码实现猫脸检测(opencv)
    【python】15行代码实现人脸检测(opencv)
    【python】7个随机二次元图片api接口汇总(附网页调用示例)
    【python】15行代码下载快手无水印短视频
    微软新版edge浏览器如何开启画中画模式
  • 原文地址:https://www.cnblogs.com/lgjc/p/8853997.html
Copyright © 2011-2022 走看看