前端导出pdf

最新推荐文章于 2024-07-20 18:16:53 发布

Mack_yong

最新推荐文章于 2024-07-20 18:16:53 发布

阅读量46

点赞数

文章标签：前端 pdf javascript

本文链接：https://blog.csdn.net/u011053926/article/details/132469319

版权

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.1.1/jspdf.umd.min.js"></script>
    <!-- 引入在线jsPDF -->

</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    #pdfDOM {
        padding: 50px;
    }
    li {
        /* list-style: none; */
    }
</style>

<body>
    <button id="pdfBth">导出pdf</button>
    <div id="pdfDOM">
        <p>
            测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试
            测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试
            测试
        </p>
        <ul>
            <li>
                测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试
                测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试
                测试
                测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试
                测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试
                测试
                测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试
                测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试
                测试
                测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试
                测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试
                测试
                测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试
                测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试
                测试
                测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试
                测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试
                测试
            </li>
            <li>测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试
                测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试
                测试
            </li>
            <li>测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试
                测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试
                测试
            </li>
            <li>测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试
                测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试
                测试
            </li>
            <li>测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试
                测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试
                测试
            </li>
            <li>测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试
                测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试
                测试
            </li>
        </ul>
    </div>

</body>
<script>
    //获取按钮
    var btn = document.getElementById("pdfBth");
    //添加按钮点击事件
    btn.onclick = function () {
        //获取内容
        var content = document.getElementById("pdfDOM");
        //调用下载方法
        downLoadPdf(content);
    }
    function downLoadPdf (content) {
        content = content ? content : null;
        const { jsPDF } = window.jspdf
        console.log(content)
        var contentWidth = content.offsetWidth;
        var contentHeight = content.offsetHeight;
        var canvas = document.createElement("canvas")
        canvas.width = contentWidth
        canvas.height = contentHeight
        var context = canvas.getContext("2d");
        html2canvas(content, {
            allowTaint: true,
            scale: 2  // 提升画面质量，但是会增加文件大小
        }).then(function (canvas) {
            var pdfWidth = canvas.width;
            var pdfHeight = canvas.height;
            var pageHeight = pdfWidth / 592.28 * 841.89;
            var leftHeight = pdfHeight;
            var position = 0;
            var imgWidth = 595.28;
            var imgHeight = 595.28 / pdfWidth * pdfHeight;
            var pageData = canvas.toDataURL("img/jpeg", 1.0);
            console.log(new jsPDF());
            var pdf = new jsPDF('', 'pt', 'a4');
            // 判断打印dom高度是否需要分页，如果需要进行分页处理
            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")
        })

    }
</script>

</html>