javascript - 基于 HTML 的小册子/传单-6ren

javascript - 基于 HTML 的小册子/传单

转载作者：行者123 更新时间：2023-11-28 18:02:58

我想知道是否可以创建一个可以打印或保存为 pdf 的 html 类型的小册子，但是 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>

最佳答案

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

一旦完成，您将结果包装在一个名为......的 php 变量中......现在，称为“$html”，然后在您的处理页面中放置类似

的内容

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

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

检查一下 https://code.google.com/p/dompdf/

祝你好运

编辑***为了对此进行扩展，假设所有编辑/用户选择的结果是 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>

然后您可以将此代码分配给任何 php 变量。我们称它为“$html”。您可以这样分配它:

$html = '
<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>
';

下面这个

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

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

关于javascript - 基于 HTML 的小册子/传单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20071618/

文章推荐： jquery - 多背景翻转效果

文章推荐： javascript - 在 Javascript 中设置环境变量

文章推荐： javascript - 将php数组转换为js selectpicker数组格式

文章推荐： Chrome 中的 CSS3 过渡变换 rotateX

传单 - 如何在拖放时匹配标记和折线
我有一个带有 LeafletJS 的项目。例如，我在 map 中有 2 个点 (A, B)。我将其显示为 2 个标记我必须画一条从 A 到 B 的折线。我移动了标记 A，我想将标记 A 的折线的
传单:如何将文本标签添加到自定义标记图标？
是否可以向自定义图标标记添加文本？我想避免在图像编辑器中编辑图标只是为了添加文本。我已经像这样创建了我的自定义图标标记: var airfieldIcon = L.icon({ ic
传单 - 图层和子图层
我想要一个 Leaflet 图层控件，选中/取消选中时必须显示/隐藏主图层内的所有子图层。我还想独立检查/取消选中子层。我浏览了 Leaflet 文档和论坛，但找不到任何引用资料。我应该为此编写一个自
传单:如何处理重叠的线条？
如何处理 Leaflet map 库中的重叠线？我从服务器 sid 下载 geoJSON 并将其绘制到 map 上。如果有两个相同的条目，Leaflet 会绘制它们两次。这可以通过在服务器端查找完全
leaflet - 如何检测用户何时没有点击图层？传单
我在项目中使用 leafletjs。在 map 上我有几个多边形和标记。当其中一个被点击时，所有这些都有一个点击事件来显示一些信息。如果用户单击 map 的“空白”部分(而不是任何多边形或标记)，我想
javascript - 传单:按缩放级别获取缩放的边界框
我正在尝试对下一个边界的外观做出预测。这是一个plunkr: https://plnkr.co/edit/sk6NRh51WZA2vpWP 这就是我让它工作的方式，但它不是很有效: const ori
map - 传单 - 添加图例标题
我是 Leaflet 的新手，目前我正在努力学习教程。到目前为止，我设法创建了一个交互式 clorophet map ，就像示例中的 http://leafletjs.com/examples/cho
r - 传单::映射错误的国家名称
我很难弄清楚为什么我无法在 map 上绘制正确的国家/地区。我已经完成了所有代码，但我仍然不明白为什么不能正常工作。如果您看到任何问题，请告诉我。我很欣赏。这是数据集 Country
javascript - 传单:是否可以自定义缩放级别？
是否可以在使用 Stamen Toner-lite tiles 的 Leaflet map 上设置中间(2.5、3.5、4.5 等)缩放级别？ ?这是我到目前为止计算缩放级别的代码: leafletm
R 传单。将点数据分组到单元格中以汇总许多数据点
早上、下午或晚上。我有以下位置数据(从'Count of sampling points within a grid cell'调整) # Demo data set.seed(123) # lat
javascript - 单击标记后如何拖动它？传单
大家好，我正在开发一个具有 map 功能的网站。我的目标是，如果您单击标记，则使其拖动。这是我的代码 else if (select1.value === "Arson"){ var note =
javascript - 传单-可能捕获应用程序引发的异常
我正在开发一个应用程序，用户可以在其中上传KML文件，并使用Leaflet，toGeoJSON和Angular-Leaflet-Directive在屏幕上呈现路径。我使用toGeoJSON.kml(
svg - 传单-多色图案填充
我需要在多边形要素中实现多色填充。填充将根据要素属性进行有条件的格式化。假设我需要一个具有 3 色图案的多边形，如下所示: let fillPalette = ['orange', 'green',
javascript - 传单 - 如何使用弹出表单中的数据创建标记
我从 javascript 开始，并试图解决这个问题。我希望当用户单击 map 时出现一个表单。当他们填写表单时，我想在该位置创建一个标记，并将该标记的弹出内容设置为表单中的值。添加表单完成后，我还
javascript - 如何通过弹出窗口获取在geoserver中发布的wms图层的属性信息。传单
我已经在地理服务器中发布了一个功能，我可以通过传单及其 basemap 成功访问该功能。现在我需要在弹出窗口中获取feature onclick的属性信息。我按原样使用了示例( https://gi
javascript - 传单:通过点击功能缩放到标记
我正在使用带有一些标记的传单 map 。我还有一个侧边栏，可以在其中看到标记的名称，如果单击标记的名称， map 将缩放到标记的 lnglat。它已经可以工作，但我的问题是，当我刷新页面并在侧边栏中选
传单 - Fitbounds 并保持中心位置
我正在使用 Leaflet 和 Mapbox，我想设置 map 的 View : 所有标记均可见中心设置为特定点使用 setView 和 fitbounds 单独完成每个点很容易，但我不知道如何同
传单 map 来源
是否有所有潜在 map 源的列表？在示例页面上，可以浏览四种类型的 map 。外面还有什么？ http://tombatossals.github.io/angular-leaflet-directi
javascript - 传单:不同坐标的不同颜色标记
我正在使用 Leaflet 制作交互式 map 。我在 map 上有标记(基于其经度和纬度坐标)，并且我希望某些标记具有与其他标记不同的颜色。例如，某些坐标我给它的分数是“10”，我希望它是粉红色的，
javascript - 传单 - 如何更改抓取手形光标？
我可能忽略了如何在 map 上更改 LeftletJS 的光标。 http://leafletjs.com/reference.htm 我尝试设置map_div.style.cursor = 'cro

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 基于 HTML 的小册子/传单