堆栈内存溢出
  简体   繁体   English

HTML无法使用JSPDF传输到PDF

[英]HTML not transferring to PDF using JSPDF

 原文  2018-07-29 10:12:06  0   2    javascript/ jspdf

问题描述

I am trying to use jspdf to print div element into pdf. 我正在尝试使用jspdf将div元素打印为pdf。 However its giving me margin error.I am not sure where I am going wrong. 但是它给了我保证金错误。我不确定我要去哪里。 I have added margins but its coming in line bey line and is missing CSS which I have written. 我添加了边距，但是它排在了贝伊行的前面，并且缺少我编写的CSS。 As requested I have added the HTML code as well. 根据要求，我还添加了HTML代码。

Below is the js I have written 下面是我写的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 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;
}

below is the html 下面是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>

2 个解决方案

解决方案1
 0  2018-07-29 11:04:02

Move out the pdf.save() from function(dispose){} , below is the working one 从function(dispose){}移出pdf.save() ，以下是pdf.save() 

 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>

解决方案2
 0  2018-07-29 11:09:34

I wrote for you the working solution. 我为您写了可行的解决方案。 You do not have to change the position of pdf.save('Test.pdf'); 您不必更改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>

Edit: 编辑：

After your question changing I have tried to find new solution for you. 您的问题更改后，我已尝试为您找到新的解决方案。 Unfortunatelly jsPDF does not support the CSS. 不幸的是，jsPDF不支持CSS。 Only simple HTML will be supported. 仅支持简单的HTML。 But I wrote the new solution for you without CSS: 但是我没有CSS为您编写了新的解决方案：

Please execute this snippet on codepen.io and see the PDF. 请在codepen.io上执行此代码段并查看PDF。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 使用jsPDF将html导出为pdf - Export html to pdf using jsPDF 下载HTML <div> 使用jsPDF转换为pdf - download html <div> into pdf using jsPDF 使用jsPDF将HTML字符串呈现为PDF文档 - Using jsPDF to render an HTML string into a PDF document 使用jspdf的HTML到PDF转换器按钮 - A HTML to PDF converter button using jspdf 使用jsPDF将HTML输入值导出为PDF - Exporting HTML input values to PDF using jsPDF Javascript：使用jsPDF将html窗口另存为pdf - Javascript: Save html window as pdf using jsPDF 无法使用 jsPDF 将 HTML 转换为 PDF - Unable to convert HTML to PDF using jsPDF 使用jspdf库将html文件转换为pdf - converting html file into pdf using jspdf library 使用jsPDF将HTML字符串转换为PDF - Convert HTML String to PDF Using jsPDF 使用jsPDF将HTML内容转换为PDF文件 - Converting HTML content to PDF file using jsPDF
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM