通过在页面末尾添加一个按钮,将我的网页内容自动转换为pdf

I want to convert the content of my webpage into pdf and I want this to be made automatically by adding a button at the end of my page.

I found this website (http://www.web2pdfconvert.com/) that gives you some lines of code but it does not work , to be more specific I can add the button but the result is an empty pdf page.

HERE IS THE CODE...

    <html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script> 
$(function(){   
   $('#fileContents').val(document.documentElement.innerHTML);

});
</script>
<style>
div {
    width: 600px;
    border-style: solid;
    border-width: 1px;
}
</style>

</head>
<body>
<form action="download.php" method="post">
<div>
<img src="images/europass_logo.jpg" alt="EUROPASS LOGO" width="100" height="100">

<?php
$dbhost  = 'localhost';    
$dbname  = 'cvtool';       
$dbuser  = 'root';  
$dbpass  = 'smogi';   

mysql_connect($dbhost, $dbuser, $dbpass) or die(mysql_error());
mysql_select_db($dbname) or die(mysql_error());


function queryMysql($query)
{
    $result = mysql_query($query) or die(mysql_error());
     return $result;
}


    $personal_info = queryMysql("SELECT name,email,city,phone FROM personal_information WHERE username='niklakis'");
    $portfolio = queryMysql("SELECT username,portfolio,portfolio_description FROM portfolio WHERE username='niklakis'");
    $work = queryMysql("SELECT job_title,company,website,start_date,end_date,start_year,end_year FROM work WHERE username='niklakis'");
    $education = queryMysql("SELECT school,degree,website,start_date,end_date,start_year,end_year,degree_description FROM education WHERE username='niklakis'");
    $skills = queryMysql("SELECT certification,issuing_authority,start_date,end_date,start_year,end_year,description FROM skills WHERE username='niklakis'");
    $text = queryMysql("SELECT text,section_content FROM text WHERE username='niklakis'");
    if (mysql_num_rows($personal_info)&& mysql_num_rows($portfolio) && mysql_num_rows($work) && mysql_num_rows($education) && mysql_num_rows($skills))
    {
        $row = mysql_fetch_row($personal_info);

        echo "<h2>Personal Information</h2>";
        echo "Full Name: ";
        echo stripslashes($row[0]) . "<br/>Email: ";
        echo stripslashes($row[1]) . "<br clear=left /><br /> City: ";
        echo stripslashes($row[2]) . "<br clear=left /><br />Phone: ";
        echo stripslashes($row[3]) . "<br clear=left /><br />";


        //ALLAGI NA PAIRNEI TO USER P EXEI LOGAREI
        $username = 'niklakis';
        echo "<h2>Education</h2>";
        while($row = mysql_fetch_row($education))
    {
        if($username != $row[0]){
            echo "School: ";
            echo stripslashes($row[0]) . "<br/>Degree: ";
            echo stripslashes($row[1]) . "<br clear=left /><br /> Website: ";
            echo stripslashes($row[2]) . "<br clear=left /><br />Start Date: ";
            echo stripslashes($row[3]) . "<br clear=left /><br />End Date: ";
            echo stripslashes($row[4]) . "<br clear=left /><br />Start Year: ";
            echo stripslashes($row[5]) . "<br clear=left /><br />End Year: ";
            echo stripslashes($row[6]) . "<br clear=left /><br />Degree Description: ";
            echo stripslashes($row[7]) . "<br clear=left /><br />";
            echo "_________________________<br></br>";
        }
        else
        {
            echo "School: ";
            echo stripslashes($row[0]) . "<br/>Degree: ";
            echo stripslashes($row[1]) . "<br clear=left /><br /> Website: ";
            echo stripslashes($row[2]) . "<br clear=left /><br />Start Date: ";
            echo stripslashes($row[3]) . "<br clear=left /><br />End Date: ";
            echo stripslashes($row[4]) . "<br clear=left /><br />Start Year: ";
            echo stripslashes($row[5]) . "<br clear=left /><br />End Year: ";
            echo stripslashes($row[6]) . "<br clear=left /><br />Degree Description: ";
            echo stripslashes($row[7]) . "<br clear=left /><br />";
        }
        $username = $row[0];
    }

        //ALLAGI NA PAIRNEI TO USER P EXEI LOGAREI
        $username = 'niklakis';
        echo "<h2>Work Experience</h2>";
         while($row = mysql_fetch_row($work))
    {
        if($username != $row[0]){
            echo "Job Title: ";
            echo stripslashes($row[0]) . "<br/>Company: ";
            echo stripslashes($row[1]) . "<br clear=left /><br /> Website: ";
            echo stripslashes($row[2]) . "<br clear=left /><br />Start Date: ";
            echo stripslashes($row[3]) . "<br clear=left /><br />End Date: ";
            echo stripslashes($row[4]) . "<br clear=left /><br />Start Year: ";
            echo stripslashes($row[5]) . "<br clear=left /><br />End Year: ";
            echo stripslashes($row[6]) . "<br clear=left /><br />";
            echo "_________________________<br></br>";
        }
        else
        {
            echo "Job Title: ";
            echo stripslashes($row[0]) . "<br/>Company: ";
            echo stripslashes($row[1]) . "<br clear=left /><br /> Website: ";
            echo stripslashes($row[2]) . "<br clear=left /><br />Start Date: ";
            echo stripslashes($row[3]) . "<br clear=left /><br />End Date: ";
            echo stripslashes($row[4]) . "<br clear=left /><br />Start Year: ";
            echo stripslashes($row[5]) . "<br clear=left /><br />End Year: ";
            echo stripslashes($row[6]) . "<br clear=left /><br />";
        }
        $username = $row[0];
    }


        //ALLAGI NA PAIRNEI TO USER P EXEI LOGAREI
        $username = 'niklakis';
        echo "<h2>Skills</h2>";
        while($row = mysql_fetch_row($skills))
    {
        if($username != $row[0]){
            echo "Certification: ";
            echo stripslashes($row[0]) . "<br/>Issuing Authority: ";
            echo stripslashes($row[1]) . "<br clear=left /><br />Start Date: ";
            echo stripslashes($row[2]) . "<br clear=left /><br />End Date: ";
            echo stripslashes($row[3]) . "<br clear=left /><br />Start Year: ";
            echo stripslashes($row[4]) . "<br clear=left /><br />End Year: ";
            echo stripslashes($row[5]) . "<br clear=left /><br />Degree Description: ";
            echo stripslashes($row[6]) . "<br clear=left /><br />";
            echo "_________________________<br></br>";
        }
        else
        {
            echo "Certification: ";
            echo stripslashes($row[0]) . "<br/>Issuing Authority: ";
            echo stripslashes($row[1]) . "<br clear=left /><br />Start Date: ";
            echo stripslashes($row[2]) . "<br clear=left /><br />End Date: ";
            echo stripslashes($row[3]) . "<br clear=left /><br />Start Year: ";
            echo stripslashes($row[4]) . "<br clear=left /><br />End Year: ";
            echo stripslashes($row[5]) . "<br clear=left /><br />Degree Description: ";
            echo stripslashes($row[6]) . "<br clear=left /><br />";
        }
        $username = $row[0];
    }



        //ALLAGI NA PAIRNEI TO USER P EXEI LOGAREI
        $username = 'niklakis';
        echo "<h2>Portfolio</h2>";
    while($row = mysql_fetch_row($portfolio))
    {

        if($username != $row[0]){
            echo "Portfolio: ";
            echo stripslashes($row[1]) . "<br/>Portfolio Description: ";
            echo stripslashes($row[2]) . "<br clear=left /><br />";
            echo "_________________________<br></br>";
        }
        else
        {
            echo "Portfolio: ";
            echo stripslashes($row[1]) . "<br/>Portfolio Description: ";
            echo stripslashes($row[2]) . "<br clear=left /><br />";         
        }
        $username = $row[0];
    }



        $row = mysql_fetch_row($text);
        echo "<h2>Text</h2>";
        echo "Text Title: ";
        echo stripslashes($row[0]) . "<br/>Content: ";
        echo stripslashes($row[1]) . "<br clear=left /><br />";

    }



?>
</div>
<input type="submit" id="createPdf" value="Download PDF"/>
</form>
</body>
</html>

AND I GET THIS ERROR ... (Can't access your local URL: http://localhost/industrial/CVTool/test.php)

The easiest way I have found to do this is to use mPDF. Note that to do this, you'll need to use PHP. You don't need to understand PHP, your file just has to be hosted on a server that has access to PHP (ie the file won't work when run from localhost, at least not without PHP).

If you are hosting the site yourself under localhost you'll need to install php. There is a nice guide available here. I believe you'd only need to do steps 1-3. Step 4 is MySQL which is for database interaction. You wont need that and I don't believe it is required.

Basically when your page loads, you use jQuery to get all of the HTML and add it to a hidden form input. When the user clicks the button you submit the form to a PHP page that creates a PDF page with the HTML and downloads the page. Pretty simple actually, mPDF does all the heavy lifting.

Here is a working example. Here is a zip file with all of the files used in my example.

Take the mpdf folder and the download.php file and drop them into the folder with your HTML file. Then change the head of your HTML like this:

<script> 
 $(function(){  
     $('#fileContents').val( document.documentElement.innerHTML);
     $('#pdfForm').append('<input type="submit"  value="Download PDF" />');
 });

</script>


....
</head>

Then later at the bottom of your html like this:

   </div>
     <form id="pdfForm" action="download.php" method="post">

            <div style="display:none;" >
              <input type="text" name="fileContents" id="fileContents" value=''/>
              <input type="text" name="fileName" id="fileName" value='mySitePage.pdf'/>
              <input type="text" name="css" value='style.css'/>

            </div>
   </form> 
  </body>
</html>