JavaScript生成PDF

最新推荐文章于 2024-05-10 10:01:01 发布
pandaHe_Status
最新推荐文章于 2024-05-10 10:01:01 发布
阅读量2.8k
点赞数 2
分类专栏：前端文章标签： javascript js html css html5
本文链接：https://blog.csdn.net/weixin_43321726/article/details/109891490
版权
前端专栏收录该内容
101 篇文章 1 订阅
订阅专栏
废话不多说直接上代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Make PDF</title>
    <style>
        .main {
            width: 960px;
            height: 480px;
            margin: 0px auto;
            margin-top: 20px;
            padding: 10px;
            display: flex;
        }

        .body {
            width: 95%;
            height: 480px;
            padding-top: 40px;
        }

        .title {
            width: 100%;
            height: 40px;
            display: flex;
        }

        .title .div1 {
            width: 60%;
            text-align: right;
        }

        .title .div1 .divCtn {
            width: 230px;
            height: 40px;
            float: right;
        }

        .title .div1 .divCtn .titleCtn {
            width: 230px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            font-size: 25px;
            font-weight: bold;
        }

        .title .div1 .divCtn .titleUdeLine {
            width: 230px;
            height: 6px;
            border-bottom: solid 2px #9C5223;
            border-top: solid 2px #9C5223;
        }

        .title .div2 {
            width: 40%;
            text-align: right;
            height: 40px;
            line-height: 30px;
            font-size: 20px;
            font-weight: bold;
        }

        .date {
            width: 100%;
            height: 40px;
            display: flex;
        }

        .date .deDiv1 {
            width: 60%;
            height: 40px;
            line-height: 40px;
            text-align: right;
            font-size: 18px;
        }

        .date .deDiv2 {
            width: 40%;
            height: 40px;
            line-height: 40px;
            text-align: right;
            font-size: 18px;
        }

        .tempTr1 td {
            text-align: center;
        }

        table tr td {
            padding: 5px;
        }

        .tempTr2 td {
            height: 40px;
            text-align: center;
        }

        .end {
            width: 5%;
            height: 480px;
        }

        .buttonBox {
            width: 960px;
            height: 480px;
            margin: 0px auto;
        }

        .buttonBox button {
            padding: 5px;
            background-color: #888888;
            color: #FFFFFF;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <!-- 需要打印的pdf页面放在这里 -->
    <div class="main">
        <div class="body">
            <div class="title">
                <div class="div1">
                    <div class="divCtn">
                        <div class="titleCtn">收&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;据</div>
                        <div class="titleUdeLine"></div>
                    </div>
                </div>
                <div class="div2">NO：<span style="color: #9C5223;">1313215</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                </div>
            </div>
            <div class="date">
                <div class="deDiv1">
                    2019年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;07月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;03日
                </div>
                <div class="deDiv2">第&nbsp;&nbsp;&nbsp;&nbsp;201&nbsp;&nbsp;&nbsp;&nbsp;号</div>
            </div>
            <table border="1" style="width: 100%; border-collapse: collapse;">
                <tr class="tempTr2">
                    <td colspan="6" style="border-right-color: #FFFFFF; width: 50%; text-align: left;">
                        &nbsp;&nbsp;兹&nbsp;&nbsp;收&nbsp;&nbsp;到&nbsp;&nbsp; 李松山</td>
                    <td colspan="6" style="width: 50%;">
                        交&nbsp;&nbsp;来&nbsp;&nbsp;下&nbsp;&nbsp;列&nbsp;&nbsp;款&nbsp;&nbsp;项&nbsp;&nbsp;此&nbsp;&nbsp;据
                    </td>
                </tr>
                <tr>
                    <td align="center" rowspan="2" style="width: 60%;">
                        摘&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;要</td>
                    <td colspan="10" align="center" style="width: 10%;">金&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;额</td>
                    <td rowspan="2" align="center" style="width: 30%;">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注</td>
                </tr>
                <tr class="tempTr1">
                    <td>￥</td>
                    <td>百</td>
                    <td>十</td>
                    <td>万</td>
                    <td>千</td>
                    <td>百</td>
                    <td>十</td>
                    <td>元</td>
                    <td>角</td>
                    <td>分</td>
                </tr>
                <tr class="tempTr2">
                    <td>天河小区5栋23楼3单元2019年1-6月份水电费</td>
                    <td>￥</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td>6</td>
                    <td>5</td>
                    <td>3</td>
                    <td>2</td>
                    <td>8</td>
                    <td>3</td>
                    <td>支付方式：现金</td>
                </tr>
                <tr class="tempTr2">
                    <td></td>
                    <td>￥</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr class="tempTr2">
                    <td></td>
                    <td>￥</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr class="tempTr2">
                    <td colspan="12" style=" text-align: left;">
                        合计人民币（大写）陆仟伍佰叁拾贰元捌角叁分
                        <div style="float: right; display: flex;">
                            <div style="font-size: 20px;">￥：</div>
                            <div
                                style="width: 180px; height: 30px; border-bottom: solid #000000 1px; text-align: center;">
                                6532.83</div>
                        </div>
                    </td>
                </tr>
            </table>
            <div style="width: 100%; display: flex; height: 40px;">
                <div style="width: 50%; height: 40px; line-height: 40px;">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;主管：鲁迅</div>
                <div style="width: 50%; height: 40px; line-height: 40px;">经手人：周树人</div>
            </div>
        </div>
        <div class="end">
            <div style="margin-top: 160px; text-align: center; height: 230px;width: 100%;">
                第<br />二<br />联<br />：<br />存<br />根</div>
        </div>
    </div>
    <div class="buttonBox">
        <button onclick="pdfDo()">导出PDF</button>
    </div>
</body>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<script src="https://cdn.bootcss.com/jspdf/1.3.4/jspdf.debug.js"></script>

<script>
    function pdfDo() {
        var isDo = confirm("确定导出pdf页面");
        if (!isDo) { return; }
        var target = document.getElementsByClassName("main")[0];
        target.style.background = "#FFFFFF";

        html2canvas(target, {
            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;
                //页面偏移
                var position = 0;
                //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', 0, 0, imgWidth, imgHeight);
                } else {
                    while (leftHeight > 0) {
                        pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                        leftHeight -= pageHeight;
                        position -= 841.89;
                        //避免添加空白页
                        if (leftHeight > 0) {
                            pdf.addPage();
                        }
                    }
                }
                pdf.save("pdf_file_name.pdf");
            }
        })
    }
</script>

</html>
在这里插入图片描述
pandaHe_Status
关注
2
点赞
踩
13

收藏

觉得还不错? 一键收藏
1
评论
JavaScript生成PDF

废话不多说直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Make PDF</title> <style> .main
复制链接

扫一扫