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

首先下载 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;
        },