jspdf的使用

<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>

<div id="calendar">这里是html的任何内容</div>
<div onclick="Exportpdf()">导出pdf<div>
<script>
function Exportpdf() {
     var element = $('#calendar');    // 这个dom元素是要导出pdf的div容器
     element.get(0).style.background = "#FFFFFF";
     var w = element.width();    // 获得该容器的宽
     var h = element.height();    // 获得该容器的高
     var offsetTop = element.offset().top;    // 获得该容器到文档顶部的距离
     var offsetLeft = element.offset().left;    // 获得该容器到文档最左的距离
     var canvas = document.createElement("canvas");
     var abs = 2;
     var win_i = $(window).width();    // 获得当前可视窗口的宽度(不包含滚动条)
     var win_o = window.innerWidth;    // 获得当前窗口的宽度(包含滚动条)
     console.log(win_i);console.log(win_o);
     if(win_o>win_i){

         abs = (win_o - win_i)/2;    // 获得滚动条长度的一半
     }
     canvas.width = w * 2;    // 将画布宽&&高放大两倍
     canvas.height = h * 2;
     var context = canvas.getContext("2d");

     // 【重要】关闭抗锯齿
     context.mozImageSmoothingEnabled = false;
     context.webkitImageSmoothingEnabled = false;
     context.msImageSmoothingEnabled = false;
     context.imageSmoothingEnabled = false;

     context.scale(2, 2);
     context.translate(-offsetLeft-abs,-offsetTop);
     // 这里默认横向没有滚动条的情况,因为offset.left(),有无滚动条的时候存在差值,因此
     // translate的时候,要把这个差值去掉
     html2canvas(element).then(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 = 10;
         //a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
         var imgWidth = 820.89;
         var imgHeight = 560.28;

         var pageData = canvas.toDataURL('image/jpeg', 1.0);

         //l纵向 p横向
         var pdf = new jsPDF('l', 'pt', 'a4');

         //有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
         //当内容未超过pdf一页显示的范围,无需分页
         if (leftHeight < pageHeight) {
             pdf.addImage(pageData, 'JPEG', 10, 10, imgWidth, imgHeight);
         } else {    // 分页
             while(leftHeight > 0) {
                 pdf.addImage(pageData, 'JPEG', 10, position, imgWidth, imgHeight);
                 leftHeight -= pageHeight;
                 position -= 841.89;
                 //避免添加空白页
                 if(leftHeight > 0) {
                     pdf.addPage();
                 }
             }
         }
         pdf.save(pdfName());
     });
 }

 function pdfName() {
     var myDate = new Date;
     var year = myDate.getFullYear();//获取当前年
     var mon = myDate.getMonth()+1;//获取当前月
     var day = myDate.getDate();//获取当前日
     var rand = ''+Math.ceil(Math.random()*10000);
     return year.toString()+mon.toString()+day.toString()+rand+'.pdf';
 }
</script>
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值