vue导出pdf(自定义页面大小)

素颜马尾好姑娘i 2022-11-28 10:37 638阅读 0赞

首先下载 html2canvas 和 jspdf插件

import html2canvas from 'html2canvas'
    import JsPDF from 'jspdf'

导出函数 (先html2canvas将页面截图，然后用jspdf导出)

exportPDF(){ 
                // let shareContent = document.body,//需要截图的包裹的（原生的）DOM 对象
                let shareContent = document.getElementById('ccc'),//需要截图的包裹的（原生的）DOM 对象
                width = shareContent.clientWidth, //获取dom 宽度
                height = shareContent.clientHeight, //获取dom 高度
                canvas = document.createElement("canvas"), //创建一个canvas节点
                scale = 1; //定义任意放大倍数 支持小数
                canvas.width = width * scale; //定义canvas 宽度 * 缩放
                canvas.height = height * scale; //定义canvas高度 *缩放
                canvas.style.width = shareContent.clientWidth * scale + "px";
                canvas.style.height = shareContent.clientHeight * scale + "px";
                canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
                let opts = { 
                    scale: scale, // 添加的scale 参数
                    canvas: canvas, //自定义 canvas
                    logging: false, //日志开关，便于查看html2canvas的内部执行流程
                    width: width, //dom 原始宽度
                    height: height,
                    useCORS: true, // 【重要】开启跨域配置
                };
                html2canvas(shareContent, opts).then(() => { 
                    let contentWidth = canvas.width;
                    let contentHeight = canvas.height;
                    //一页pdf显示html页面生成的canvas高度;
                    let pageHeight = (contentWidth / 592.28) * 841.89;
                    //未生成pdf的html页面高度
                    let leftHeight = contentHeight;
                    //页面偏移
                    let position = 0;
                    //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
                    let imgWidth = 595.28;
                    let imgHeight = (592.28 / contentWidth) * contentHeight;
                    let pageData = canvas.toDataURL("image/jpeg", 1.0);
                    // let PDF = new JsPDF("", "pt", "a4"); // a4纸纵向
                    // let PDF = new JsPDF('landscape'); // 横向页面
                    let arrDPI = this.js_getDPI(); //获取显示器DPI
                    let dpiX = 96;
                    let dpiY = 96;
                    if(arrDPI.length>0){ 
                        dpiX = arrDPI[0];
                        dpiY = arrDPI[1];
                    }
                    //l:横向， p：纵向；单位： in:英寸，mm毫米；画布大小：a3,a4,leter,[]（当内容为数组时，为自定义大小）
                    let PDF = new JsPDF("l", "in", [(contentWidth+10)/dpiX,(contentHeight+10)/dpiY]);  // 自定义页面大小
                    if (leftHeight <= pageHeight) { 
                        PDF.addImage(pageData, "JPEG", 5/dpiX,5/dpiY); 
                    } else { 
                        while (leftHeight > 0) { 
                            PDF.addImage(pageData, "JPEG", 0, position);
                            leftHeight -= pageHeight;
                            position -= 841.89;
                            if (leftHeight > 0) { 
                                PDF.addPage();
                            }
                        }
                    }
                    PDF.save(this.title + ".pdf"); // 这里是导出的文件名
                })
                .catch(()=>{ 
                    
                })
            },

获取显示器DPI函数

//获取显示器DPI
            js_getDPI() { 
                var arrDPI = new Array();
                if (window.screen.deviceXDPI != undefined) { 
                    arrDPI[0] = window.screen.deviceXDPI;
                    arrDPI[1] = window.screen.deviceYDPI;
                }
                else { 
                    var tmpNode = document.createElement("DIV");
                    tmpNode.style.cssText = "width:1in;height:1in;position:absolute;left:0px;top:0px;z-index:99;visibility:hidden";
                    document.body.appendChild(tmpNode);
                    arrDPI[0] = parseInt(tmpNode.offsetWidth);
                    arrDPI[1] = parseInt(tmpNode.offsetHeight);
                    tmpNode.parentNode.removeChild(tmpNode);   
                }
                return arrDPI;
            },