jsPdf is not working with css

3.1k views Asked by At

Iam trying to convert from html to pdf conversion. So that iam using jspdf plugin in my project

<script type="text/javascript" src="../../../../resources/jspdf/html2canvas.js"></script>
    <script type="text/javascript" src="../../../../resources/jspdf/jspdf.js"></script>
<script type="text/javascript" src="../../../../resources/jspdf/jspdf.plugin.addimage.js"></script>
<script type="text/javascript" src="../../../../resources/jspdf/jspdf.plugin.cell.js"></script>
<script type="text/javascript" src="../../../../resources/jspdf/jspdf.plugin.from_html.js"></script>
<script type="text/javascript" src="../../../../resources/jspdf/jspdf.plugin.ie_below_9_shim.js"></script>
<script type="text/javascript" src="../../../../resources/jspdf/jspdf.plugin.javascript.js"></script>
<script type="text/javascript" src="../../../../resources/jspdf/jspdf.plugin.sillysvgrenderer.js"></script>
<script type="text/javascript" src="../../../../resources/jspdf/jspdf.plugin.split_text_to_size.js"></script>
<script type="text/javascript" src="../../../../resources/jspdf/jspdf.plugin.standard_fonts_metrics.js"></script>
<script type="text/javascript" src="../../../../resources/jspdf/jspdf.PLUGINTEMPLATE.js"></script>
<script type="text/javascript" src="../../../../resources/jspdf/jquery-1.7.1.min.js"></script>

<script type="text/javascript">
    $(document).ready(function(){
        var specialElementHandlers = {
            '#editor': function (element,renderer) {
                return true;
            }
        };
        $('#generatePdf').click(function () {
            var doc = new jsPDF();
            var source = $('#cisForm').html();
            var specialElementHandlers = {
                '#bypassme': function (element, renderer) {
                    return true;
                }
            };

            /*doc.fromHTML(source, 0.5, 0.5, {
                'width': 75,'elementHandlers': specialElementHandlers
            });
            */

            doc.addHTML($('body'), function () {
                 doc.save('Test.pdf');
             });
            doc.output("dataurlnewwindow");
        });
    });
</script>

Before i tried with doc.fromHTML().

I have changed to doc.addHTML() from canvas js because of css is not supported.

But Now im getting error on

Uncaught TypeError: doc.addHTML is not a function

Here What is the problem. Will it work with css files

2

There are 2 answers

0
Diego Alexandre On

You need to import the html2canvas file first!

<script type="text/javascript" src="html2canvas.js"></script>
0
Shalini On

Use this

var source = $('#cisForm')[0];
doc.addHTML(source, function () {
             doc.save('Test.pdf');
         });