html输入为pdf格式

时间:2019-10-31 03:08:31

标签: javascript php html pdf

您能帮我如何将它打印成带有输入值的pdf表格。 对不起,我只是一个学生,我的上司需要这个项目来完成我的输出

并且由于身体上的限制,我无法添加我的物化js和CSS 我为表的新行添加了一个添加按钮,并带有可以将其打印到pdf的输入。只是帮助我转换为pdf,我可以处理pdf中的其余格式

<!DOCTYPE html>
<html>

<head>
  <!--Import Google Icon Font-->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!--Import materialize.css-->
  <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" />
  <link type="text/css" rel="stylesheet" href="css/main.css" />

  <!--Let browser know website is optimized for mobile-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Bureau of Internal Revenue</title>
</head>

<body class="scrollspy bg">
<nav>
    <div class="nav-wrapper white" >
        <div class="container">
            <img src="img/download.png" style="width:5%; margin-top:3px; " alt="" class="responsive-image">
            <a href="" style="margin-left:1%;" class="brand-logo black-text">  Bureau of Internal Revenue
            <ul id="nav-mobile" class="right hide-on-med-and-down">
                <li><a href="#create" class=" btn btn-black waves-effect waves-light modal-trigger black-text btn">Create</a></li>
               
            </ul>
        </a></div>
    </div>
</nav>
<div class="showcase container">
    <div class="bg-showcase">
    <div class="row">
        <div class="col s12 m10 offset-m1 center">
            <br>
            <br>
            <br>
            <br>
            <h1 class="white-text center"><b>Welcome</b></h1>
            <h1 class="center white-text"><b>to</b></h1>
            <h1 class="center white-text"><b>Bureau of Internal Revenue</b></h1>
        </div>
        </div>
    </div>
</div>
<form action="">
<div class="row">
        <div class="col s12 l10 offset-l1">
            <div class="card">
                <div class="card-content">
                    <div class="">
                        <h3><b>Index of Success Indicators</b></h3>
                        <table class="striped">
                        <thead>
   
                            <tr>
                                <th>Major Final Outputs</th>
                                <th>Performance Measures</th>
                                <th>Performance Targets</th>
                                <th>Success Indicator 
                                    <p>(Measure + Target)</p></th>
                                <th>Organization Outcome Sectoral Goals</th>
                            </tr>
                            </thead>
                            <thead>
                                <tr>
                                    <th>A. Strategic Priority</th>
                                </tr>
                            </thead>
                            <tbody class="line">
                                <tr>
                                    <th><a href="#" class="addline">New Row</a></th>
                                </tr>
                            </tbody>
                            <thead>
                            <tr>
                                <th>B. Core Function</th>
                            </tr>
                              </thead>
                              <tbody class="line">
                                    <tr>
                                        <th><a href="#" class="addline">New Row</a></th>
                                    </tr>
                                </tbody>
                        <thead>
                            <tr>
                                <th>C. Support Function</th>
                            </tr>
                        </thead>
                        <tbody class="line">
                                <tr>
                                    <th><a href="#" class="addline">New Row</a></th>
                                </tr>
                            </tbody>

                       </table>
                       <div class="center"><input type="button" value="Create PDF" class="btn btn-black" onclick="demoFromHTML()"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>


<footer class="page-footer grey darken-3">
    <div class="container">
        <div class="row">
            <div class="col s12 l6">
                <h4>Links</h4>
                <ul>
                    <li><a href="index.html" class="grey-text text-lighten-2">Home</a></li>
                    <li><a href="#backtotop" class="grey-text text-lighten-2">Back to Top</a></li>
                    <li><a href="developer.html" class="grey-text text-lighten-2">About Developer</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="footer-copyright grey darken-2">
        <div class="container">Bureau of Internal Revenue &copy; 2019</div>
    </div>
</footer>
</body>
<div id="create" class="modal">
    <ul class="container center" style="margin-bottom: 3%;">
        <h2>Create</h2>
        <a href="isi.html" class="btn center"><li>Index of Success Indicators</li></a>
        <br><br>
            <a href="pmc.html" class="btn center"><li>Performance Monitoring and Coaching</li></a>
            <br><br>    <a href="cscidp.html" class="btn center"><li>CSC Individual Development Plan</li></a>
                <br><br>    <a href="ipcr.html" class="btn center"><li>Individual Performance Commitment And Review</li></a>
    </ul>
    <div class="modal-footer">
        <a href="" class="modal-trigger modal-close btn-flat">close</a>
    </div>
</div>
  <!--Import jQuery before materialize.js-->
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script type="text/javascript" src="js/materialize.min.js"></script>
  <script>
    $(document).ready(function () {
      // Init Sidenav
      $('.button-collapse').sideNav();
      // Scrollspy
      $('.scrollspy').scrollSpy();
    $('.modal').modal({
        dismissible:true,
        inDuration:300,
        outDuration:200,
        ready:function(modal,trigger){
            console.log('Modal Open',modal,trigger);
        }
    });
    jQuery(function(){  


var counter = 1;
jQuery('a.addline').click(function(event){
    event.preventDefault();
    
    var newRow =jQuery('<tr class="number">'+
    counter +' <th><input type="text" name="" class="center" id=""/></th>'+
    counter +' <th><input type="text" name="" class="center" id=""/></th>'+
    counter +' <th><input type="text" name="" class="center" id=""/></th>'+
    counter +' <th><input type="text" name="" class="center" id=""/></th>'+ 
    counter + '<th><input type="text" name="" class="center" id=""/></th>' + 
    counter + '<th><button type="button" class="deletebtn" title="Remove row">X</button></th>');
    counter ++;
    jQuery('tbody.line').append(newRow);
});
});

function demoFromHTML(){
    var pdf= new jsPDF('p','pt','letter');

    source = $('#isi')[0];

    specialElementHandlers={

        '#bypassme':function(element,renderer){
            return true
        }
    };
    margins = {
        top:80,
        bottom:60,
        left:40,
        width:552
    };

    pdf.fromHTML(
        source,
        margins.left,
        margins.top, {
            'width':margins.width,
            'elementHanlders':specialElementHandlers
        },
        function(dispose){
            pdf.save('testing.pdf');

        }
    ,margins);
};

  
    });

  </script>
</body>

</html>

0 个答案:

没有答案