zoukankan      html  css  js  c++  java
  • vue v2.6.11 利用html2canvas,jspdf导出pdf

    downloadPdf () {
                const load = this.$loading({
                    lock: true,
                    text: '正在生成中...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                let target  = this.pdf;
                console.log(target);
                // return;
                html2canvas(target, {
                    useCORS: true, // 当图片是链接地址时,需加该属性,否组无法显示图片
                    "imageTimeout": 0,
                    'scale': 2,
                    "width": 1300,
                    "height": 2700,
                })
                 .then(canvas => {
                    load.close()
                    let contentWidth = canvas.width; 
                    let contentHeight = canvas.height; 
                    //一页pdf显示html页面生成的canvas高度;
                    let pageHeight = contentWidth / 592 * 841;
                    //未生成pdf的html页面高度
                    let leftHeight = contentHeight;
                    //页面偏移
                    let offsetX = 0;
                    let offsetY = 0;
                    //a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
                    let imgWidth = 805;
                    let imgHeight = 800/contentWidth * contentHeight;
                    let pageData = canvas.toDataURL('image/jpeg', 1.0);
                    let position = 0
    
    
                    // 第一个方向,第二个单位,第三个尺寸格式
                    // landscape横向
                    let pdf = new jspdf('', 'pt', 'a4');
                    //有两个高度需区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
                    //当内容未超过pdf一页显示的范围,无需分页
                    if(leftHeight < pageHeight) {
                        pdf.addImage(pageData, 'JPEG', -80, 0, imgWidth, imgHeight)
                    } else {
                        while(leftHeight > 0) {
                            pdf.addImage(pageData, 'JPEG', -80, position, imgWidth, imgHeight)
                            leftHeight -= pageHeight;
                            offsetX -= 592;
                            offsetY -= 841;
                            position-=841.89
                        //避免添加空白页
                        if(leftHeight > 0) {
                            pdf.addPage();
                        }
                        }
                   }
                   let name = '导出后的文件名.pdf'; // 定义生成的pdf的文件名字
                   pdf.save(name);
                });
    

         注意:高度是我写死的

    如有错误,欢迎指出!

  • 相关阅读:
    常用函数
    MySQL查询
    mysql的数据类型
    swoole简单demo测试
    linux下搭建lamp环境以及安装swoole扩展
    Linux下NAT模式和桥接模式的网络配置
    PhpStorm+xdebug+postman调试
    windows Apache 环境下配置支持HTTPS的SSL证书
    Yii2 restful api创建,认证授权以及速率控制
    Windows下开启composer镜像服务来安装yii
  • 原文地址:https://www.cnblogs.com/fuyuanling/p/13674291.html
Copyright © 2011-2022 走看看