HTML не переносится в PDF с помощью JSPDF

Я пытаюсь использовать 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 : [email protected]</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>

откуда идут margins?

— 29.07.2018 12:31

@Javascript_Lover забыл добавить полный скрипт отредактировал вопрос

— 29.07.2018 12:49

Привет, @JaGaurav, все в порядке, но всякий раз, когда вы публикуете вопрос, создайте фрагмент стека stackoverflow.blog/2014/09/16/…, я сделаю это сейчас

— 29.07.2018 12:52

@JaGaurav отсылайте к этому stackoverflow.com/questions/20460035/…

— 29.07.2018 14:27

javascript jspdf

29.07.2018 12:12

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

1 827

Ответы 2

Выньте 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>

29.07.2018 13:04

Я написал для вас рабочее решение. Положение 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 и просмотрите PDF.

Спасибо за это. Он печатает данные, но в нем отсутствует CSS, который я написал

— 29.07.2018 13:34

@JaGaurav, если вы дадите мне свой HTML, я могу использовать ваш CSS.

— 29.07.2018 13:36

Добавили HTML

— 29.07.2018 14:46

@JaGaurav, я написал для вас новое решение - см. Мой ответ внизу.

— 30.07.2018 12:30

@JaGaurav, благодарность за StackOverflow осуществляется путем голосования и принятия ответа. Если вас устраивает мой ответ ниже, отметьте его как принятый слева от моего ответа и / или проголосуйте за него.

— 18.11.2018 10:58

29.07.2018 13:09