javascript - Save a page as a pdf and upload to server -
i have web forms have staff fill out various purposes save completed form , turn pdf, can upload database , store reference.
for example, here form able save pdf after user has inputted fields:
http://jsfiddle.net/davellan/e7msc41a/
html
<div class="container-fluid"> <div class="row"> <div class="col-xs-12 rcshadow"> <div class="row"> <div class="rcpage"> <div class="row"> <h1>add new contact</h1> <hr> </div> <div class="row"> <div class="panel panel-primary"> <div class="panel-heading">contact information:</div> <div class="panel-body"> <form role="form" id="newprofile" name="newprofile" style="display:inline" action="" method="post"> <input type="hidden" name="update" value="true" /> <div class="row"> <div class="col-xs-6"> <div class="form-group"> <label for="firstname">first name:</label> <input required class="form-control" type="text" id="firstname" name="firstname" value=""> </div> <div class="form-group"> <label for="middlename">middle name:</label> <input class="form-control" type="text" id="middlename" name="middlename" value=""> </div> <div class="form-group"> <label for="lastname">last name:</label> <input required class="form-control" type="text" id="lastname" name="lastname" value=""> </div> <div class="form-group"> <label for="email">email:</label> <input class="form-control" type="email" id="email" name="email" value=""> </div> <div class="form-group"> <label for="phone1">home phone:</label> <input class="form-control" type="tel" id="phone1" name="phone1" value=""> </div> <div class="form-group"> <label for="phone2">cell phone:</label> <input class="form-control" type="tel" id="phone2" name="phone2" value=""> </div> </div> <div class="col-xs-6"> <div class="form-group"> <label for="streetaddress1">address 1:</label> <input class="form-control" type="text" id="streetaddress1" name="streetaddress1" value=""> </div> <div class="form-group"> <label for="streetaddress2">address 2:</label> <input class="form-control" type="text" id="streetaddress2" name="streetaddress2" value=""> </div> <div class="form-group"> <label for="city">city:</label> <input class="form-control" type="text" id="city" name="city" value=""> </div> <div class="form-group"> <label for="state">state:</label> <input class="form-control" type="text" id="state" name="state" value=""> </div> <div class="form-group"> <label for="postalcode">zip code:</label> <input class="form-control" type="text" id="postalcode" name="postalcode" value=""> </div> </div> </div> <div class="row"> <div class="col-xs-8 col-xs-offset-2"> <div class="form-group"> <label for="leadtype">select lead type:</label> <select required class="form-control" id="leadtype" name="leadtype" value="options"> <option value="">lead type</option> <option value="14587">adult mma</option> <option value="14589">kids mma</option> <option value="14591">bootcamp</option> <option value="8673">shooting club</option> </select> </div> <div class="form-group"> <input class="btn btn-primary center-block" id="profilebutton" name="profilebutton" type="submit" value="add new profile"> </div> </div> </div> </div> </form> </div> </div> </div> </div> </div> css
/* start ** div , container setup */ /* set max-width horizontal fluid layout , make centered */ .container-fluid { margin-right: auto; margin-left: auto; max-width: 970px; } /* make background highlightable */ .highlightable:hover { background-color:#e7e7e7; } /* spacer */ .spacer { padding:10px; } /* padding */ .padding10 { padding:10px; } /* shadow page outline */ .rcshadow { -moz-box-shadow: 0px 0px 30px 10px #000; -webkit-box-shadow: 0px 0px 30px 10px #000; -khtml-box-shadow: 0px 0px 30px 10px #000; box-shadow: 0px 0px 30px 10px #000; -moz-border-radius: 0px 0px 15px 15px; border-radius: 0px 0px 15px 15px; } /* page outline */ .rcpage { background-color:#fff; padding:10px 30px 20px; margin-left:auto; margin-right:auto; -moz-border-radius: 0px 0px 15px 15px; border-radius: 0px 0px 15px 15px; } /* body */ body { margin:0; padding:0; font-size:100%; font-family:verdana, arial, 'sans serif'; background-color:#3b607e; color:#000000; } tr.clickable-row { cursor: pointer; } /* end ** div , container setup */ /* start ** typography */ h1 { font-size:2em; color:#739cbf; font-weight:bold; text-shadow: #000 1px 1px 2px; text-align:center; } h2 { font-size:1.4em; color:#3b607e; font-weight:bold; } h3 { font-size:1.4em; color:red; font-weight:bold; } h4 { font-size:1.4em; color:#000; font-weight:bold; } /* used search text */ .smalltext { font-size:xx-small; color:#ababab; } .error { color:red; font-weight:bold; } /* text footer goes against background */ .bgtext { color: silver; } /* form error code */ input.error { background: red; color: white; } /* form error code */ label.error { color: red; } /* end ** typography */ the resources have searched around seem old projects 2007 2011.
the workflow ideal follows: 1. user fills out webform 2. upon submitting webform, page rendered pdf 3. pdf uploaded database
what best way of accomplishing using php or javascript?
as dagon pointed out below there php class called tcpdf (which has link in comment) should work you.
anther option fpdf, php class lets make pdf files. seemed work similar question best way create pdf php. have have tutorial page. warning: option has been updated recently.
Comments
Post a Comment