利用html2pdf将html生成pdf-CFANZ编程社区

<!DOCTYPE HTML>
<html>
<head>
    <title>HTML转PDF测试</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
    <button onclick="downloadPdf()">生成PDF</button>
    <div id="root">
        <style>
            .box {
                width: 587px;
                height: 833px;
                margin: 0px auto;
                position: relative;
            }
            .box img {
                position: absolute;
                width: 100%;
                left: 0;
                top: 0;
                z-index: -1;
            }

            .box .title {
                position: absolute;
                left: 67px;
                top: 407px;
                font-size: 20px;
                font-weight: bold;
            }

            .box .qrcode {
                display: none;
            }
            .box .award {
                position: absolute;
                top: 536px;
                left: 293px;
                font-size: 30px;
                font-weight: bold;
                background: #fff;
                width: 300px;
                margin-left: -150px;
                text-align: center;
            }
        </style>
        <div class="box">
            <img src="" id="bgimg" />
            <div class="title">学校 姓名 作品名称</div>
            <div class="qrcode">团队邀请码</div>
            <div class="award">组别 奖项</div>
        </div>

    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"
        integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <script>

        function getBase64Image(img) {
            var canvas = document.createElement("canvas");
            canvas.width = img.width;
            canvas.height = img.height;
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0, img.width, img.height);
            var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
            var dataURL = canvas.toDataURL("image/" + ext);
            return dataURL;
        }

        var img = "2022.png";//imgurl 就是你的图片路径  
        var image = new Image();
        image.src = img;
        image.onload = function () {
            var base64 = getBase64Image(image);
            document.getElementById("bgimg").setAttribute("src", base64);
            console.log(base64);
        }

        function downloadPdf() {
            // 获取DIV元素
            var element = document.getElementById('root');
            // 生成PDF调用
            html2pdf().from(element).set({
                margin: 0,
                filename: 'test.pdf',
                html2canvas: { scale: 2 },
                jsPDF: { orientation: 'portrait', unit: 'in', format: 'letter', compressPDF: true }
            }).save();
        }
    </script>
</body>

</html>

最终效果图如下：