Javascript 基于HTML的手册/传单_Javascript_Php_Html_Css

Javascript 基于HTML的手册/传单

javascript php html css

Javascript 基于HTML的手册/传单,javascript,php,html,css,Javascript,Php,Html,Css,我想知道是否有可能创建一个html类型的小册子，可以打印或保存为pdf，但html模板将有一些事情，用户可以修改，如添加自己的图像，把细节和排序的描述我更喜欢使用javascript、html、css和php（如有必要）我现在有点被困在我创建了一个html表单的那一刻，所以它不会比这更进一步是否有一个api，我可以使用它来创建多个模板，并允许用户添加他们需要的内容以下是目前的表格： <%@ Page Language="VB" AutoEventWireup="false" Cod

我想知道是否有可能创建一个html类型的小册子，可以打印或保存为pdf，但html模板将有一些事情，用户可以修改，如添加自己的图像，把细节和排序的描述

我更喜欢使用javascript、html、css和php（如有必要）

我现在有点被困在我创建了一个html表单的那一刻，所以它不会比这更进一步

是否有一个api，我可以使用它来创建多个模板，并允许用户添加他们需要的内容

以下是目前的表格：

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="FlyCreator.aspx.vb" Inherits="FlyCreator" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Flyer Creator test</title>
<link rel="stylesheet" type="text/css" href="css/mainFlyer.css" media="all">
<script type="text/javascript" src="jquery/view.js"></script>

</head>
<body id="main_body" >

<div id="form_container">

<h1><a>Untitled Form</a></h1>
<form id="form_Flyer" class="appnitro" enctype="multipart/form-data" method="post" action="">
<div class="form_description">
<%--<h2>Flyer Creator Test</h2>--%>
</div>
<ul >
     <li class="section_break">
        <h3>Name and Title:</h3>
         <p>Leave fields blank if they are not needed</p>
    </li> 

<li id="li_1" >
    <label class="description" for="element_1">Name </label>
     <span>
         <input id="element_1_1" name= "element_1_1" class="element text" maxlength="255" size="20" value=""/>
         <label>First</label>
    </span>
     <span>
        <input id="element_1_2" name= "element_1_2" class="element text" maxlength="255" size="20" value=""/>
        <label>Last</label>
    </span> 
    <span>

    <input id="element_1_3" name="element_1_3" class="element text" maxlength="50" size="40" />
       <label>Title</label>
        </span>
</li>
    <li class="section_break">
<h3>Business Address:</h3>
<p></p>
</li>
    <li id="li_3" >
        <div>
            <input id="element_3_1" name="element_3_1" class="element text" maxlength="35" size="30" />
            <label>Company Name</label>
         </div>
        <div>
            <input id="element_3_2" name="element_3_2" class="element text" value="" type="text" maxlength="35" size="30"/>
            <label for="element_3_1">Street Address</label>
        </div>

        <div class="left">
            <input id="element_3_3" name="element_3_3" class="element text medium" value="" type="text"/>
            <label for="element_3_2">City</label>
        </div>
        <div class="right">
            <input id="element_3_4" name="element_3_3" class="element text medium" value="" type="text"/>
            <label for="element_3_4"> Province / Region</label>
        </div>
        <div class="left">
            <input id="element_3_5" name="element_3_5" class="element text medium" maxlength="15" value="" type="text"/>
            <label for="element_3_5">Postal / Zip Code</label>
        </div>
</li>
<li class="section_break">
<h3>Phones,Emails, and Website:</h3>
<p></p>
</li>
    <li id="li_21" >
        <label class="description" for="element_21" style="text-align:left;color:black"><b>phone no1 :</b> </label>
        <div>
        <select class="element select medium" id="element_21" name="element_21"> 
            <option value="" selected="selected">Choose Label</option>
            <option value="1" >home</option>
            <option value="2" >office</option>
            <option value="3" >cell</option>
            <option value="4" >fax</option>
        </select>
            <input name="ph11" value="" maxlength="3" type="text" id="ph11" size="3"/>
            <input name="ph12" value="" maxlength="3" type="text" id="ph12" size="3"/>
            <input name="ph13" value="" maxlength="4" type="text" id="ph13" size="3"/>
</div> 
</li>
    <li id="li_22" >
        <label class="description" for="element_22">phone no2: </label>
        <div>
            <select class="element select medium" id="element_22" name="element_22"> 
                <option value="" selected="selected">Choose Label</option>
                <option value="1" >home</option>
                <option value="2" >office</option>
                <option value="3" >cell</option>
                <option value="4" >fax</option>
            </select>
                <input name="ph21" value="" maxlength="3" type="text" id="ph21" size="3"/>
                <input name="ph22" value="" maxlength="3" type="text" id="ph22" size="3"/>
                <input name="ph23" value="" maxlength="3" type="text" id="ph23" size="3"/>
        </div> 
</li>
    <li id="li_23" >
        <label class="description" for="element_23">phone no3: </label>
            <div>
                <select class="element select medium" id="element_23" name="element_23"> 
                    <option value="" selected="selected">Choose label</option>
                    <option value="1" >home</option>
                    <option value="2" >office</option>
                    <option value="3" >cell</option>
                    <option value="4" >fax</option>
                </select>
                  <input name="ph31" value="" maxlength="3" type="text" id="ph31" size="3"/>
                  <input name="ph32" value="" maxlength="3" type="text" id="ph32" size="3"/>
                  <input name="ph33" value="" maxlength="3" type="text" id="ph33" size="3"/>
            </div> 
</li>
    <li id="li_5" >
        <label class="description" for="element_5">Email : </label>
            <div>
                 <input id="element_5" name="element_5" class="element text medium" type="text" maxlength="255" value=""/> 
            </div> 
</li>
    <li id="li_6" >
        <label class="description" for="element_6">company or personal website: </label>
            <div>
                 <input id="element_6" name="element_6" class="element text medium" type="text" maxlength="255" value="http://"/> 
            </div> 
</li>
    <li class="section_break">
<h3>Section Break</h3>
<p></p>
</li>       <li id="li_8" >
<label class="description" for="element_8">Photo of your self </label>
<div>
<input id="element_8" name="element_8" class="element file" type="file"/> 
</div>  
</li>       <li id="li_9" >
<label class="description" for="element_9">Main photo of house </label>
<div>
<input id="element_9" name="element_9" class="element file" type="file"/> 
</div>  
</li>       <li id="li_10" >
<label class="description" for="element_10">interior 1 </label>
<div>
<input id="element_10" name="element_10" class="element file" type="file"/> 
</div>  
</li>       <li id="li_11" >
<label class="description" for="element_11">house 2 </label>
<div>
<input id="element_11" name="element_11" class="element file" type="file"/> 
</div>  
</li>       <li id="li_12" >
<label class="description" for="element_12">house 3 </label>
<div>
<input id="element_12" name="element_12" class="element file" type="file"/> 
</div>  
</li>       <li id="li_13" >
<label class="description" for="element_13">company logo </label>
<div>
<input id="element_13" name="element_13" class="element file" type="file"/> 
</div>  
</li>
    <li id="li_14" >
<label class="description" for="element_14">qr code </label>
<div>
<input id="element_14" name="element_14" class="element file" type="file"/> 
</div>  
</li>
    <li id ="li_15">
        <label class="description" for="element_15">Opional IEASA logo</label><img src="images/ieasa.gif" />
        <div >
            <input id="element_15a" name="select1" value="on" type="radio" />On<br />
            <input id="element 15b" name="select1" value="on" type="radio" />Off<br />
        </div>
    </li>

    <li class="section_break">
<h3></h3>
<p></p>
</li>
    <li id="li_16" >
        <label class="description" for="element_16">Property Information:</label>

<div>
<input id="element_16_1" name="element_16_1" class="element text large" value="" type="text"/>
<label for="element_16_1">Street Address</label>
</div>

<div>
<input id="element_16_2" name="element_16_2" class="element text large" value="" type="text"/>
<label for="element_16_2">Address Line 2</label>
</div>

<div class="left">
    <input id="element_16_3" name="element_16_3" class="element text medium" value="" type="text"/>
    <label for="element_16_3">City</label>
</div>

<div class="right">
    <input id="element_16_4" name="element_16_4" class="element text medium" value="" type="text"/>
    <label for="element_16_4"> Province / Region</label>
</div>

<div class="left">
    <input id="element_16_5" name="element_16_5" class="element text medium" maxlength="15" value="" type="text">
    <label for="element_16_5">Postal / Zip Code</label>
</div>

</li>
    <li id="li_17" >
        <label class="description" for="element_17">Description of property </label>
            <div>
              <textarea id="element_17" name="element_17" class="element textarea medium"></textarea> 
            </div> 
</li>
    <li id="li_18" >
        <label class="description" for="element_18">property details </label>
            <div>
              <textarea id="element_18" name="element_18" class="element textarea medium"></textarea> 
            </div> 
</li>
    <li id="li_19" >
        <label class="description" for="element_19">property details 2 </label>
            <div>
                <textarea id="element_19" name="element_19" class="element textarea medium"></textarea> 
            </div> 
</li>
    <li id="li_20" >
        <label class="description" for="element_20">property details 3 </label>
            <div>
              <textarea id="element_20" name="element_20" class="element textarea medium"></textarea> 
            </div> 
</li>

<li class="buttons">
<input type="hidden" name="form_id" value="745249" />

<input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" />
</li>
</ul>
</form>
<div id="footer">
</div>
</div>
</body>
</html>


传单创建者测试
无标题表格


姓名和职务：
如果不需要，请将字段留空


名称
弗斯特
最后
标题


营业地址：



公司名称
街道地址
城市
省/地区
邮政编码


电话、电子邮件和网站：



第一号电话：
选择标签
家
办公室
细胞
传真


电话号码:
选择标签
家
办公室
细胞
传真


第三号电话：
选择标签
家
办公室
细胞
传真


电邮：


公司或个人网站：


分段


你自己的照片

房子的主要照片

内部1

房子2

第三栋

公司标志


二维码


个人IEASA标志
在

关闭






物业资料：
街道地址
地址行2
城市
省/地区
邮政编码


财产说明


物业详情


物业详情2


物业详情3

要创建并随后保存/打印pdf，您可以尝试使用“DOMPDF”。它很容易使用，效果也很好。基本上，您要做的是像往常一样使用html/css/php等创建应用程序和用户选项。添加您的调整等

完成后，将结果封装在一个名为……的php变量中，目前称为“

$html

”，然后在你的处理页面里面，你会放一些

$dompdf = new DOMPDF(); 
$dompdf->load_html($html);
$dompdf->render();
$dompdf->stream("YOURPDFNAMEHERE.pdf");
?>

domPDF库将创建一个包含html的pdf

看看

祝你好运

编辑*** 要对此进行扩展，请假设所有编辑/用户选择的结果都是如下所示的html：

(random code)
<table >
    <tr>
        <td><img src="logo.jpg" alt=""></td>
    </tr>

<tr>
    <td width="420" style="background-color:#f00; color:#fff;">lopan?</td>
    <td>lopan right</td>
</tr>



</table>

获取您的$html内容并相应地创建pdf。

完成后，将结果封装在一个名为……的php变量中，目前称为“

$html

”，然后在你的处理页面里面，你会放一些

$dompdf = new DOMPDF(); 
$dompdf->load_html($html);
$dompdf->render();
$dompdf->stream("YOURPDFNAMEHERE.pdf");
?>

domPDF库将创建一个包含html的pdf

看看

祝你好运

编辑*** 要对此进行扩展，请假设所有编辑/用户选择的结果都是如下所示的html：

(random code)
<table >
    <tr>
        <td><img src="logo.jpg" alt=""></td>
    </tr>

<tr>
    <td width="420" style="background-color:#f00; color:#fff;">lopan?</td>
    <td>lopan right</td>
</tr>



</table>

获取$html内容并相应地创建pdf。

也许您可以尝试使用Photoshop制作两个模板，然后如果用户完成并按下提交按钮，您可以尝试将所有信息发送到临时数据库。发送时，您可以检索数据并将其放在您的模板中的div中。因此，当从数据库接收数据时，数据将被放置在div中。你不必使用数据库，但也许这会给你一个如何实现目标的想法，好运气，尽量限制数据库中的信息量，因为小册子中也会有图像。我目前使用的是我在photoshop中创建的一本手册，但我不能100%确定如何将所选信息输入到创建的部分中。也许你可以尝试使用photoshop制作一些模板，然后如果用户完成并按下提交按钮，你可以尝试将所有信息发送到临时数据库。发送时，您可以检索数据并将其放在您的模板中的div中。所以当t