简体   繁体   English

无法通过jsPDF从Html div制作PDF

[英]Cannot make PDF from Html div by jsPDF

I have this js code : 我有这个js代码:

var doc = new jsPDF();

$('#pdf_new').click(function(){
    var html=$(".wrap_all").html();
    doc.fromHTML(html,200,200, {
        'width': 500,
    });
    doc.save("Test.pdf");
});

In html I have code like this : 在HTML中我有这样的代码:

<div class = 'wrap_all'>
    <div id = 'wrap_odd'> <div id = ''>....</div> </div>

    <div id = 'wrap_even'> <div id = ''>....</div> </div>
</div>

Nothing works ... Console return to me: 什么都行不通......控制台回复给我:

Cannot read property #wrap_odd of undefined" 无法读取未定义的属性#wrap_odd

(PS sorry for my English) (PS对不起我的英文)

When using 'fromHTML' to take text from a HTML from for the PDF you are creating using JSPDF, you should have an elementHandler function to render out the unwanted < div > . 当使用'fromHTML'从您正在使用JSPDF创建的PDF中获取HTML文本时,您应该有一个elementHandler函数来呈现不需要的<div>

Try following the same patern as shown in the example at JSPDF@GitHub . 尝试遵循JSPDF @ GitHub 示例中显示的相同patern

your end code should look like this: 您的结束代码应如下所示:

var doc = new jsPDF();

    var specialElementHandlers = {
      'DIV to be rendered out': function(element, renderer){
       return true;
    }
    };


    $('#pdf_new').click(function(){
      var html=$(".wrap_all").html();
         doc.fromHTML(html,200,200, {
            'width': 500,
            'elementHandlers': specialElementHandlers
         });
      doc.save("Test.pdf");
    });

Check this .. this display whole content 检查一下..这显示整个内容

     <head>
        <script src="https://code.jquery.com/jquery-git.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/0.9.0rc1/jspdf.min.js"></script>
<script type="text/javascript">
        $(window).on('load', function () {
            var doc = new jsPDF();
            var specialElementHandlers = {
                '#editor': function (element, renderer) {
                    return true;
                }
            };
            $('#pdfview').click(function () {
                doc.fromHTML($('#pdfdiv').html(), 15, 15, {
                    'width': 100,
                    'elementHandlers': specialElementHandlers
                });
                doc.save('file.pdf');
            });
        });
    </script>
    </head>
     <div id="pdfdiv">
                <h3 style="color:green;">WWW.SANWEBCORNER.COM</h3>
                <img src="404.png">
                <p>A newspaper acts an important medium to control corruption and scams. The chief topics of general interest in newspaper includes politics, social issues, sports, economy, movies, and share market.

    Newspaper is a mode of mass communication. It is very helpful in creating social awareness. Newspaper raises voices against social issues such as child labor, dowry system, etc. They urge the common people to act and behave in a rational manner.

    We get the information of the forthcoming movies and television shows through a newspaper. It also contains a list of multiplexes with time-schedule for the movies.

    A wide coverage of information is obtained at low cost though newspaper. It also influences the habit of thinking in men. It has also seen that illiterate adults are taking up education to read newspaper.

    There are such dailies that trade on such dirty tricks for survival. Being politically left or right, they misrepresent strikes and lockouts. Events like bank robbery and train accident or similar untoward events are distorted or exaggerated. They deliberately make their news sensational because it appeals to the less educated and less cultured more directly.

    The dignity and reputation of a newspaper rests on the degree of their fidelity to truth and fearless reporting. It is our cheapest and most powerful weapon in the last analysis.</p>
            </div>
            <div id="editor"></div>
            <button id="pdfview">Download PDF</button>

Just a word of caution: be careful of the placement of elements in the printable element container ! 请注意: 小心在可打印元素容器中放置元素

It seems as if jsPDF is very sensitive to elements being just right. 似乎jsPDF对正确的元素非常敏感。 This includes images and links. 这包括图像和链接。

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

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM