1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Export / Convert Website to PDF

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

0
  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