将页面另存为pdf并上传到服务器

时间:2015-05-12 03:07:43

标签: javascript php pdf

我有网页表单,我的工作人员填写了各种用途,我希望保存已完成的表单本身并将其转换为PDF,然后我可以将其上传到我的数据库并存储以供参考。

例如,以下是我希望在用户输入字段后能够另存为pdf的表单:

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 and container setup */

/* Set a max-width for horizontal fluid layout and make it 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 for 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 and 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 for search text */
 .smalltext {
    font-size:xx-small;
    color:#ABABAB;
}
.error {
    color:red;
    font-weight:bold;
}
/* text for footer that goes against background */
 .bgtext {
    color: silver;
}
/* Form Error Code */
 input.error {
    background: red;
    color: white;
}
/* Form Error Code */
 label.error {
    color: red;
}
/* END 
** Typography */

从2007年到2011年,我搜索过的所有资源似乎都是非常古老的项目。

理想的工作流程如下: 1.用户填写网络表单 2.提交webform后,页面将呈现为pdf格式 3.然后将pdf上传到我的数据库

使用php或javascript实现此目的的最佳方式是什么?

1 个答案:

答案 0 :(得分:-1)

正如Dagon在下面指出的那样,有一个名为TCPDF的PHP类(注释中有一个链接)应该适合你。

Anther选项是FPDF,它也是一个允许您制作PDF文件的PHP类。这似乎适用于类似的问题Best way to create a PDF with PHP。他们甚至有一个tutorial页面。警告:此选项最近已更新。