导出为PDF系列（三）__HTML导PDF

用HTML导出PDF主要使用html2canvas+jsPdf。
（1）引入上面两个js
jsPdf.debug.js
html2canvas.js
（2）给想导出的区域设定一个id
（3）将userInfoForExport渲染成canvas，下面是具体的代码
<html>
<head>
    <title>登陆成功</title>
    <script src="../../static/js/jsPdf.debug.js"></script>
    <script src="../../static/js/html2canvas.js"></script>
    <style type="text/css">
        .export-table,.export-table tr td {
            border: 1px solid #333;
        }
        .export-table tr td {
            padding: 5px;
            height: 30px;
        }
        .export-table {
            width: 800px;
            height: 100%;
            border-collapse: collapse;
            font-family: -webkit-pictograph;
            font-size: 1.5em;
        }
        .export-table-title {
            width: 160px;
            padding: 5px;
            font-weight: bold;
        }
    </style>
</head>
<body>login successful

<span class="export" id="exportFile"><i></i>export</span>
<button type="button" onclick="exportUserInfoNew()">export</button>

<div id="userInfoForExport" style="background: #fff;display: none">
    <table class="export-table">
        <tr>
            <td colspan="2" style="font-weight: bold;height: 45px;font-size: 1.3em;">information</td>
        </tr>
        <tr>
            <td class="export-table-title">pic:</td>
            <td >
                <img style="width: 80px;height: 80px;" src="../../static/pic/gril.jpg"/>
            </td>
        </tr>
        <tr>
            <td class="export-table-title">pin</td>
            <td>xxx123456</td>
        </tr>
        <tr>
            <td class="export-table-title">name</td>
            <td>hana</td>
        </tr>
        <tr>
            <td class="export-table-title">country</td>
            <td>china</td>
        </tr>
        <tr>
            <td class="export-table-title">email</td>
            <td>[email protected]</td>
        </tr>
        <tr>
            <td class="export-table-title">phonenum</td>
            <td>110110</td>
        </tr>
    </table>
</div>
<script>
    
    function exportUserInfoNew() {
        //将downPDF这个对象渲染成canvas
        document.getElementById("userInfoForExport").style.display="block";
        html2canvas(document.getElementById("userInfoForExport"), {
            useCORS:true,//解决导出图片跨域不显示问题
            onrendered:function(canvas) {

                var contentWidth = canvas.width;
                var contentHeight = canvas.height;

                //一页pdf显示html页面生成的canvas高度;
                var pageHeight = contentWidth / 592.28 * 841.89;
                //未生成pdf的html页面高度
                var leftHeight = contentHeight;
                //pdf页面偏移
                var position = 80;
                //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
                var imgWidth = 595.28;
                var imgHeight = 592.28/contentWidth * contentHeight;

                var pageData = canvas.toDataURL('image/jpeg', 1.0);

                var pdf = new jsPDF('', 'pt', 'a4');

                //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
                //当内容未超过pdf一页显示的范围，无需分页
                if (leftHeight < pageHeight) {
                    pdf.addImage(pageData, 'JPEG', 100, 80, imgWidth, imgHeight );
                } else {
                    while(leftHeight > 0) {
                        pdf.addImage(pageData, 'JPEG', 100, position, imgWidth, imgHeight)
                        leftHeight -= pageHeight;
                        position -= 841.89;
                        //避免添加空白页
                        if(leftHeight > 0) {
                            pdf.addPage();
                        }
                    }
                }
                pdf.save('Personal_Information.pdf')
            }
        });
        document.getElementById("userInfoForExport").style.display="none";
    };
</script>
</body>
</html>
（4）效果如下
贴一个大神的源码地址：https://github.com/linwalker/render-html-to-pdf
导出为PDF系列（三）__HTML导PDF

猜你喜欢
