HTML 不使用 JSPDF 转换为 PDF

Question

我正在尝试使用 jspdf 将 div 元素打印成 pdf。但是它给了我保证金错误。我不确定我哪里出错了。我已经添加了边距，但它的排列是一致的，并且缺少我编写的 CSS。根据要求，我也添加了 HTML 代码。

下面是我写的js

margins = {
  top: 70,
  bottom: 40,
  left: 30,
  width: 550
};

 function genIdCards(){
    var pdf = new jsPDF('p', 'pt', 'a4');
    pdf.setFontSize(18);
    pdf.fromHTML(document.getElementById('id-card'), 
        margins.left, // x coord
        margins.top,
        {
          // y coord
          width: margins.width// max width of content on PDF
        },function(dispose) {
          pdf.save('Test.pdf');
        }, 
        margins);
};
<script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>
<button onclick="genIdCards()">Generate PDF</button>

CSS

.id-card {
        height: auto;
        float: left;
        background: #fff;
        width: 500px;
        margin: 40px;
        border: 1px solid #7c0000;
    }

.apeejay-school {
    height: 97px;
    width: 100%;
    background: #7c0000;
}

.logo {
    width: 20%;
    height: auto;
    float: left;
    text-align: center;
}

.logo img {
    margin-top: 8px;
}

.apeejay-school-content {
    width: 75%;
    height: auto;
    float: left;
    padding-left: 10px;
    text-align: center;
}

下面是html

<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->
<!-- BEGIN HEAD -->
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />

<head>
    <?php include_once("../header.php"); ?>

</head>
<!-- END HEAD -->

<body class="page-header-fixed page-sidebar-closed-hide-logo page-container-bg-solid page-content-white">

    <div class="page-wrapper">
        <?php include_once("../navbar.php"); ?>
        <!-- BEGIN HEADER & CONTENT DIVIDER -->
        <div class="clearfix">
        </div>
        <!-- END HEADER & CONTENT DIVIDER -->
        <!-- BEGIN CONTAINER -->
        <div class="page-container">
            <?php include_once("../side_bar.php"); ?>
            <!-- BEGIN CONTENT -->
            <div class="page-content-wrapper">
                <!-- BEGIN CONTENT BODY -->
                <div class="page-content">
                    <div class="page-bar">
                        <ul class="page-breadcrumb">
                            <li>
                                <a href="#">Student Management</a>
                                <i class="fa fa-circle"></i>
                            </li>
                            <li>
                                <span>ID Cards</span>
                            </li>
                        </ul>
                    </div>
                    <?php include_once("../lcode.php");?>
                    <br><br>
                    <div class="row">
                        <div class="col-sm-3">
                            <label> Academic Year*</label>
                            <select id="acadyear" name="acadyr" class="form-control">
                                    <option value="" selected="selected">--Please select--</option>
                                        <?php fetch_acad_yr($conn);
                                        ?>
                                </select>
                        </div>
                        <div class="col-sm-3">
                            <label> Class</label>
                            <select id="acadclass" name="cclass" class="form-control">
                                    <option value="" selected="selected">--Please select--</option>
                                        <?php fetch_class($conn);
                                        ?>
                                </select>
                        </div>
                        <div class="col-sm-3">
                            <label>Section</label>
                            <select id="section" name="csec" class="form-control">
                                    <option value="" selected="selected">--Please select--</option>
                                        <?php fetch_section($conn);
                                        ?>
                                </select>
                        </div>
                        <div class="col-sm-3">

                            <button id="liststudents" type="submit" class="btn btn-primary" name="process" style="margin-top: 6%;"><span class="glyphicon glyphicon-ok"></span> Display List</button>

                        </div>
                    </div>
                    <br>

                    <button id="genId" type="submit" class="btn btn-success"  onclick="genIdCards()"><span class="glyphicon glyphicon-ok"></span> Generate Id Cards</button>
                    <br><br><br>
                    <div class="row">
                        <div class="col-lg-6 col-xs-12 col-sm-12">
                            <div class="portlet light">
                                <div class="table-responsive">
                                    <table id="liststu" class="table table-condensed table-hover">
                                        <thead>
                                            <tr>
                                                <th><input type="checkbox"></th>
                                                <th>Student ID</th>
                                                <th>Name</th>
                                                <th>Class and Section</th>
                                            </tr>
                                        </thead>
                                        <tbody>


                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6 col-xs-12 col-sm-12">
                            <div id="id-card" class="id-card">

                <div class="apeejay-school">
                    <div class="logo"><img src="logo.png" alt="apeejay School"></div>

                    <div class="apeejay-school-content">
                        <div class="apeejay-school-txt">
                            Apeejay School
                        </div>
                        <div class="school-location text-center">
                            college Road , Charkhi Dadri-127306
                        </div>
                        <div class="ph-fax text-center">Ph.:01250-222172, Fax : 01250-225172</div>
                        <div class="email-apeejay-school text-center">Email : skool.ms.chkd@ap.edu</div>
                    </div>
                </div>
                <div class="clearfix"></div>

                <div class="student-information">
                    <div class="student-details">
                        <div name="idName" class="name">Atul Kumar</div>
                        <div class="student-details-txt">
                            <div class="category">F / Name :</div>
                            <div name="idFname" class="category-detail">O P Sharma</div>
                        </div>
                        <div class="student-details-txt">
                            <div class="category">Admin . No.:</div>
                            <div name="idAno" class="category-detail">001</div>
                        </div>
                        <div class="student-details-txt">
                            <div class="category">Class :</div>
                            <div name="idCls" class="category-detail"> VI</div>
                        </div>
                        <div class="student-details-txt">
                            <div class="category">House :</div>
                            <div name="idHouse" class="category-detail">Nayak</div>
                        </div>
                        <div class="student-details-txt">
                            <div class="category">Address :</div>
                            <div name="idAdd" class="category-detail">25/2 , Krishana Colony, <br>Bhiwani</div>
                        </div>
                        <div class="student-details-txt">
                            <div class="category">Phone No :</div>
                            <div name="idPhnum" class="category-detail">XXXXXXXXXXXXXXX </div>
                        </div>
                    </div>

                    <div class="student-bio">
                        <div name="idSession" class="session">2009-2010</div>
                        <div class="student-pic"><img id="<?php echo ASSETIMG_PATH ?>" class="student-pic" name="stuimg" alt="Student"></div>
                        <div class="sinature"></div>
                        <div class="principal">Principal Sign</div>
                    </div>
                </div>
            </div>
<!--
                            <div class="portlet light">
                                <div class="radio">
                                    <label><input type="radio" name="optradio">Option 1</label>
                                </div>
                                <div class="radio">
                                    <label><input type="radio" name="optradio">Option 1</label>
                                </div>
                                <div class="radio">
                                    <label><input type="radio" name="optradio">Option 1</label>
                                </div>
                            </div>
-->
                        </div>
                    </div>
                </div>
            </div>
            <!-- END QUICK SIDEBAR -->
        </div>
    </div>
    <!-- END CONTAINER -->
    <?php include_once("../footer_text.php"); ?>
    </div>

    <div id="idhtml">

    </div>
    <div class="quick-nav-overlay"></div>
    <?php include_once("../footer.php"); ?>
    <script type="text/javascript" src="<?=ASSET_PATH?>assets/staff_js/validation.js"></script>
     <script type="text/javascript" src="<?=ASSET_PATH?>assets/staff_js/stumgmt/jspdf.min.js"></script>
    <script type="text/javascript" src="<?=ASSET_PATH?>assets/staff_js/stumgmt/icard.js"></script>

</body>

</html>

Answer 1

将pdf.save()从function(dispose){}移出，下面是工作的那个

margins = {
  top: 70,
  bottom: 40,
  left: 30,
  width: 550
};

function genIdCards() {
  var pdf = new jsPDF('p', 'pt', 'a4');
  pdf.setFontSize(18);
  pdf.fromHTML(document.getElementById('id-card'),
    margins.left, // x coord
    margins.top, {
      // y coord
      width: margins.width // max width of content on PDF
    },
    function(dispose) {
      pdf.save('Test.pdf');
    },
    margins);


};

#id-card {
  height: auto;
  float: left;
  background: #fff;
  width: 500px;
  margin: 40px;
  border: 1px solid #7c0000;
}

.apeejay-school {
  height: 97px;
  width: 100%;
  background: #7c0000;
}

.logo {
  width: 20%;
  height: auto;
  float: left;
  text-align: center;
}

.logo img {
  margin-top: 8px;
}

.apeejay-school-content {
  width: 75%;
  height: auto;
  float: left;
  padding-left: 10px;
  text-align: center;
}

<script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>
<div id='id-card'>
  <div class="logo">
    <img src="test.jpg">
  </div>
  <div class=".apeejay-school">
    <div class="apeejay-school-content">
      Some content for testSome content for testSome content for testSome content for testSome content for testSome content for testSome content for test
    </div>
  </div>
</div>
<button onclick="genIdCards()">Generate PDF</button>

Answer 2

我为您编写了有效的解决方案。你不必改变pdf.save('Test.pdf');的位置

var margins =
{
    top: 70,
    left: 30,
    right: 30,
    bottom: 40,
    width: 550
};

function genIdCards()
{
    var pdf = new jsPDF('p', 'pt', 'a4');
    //pdf.setFontSize(18);
    pdf.fromHTML(document.getElementById('idhtml'),
        margins.left, // x coord
        margins.top,
        {
            // y coord
            width: margins.width // max width of content on PDF
        },
        function(dispose)
        {
            //headerFooterFormatting(pdf, pdf.internal.getNumberOfPages());
            pdf.save('Test.pdf');            
        },
        margins
    );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.min.js" crossorigin="anonymous"></script>

<ul id="idhtml">
	<li>Some text 1</li>
	<li>Some text 2</li>
	<li>Some text 3</li>
</ul>
<button onclick="genIdCards()">Generate PDF</button>

编辑：

在您改变问题后，我试图为您找到新的解决方案。不幸的是 jsPDF 不支持 CSS。仅支持简单的 HTML。但是我为您编写了没有 CSS 的新解决方案：

请在 codepen.io 上执行 this snippet 并查看 PDF。