随笔记录37 html转PDF并上传（纯前端）

依赖：html2canvas.js、jspdf.js
参考：https://www.jq22.com/jquery-info22545

var whiteImg =
        "data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QMraHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjk2QjIxRjMxMDY4RDExRUE5NEYyRUI4OUU5NEFDQzE5IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjk2QjIxRjMyMDY4RDExRUE5NEYyRUI4OUU5NEFDQzE5Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OTZCMjFGMkYwNjhEMTFFQTk0RjJFQjg5RTk0QUNDMTkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OTZCMjFGMzAwNjhEMTFFQTk0RjJFQjg5RTk0QUNDMTkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAGBAQEBQQGBQUGCQYFBgkLCAYGCAsMCgoLCgoMEAwMDAwMDBAMDg8QDw4MExMUFBMTHBsbGxwfHx8fHx8fHx8fAQcHBw0MDRgQEBgaFREVGh8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx//wAARCAAIAxUDAREAAhEBAxEB/8QASwABAQAAAAAAAAAAAAAAAAAAAAgBAQAAAAAAAAAAAAAAAAAAAAAQAQAAAAAAAAAAAAAAAAAAAAARAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/AKpAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB//2Q==";

html2canvas(document.querySelector("#view"), {
                allowTaint: !0,
                scale: 1.6
            }).then((function(canvas) {
                var contentWidth = canvas.width,
                    contentHeight = canvas.height,
                    pageData = canvas.toDataURL("image/jpeg", 1),
                    pdfX, pdfY = contentHeight / 2 * .75,
                    whiteHeight = 60,
                    pdfW = 595.32,
                    pdfH = 841.89,
                    imgX = contentWidth / 2 * .75,
                    imgY = contentHeight / 2 * .75,
                    imgH = 721.89,
                    position = 60,
                    pageTempHeight = contentHeight / 2 * .75,
                    PDF = new jsPDF("", "pt", "a4");
                if (imgY < imgH) PDF.addImage(whiteImg, "jpeg", 0, 0, pdfW, 60), PDF.addImage(pageData, "jpeg", 0,
                    0, imgX, imgH), PDF.addImage(whiteImg, "jpeg", 0, 781.89, pdfW, 60);
                else
                    for (; pageTempHeight > 0;) PDF.addImage(pageData, "jpeg", 0, position, imgX, imgY), PDF
                        .addImage(whiteImg, "jpeg", 0, 0, pdfW, 60), PDF.addImage(whiteImg, "jpeg", 0, 782.89, pdfW,
                        60), position -= imgH, (pageTempHeight -= imgH) > 0 && PDF.addPage();
                // PDF.save("download.pdf")
                var dataurl = PDF.output('blob');
                var formData = new FormData();
                formData.append("file", dataurl);
                $.ajax({
                    type: 'post',
                    url: "/app/upload/upload", //上传文件的请求路径
                    data: formData,
                    dataType: "json",
                    contentType: !1,
                    processData: !1,
                    success:function(res){
                        
                    },
                    fail:function(e){
                       
                    }
                });
            }))