Export / Convert Website to PDF

Discussion in 'JavaScript' started by samuvk, Sep 29, 2015.

  1. #1
    I would like to know how can I export a HTML or website document to PDF.

    The idea would be to have a buttom to click and convert the document.

    I tried this but I get and error in var conv = new ActiveXObject("pdfServMachine.converter"); --> "Element ActiveXObject is not defined"
    
    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript">
    
      function init() {
        var conv = new ActiveXObject("pdfServMachine.converter");
        conv.convert("http://www.google.com", "c:\\google.pdf", false);
        WScript.Echo("finished conversion");
       }
    </script>
    </head>
    <body>
    Here is content of the site
    <div id="init"> 
     <button onclick="init()">Export to  PDF</button>
    </body>
    </html>
    Code (markup):
    Also tried this but not sure how to use the jspdf. Get an error in line: printDoc.fromHTML($('#pdf').get(0), 10, 10, {'width': 180}); --> "$ is not defined"

    <!DOCTYPE html>
    <html>
    <head>
        <title>html2canvas example</title>
        <script type="text/javascript" src="js/jspdf.js"></script>
        <script type="text/javascript" src="js/plugins/addimage.js"></script>
        <script type="text/javascript" src="js/plugins/standard_fonts_metrics.js"></script>
        <script type="text/javascript" src="js/plugins/split_text_to_size.js"></script>
        <script type="text/javascript" src="js/plugins/from_html.js"></script>
        <script type="text/javascript">
    
    
    function printPDF() {
        var printDoc = new jsPDF();
        printDoc.fromHTML($('#pdf').get(0), 10, 10, {'width': 180});
        printDoc.autoPrint();
        printDoc.output("dataurlnewwindow"); // this opens a new popup,  after this the PDF opens the print window view but there are browser inconsistencies with how 
    
    this is handled
    }
    
    
    var doc = new jsPDF(); 
    var specialElementHandlers = { 
        '#editor': function (element, renderer) { 
            return true; 
        } 
    };
    
    
      </script>
    </head>
    <body>
    Content of the Site
    
    <button onclick="printPDF()">Export to  PDF</button>
    </body>
    </html>
    Code (markup):

    THANK YOU SO MUCH
     
    samuvk, Sep 29, 2015 IP
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #2
    jsPDF needs a javascript-base library to work correctly. From the code you pasted, you need to be running jQuery as well. Add jQuery before the jsPDF-files.
     
    PoPSiCLe, Sep 29, 2015 IP
  3. samuvk

    samuvk Greenhorn

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #3
    Thank you for your reply.

    I added but still getting the error in line: printDoc.fromHTML($('#pdf').get(0), 10, 10, {'width': 180}); --> "$ is not defined"

    Thanks again

    <!DOCTYPE html>
    <html>
    <head>
        <title>html2canvas example</title>
        <script src="jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="js/jspdf.js"></script>
        <script type="text/javascript" src="js/plugins/addimage.js"></script>
        <script type="text/javascript" src="js/plugins/standard_fonts_metrics.js"></script>
        <script type="text/javascript" src="js/plugins/split_text_to_size.js"></script>
        <script type="text/javascript" src="js/plugins/from_html.js"></script>
        <script type="text/javascript">
    
    
    function printPDF() {
        var printDoc = new jsPDF();
        printDoc.fromHTML($('#pdf').get(0), 10, 10, {'width': 180});
        printDoc.autoPrint();
        printDoc.output("dataurlnewwindow"); // this opens a new popup,  after this the PDF opens the print window view but there are browser inconsistencies with how 
    
    this is handled
    }
    
    
    var doc = new jsPDF(); 
    var specialElementHandlers = { 
        '#editor': function (element, renderer) { 
            return true; 
        } 
    };
    
    
      </script>
    </head>
    <body>
    Content of the Site
    
    <button onclick="printPDF()">Export to  PDF</button>
    </body>
    </html>
    
    Code (markup):
     
    samuvk, Sep 29, 2015 IP
  4. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #4
    You need to actually USE jquery too. Why...
    Wrap the current js you have inside this:
    
    $(document).ready(function() {
    //existing code goes here
    })
    
    Code (markup):
    And see if that works. If it doesn't, have another look at the actual examples on the page where you got the jsPDF-plugin - especially the way the javascript is included in the examples.
     
    PoPSiCLe, Sep 29, 2015 IP
  5. samuvk

    samuvk Greenhorn

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #5
    I did that and couldn't make work either.

    Thanks again

    
    <!DOCTYPE html>
    <html>
    <head>
        <title>html2canvas example</title>
        <script src="jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="ExportPDF.js"></script>
        <script type="text/javascript" src="js/jspdf.js"></script>
        <script type="text/javascript" src="js/plugins/addimage.js"></script>
        <script type="text/javascript" 
    
    src="js/plugins/standard_fonts_metrics.js"></script>
        <script type="text/javascript" src="js/plugins/split_text_to_size.js"></script>
        <script type="text/javascript" src="js/plugins/from_html.js"></script>
        <script type="text/javascript">
    
    function printPDF() {
        var printDoc = new jsPDF();
        printDoc.fromHTML($('#pdf').get(0), 10, 10, {'width': 180});
        printDoc.autoPrint();
        printDoc.output("dataurlnewwindow"); // this opens a new popup,  after this the 
    
    PDF opens the print window view but there are browser inconsistencies with how this 
    
    is handled
    }
    var doc = new jsPDF(); 
    var specialElementHandlers = { 
        '#editor': function (element, renderer) { 
            return true; 
        } 
    };
      </script>
    </head>
    <body>
    Content of the Site
    
    <button onclick="printPDF()">Export to  PDF</button>
    </body>
    </html>
    
    Code (markup):
    And this is the Code in the file named: ExportPDF.js

    
    $(document).ready(function() {
    //existing code goes here
    })
    
    Code (markup):
     
    samuvk, Sep 30, 2015 IP
  6. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #6
    Eh, what?
    *headdesk*
    Do THIS:
    
    <script type="text/javascript">
    $(document).ready(function() {
    
    function printPDF() {
    var printDoc = new jsPDF();
    printDoc.fromHTML($('#pdf').get(0), 10, 10, {'width': 180});
    printDoc.autoPrint();
    printDoc.output("dataurlnewwindow"); // this opens a new popup, after this the
    PDF opens the print window view but there are browser inconsistencies with how this
    
    is handled
    }
    var doc = new jsPDF();
    var specialElementHandlers = {
    '#editor': function (element, renderer) {
    return true;
    }
    };
    })
    </script>
    
    Code (markup):
     
    PoPSiCLe, Oct 1, 2015 IP