导出为pdf


      let that = this
      html2Canvas(document.querySelector(`#printMe`), {
          allowTaint: true,
          useCORS:true,
          // backgroundColor: '#FFFFFF'
        }).then(function (canvas) {
            //未生成pdf的html页面高度
            var leftHeight = canvas.height;

            var a4Width = 595.28
            var a4Height = 841.89
            //一页pdf显示html页面生成的canvas高度;
            var a4HeightRef = Math.floor(canvas.width / a4Width * a4Height);

            //pdf页面偏移
            var position = 0;

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

            var pdf = new JsPDF('x', 'pt', 'a4');
            var index = 1,
                canvas1 = document.createElement('canvas'),
                height;
            pdf.setDisplayMode('fullwidth', 'continuous', 'FullScreen');

            var pdfName='检测报表';
            function createImpl(canvas) {
                if (leftHeight > 0) {
                    index++;

                    var checkCount = 0;
                    if (leftHeight > a4HeightRef) {
                        var i = position + a4HeightRef;
                        for (i = position + a4HeightRef; i >= position; i--) {
                            var isWrite = true
                            for (var j = 0; j < canvas.width; j++) {
                                var c = canvas.getContext('2d').getImageData(j, i, 1, 1).data

                                if (c[0] != 0xff || c[1] != 0xff || c[2] != 0xff) {
                                    isWrite = false
                                    break
                                }
                            }
                            if (isWrite) {
                                checkCount++
                                if (checkCount >= 10) {
                                    break
                                }
                            } else {
                                checkCount = 0
                            }
                        }
                        height = Math.round(i - position) || Math.min(leftHeight, a4HeightRef);
                        if(height<=0){
                            height = a4HeightRef;
                        }
                    } else {
                        height = leftHeight;
                    }

                    canvas1.width = canvas.width;
                    canvas1.height = height;

                    var ctx = canvas1.getContext('2d');
                    ctx.drawImage(canvas, 0, position, canvas.width, height, 0, 0, canvas.width, height);

                    var pageHeight = Math.round(a4Width / canvas.width * height);
                    // pdf.setPageSize(null, pageHeight)
                    if(position != 0){
                        pdf.addPage();
                    }
                    pdf.addImage(canvas1.toDataURL('image/jpeg', 1.0), 'JPEG', 0, 0, a4Width, a4Width / canvas1.width * height);
                    leftHeight -= height;
                    position += height;
                    if (leftHeight > 0) {
                        setTimeout(createImpl, 500, canvas);
                    } else {
                        pdf.save(pdfName + '.pdf');
                        that.$notify.closeAll()
                    }
                }
            }

            //当内容未超过pdf一页显示的范围,无需分页
            if (leftHeight < a4HeightRef) {
                pdf.addImage(pageData, 'JPEG', 0, 0, a4Width, a4Width / canvas.width * leftHeight);
                pdf.save(pdfName + '.pdf')
            } else {
                try {
                    pdf.deletePage(0);
                    that.$notify.info({
                      title: '提示',
                      message: '正在生成中...',
                      duration: 0
                    });
                    setTimeout(createImpl, 500, canvas);
                } catch (err) {
                    console.log(err);
                }
            }
          }
        )

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

某公司摸鱼前端

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值