如何将局部DIV转成图片再转成PDF下载？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../jspdf.debug.js"></script>
    <script src="../../html2canvas.js"></script>
    <script src="../../jquery-min.js"></script>
    <style>
        tr {
            border: 1px solid red;
        }
        td {
            border: 1px solid red;
        }
        table {
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div id="taotaisai" style="border: 1px solid red;width:400px;height: 400px;" onclick="sub()">
    <table>
        <tr>
            <td>2222222222222</td>
        </tr>
        <tr>
            <td>2222222222222</td>
        </tr>
        <tr>
            <td>222222222</td>
        </tr>
    </table>
    <form action="http://localhost:3002/multipart" method="POST" enctype="multipart/form-data">
        <input type="file" name="imgfile" multiple>
        <input type="submit" value="提交">
    </form>
</div>
</body>
<script>
    function sub() {
        var target = document.getElementById("taotaisai");//要转化页面内容的id
        target.style.background = "#FFFFFF";
        html2canvas(target, {
            onrendered: function (canvas) {
                //渲染完成时调用的
                var contentWidth = canvas.width;
                var contentHeight = canvas.height;
                //一页pdf显示html页面生成的canvas高度;
                var pageHeight = contentWidth / 20 * 20;
                //未生成pdf的html页面高度
                var leftHeight = contentHeight;
                //页面偏移
                var position = 100;
                //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
                var imgWidth = 400;
                var imgHeight = 400 / contentWidth * contentHeight;
                var pageData = canvas.toDataURL('image/jpeg', 1.0);
                var pdf = new jsPDF('l', 'pt', 'a4');  //l：横向  p：纵向
                //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(595.28)
                //当内容未超过pdf一页显示的范围，无需分页
                if (leftHeight < pageHeight) {
                    pdf.addImage(pageData, 'JPEG', 26, 43, imgWidth, imgHeight);
                } else {
                    while (leftHeight > 0) {
                        pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
                        leftHeight -= pageHeight;
                        position -= 595.28;
                        //避免添加空白页
                        if (leftHeight > 0) {
                            pdf.addPage();
                        }
                    }
                }
                let data = new Date().getTime();
                let imgfile = pdf.output();
                console.log(imgfile);
                $.post('http://localhost:3002/name?imgfile=' + imgfile, function (res) {
                    console.log(imgfile);
                })
            }
        });
    }
https://github.com/820465323/react-demo2/blob/master/mongo-node/myPro/public/upload-Demo.html
如何将局部DIV转成图片再转成PDF下载？

猜你喜欢
