前端html生成pdf并直接下载

引入所需要的js文件下载js文件

<script src="${ctx}/static/js/html2canvas.js"></script>
<script src="${ctx}/static/js/jspdf.debug.js"></script>

将html 中任意div中的元素生成pdf

<fieldset class="layui-elem-field">
            <legend>雷灾预警报告-申请</legend>
            <div class="layui-field-box">
                <table class="dataTable">
                    <tr>
                        <td>位置：</td>
                        <td>${lzbg.wz}</td>
                        <td>道路：</td>
                        <td>${lzbg.dl}</td>
                    </tr>
                    <tr>
                        <td>申请人：</td>
                        <td>${lzbg.sqrxm}</td>
                        <td>申请时间：</td>
                        <td>${lzbg.cjsj.format(DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm"))}</td>
                    </tr>
                    <tr>
                        <td>雷灾强度：</td>
                        <td>${lzbg.wz}</td>
                        <td>预计时间：</td>
                        <td>${lzbg.yjsj}</td>
                    </tr>
                    <tr>
                        <td>备注：</td>
                        <td colspan="3">${lzbg.bz}</td>
                    </tr>
                </table>
            </div>
        </fieldset>

使用按钮触发生成pdf事件

<a href="javascript:void(0)" onclick="makeMpdf('检测报告')">下载检测文件</a>

js方法

<script>
    function makeMpdf(pdfName) {
        if(confirm("您确认下载该PDF文件吗?")){
            var target = document.getElementsByClassName("layui-elem-field")[2];
            target.style.background = "#FFFFFF";
            if(pdfName==''||pdfName==undefined) pdfName= getNowFormatDate();

            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(pdfName+".pdf");
                }
            })
        }
    }
</script>