从 HTML 生成带有 <SELECT> 表单字段的 PDF 总是显示多行下拉菜单
Posted
技术标签:
【中文标题】从 HTML 生成带有 <SELECT> 表单字段的 PDF 总是显示多行下拉菜单【英文标题】：generating PDF with <SELECT> form field from HTML displays always multiline dropdown 【发布时间】：2019-12-16 16:00:40 【问题描述】：我使用的是 mPDF 7.x 版，我需要生成带有可填写表格的 PDF。一切正常，除了一件事 - 下拉列表 (SELECT) 始终显示为“多”行 - 我无法创建具有如下下拉列表的文档：https://osuch.com/formtools/exp/mpdfexp/project_mpdf/pdfb04_basic_active_form.php
我的代码：
<?php
require_once 'vendor/autoload.php';
$mpdf= new \Mpdf\Mpdf();
//==============================================================
$html = '
<style>
body
padding-bottom:0px;
margin-bottom:0px;
margin-top:0px;
padding-top:0px;
h2
padding-bottom:0px;
margin-bottom:0px;
margin-top:5px;
padding-top:0px;
font-family: Arial;
font-size:200%;
color:green;
p
padding-bottom:0px;
margin-bottom:5px;
margin-top:10px;
padding-top:5px;
font-family: Arial;
font-size:100%;
font-weight:normal;
.inp
padding-bottom:0px;
margin-bottom:0px;
margin-top:5px;
padding-top:0px;
font-family: Arial;
font-size:100%;
width:100%;
border-bottom:1px solid #000000;
background-color:#dedede;
fieldset
padding-bottom:0px;
margin-bottom:0px;
margin-top:5px;
padding-top:0px;
border: 1px solid #000000;
padding:10px;
font-family: Arial;
font-size:150%;
font-weight:bold;
margin-top:10px;
textarea
font-family: Arial;
font-size:100%;
border:2px solid #000000;
background-color: #dadada;
background-color:#dedede;
</style>
<body>
<h2>Basic PDF Active Form</h2>
<form action="#" method="post">
<fieldset>Personal Information
<p>Name:</p>
<div class="inp"><input type="text" size="200" name="inputname" value="" title="Enter your name"/> </div>
<p>Company:</p>
<div class="inp"><input type="text" size="200" name="inputco" value="" title="Company name"/> </div>
<p>Email:</p>
<div class="inp"><input type="text" size="200" name="inputemail" value="" title="Email address"/> </div>
<p>Mobile:</p>
<div class="inp"><input type="text" size="200" name="inputmobile" value="" title="Mobile telephone number"/> </div>
</fieldset>
<fieldset>Additional Information
<p>How many languages do you speak?</p>
<input type="radio" name="num_languages" value="1" checked="checked" > One
<input type="radio" name="num_languages" value="2" > Two
<input type="radio" name="num_languages" value="3" > Three
<input type="radio" name="num_languages" value="4" > Four
<input type="radio" name="num_languages" value="5" > Five +
<br /><br />
<input type="checkbox" name="email" value="email_subscrbe" checked="checked" /> Please send me regular information by e-mail<br>
<input type="checkbox" name="subscribe" value="newsletter_subscribe" /> Please subscribe me to the Newsletter
<p>Seminar Information</p>
<label for="reg_seminar">Seminar</label>
<select size="1" name="reg_seminar" id="reg_seminar">
<option value="Guitar for Beginners" >Guitar for Beginners</option>
<option value="javascript Today" >JavaScript Today</option>
<option value="Time is on our side" >Time is on our side</option>
</select>
<label for="reg_location">Location</label>
<select size="0" name="reg_location" id="reg_location">
<option value="New York" >New York</option>
<option value="Paris" >Paris</option>
<option value="Munich" >Munich</option>
<option value="Gartmorn" >Gartmorn</option>
</select>
<p>Payment Type</p>
<label><input type="radio" name="regpay" id="reg_payment01" value="Voucher" >
Voucher</label>
<label><input type="radio" name="regpay" id="reg_payment02" value="Cash" >
Cash</label>
<label><input type="radio" name="regpay" id="reg_payment03" value="CreditCard" >
Credit Card</label>
<label><input type="radio" name="regpay" id="reg_payment04" value="BitCoin" >
BitCoin</label>
<p>Comments:</p>
<textarea name="textareafield" rows="4" cols="80" wrap="virtual"></textarea>
</fieldset>
</form>
';
//==============================================================
$mpdf->useActiveForms = true;
/*
$mpdf->formUseZapD = false;
$mpdf->form_border_color = '0.6 0.6 0.72';
$mpdf->form_button_border_width = '2';
$mpdf->form_button_border_style = 'S';
$mpdf->form_radio_color = '0.0 0.0 0.4'; // radio and checkbox
$mpdf->form_radio_background_color = '0.9 0.9 0.9';
*/
$mpdf->WriteHTML($html);
// OUTPUT
$mpdf->Output('test.pdf'); exit;
//==============================================================
?>
我的输出：
mpdf 由 composer 加载，最新版本。代码取自随 mpdf 分发的样本。 “缺少”HTML，HEADER 标签对结果没有影响。
我的输出 PDF 没有反映任何 CSS 格式、“大小”属性、样式，什么都没有。
以前有人遇到过这个问题吗？ （并找到了解决方案？）
任何建议将不胜感激。
【问题讨论】：
我首先尝试包含<html><head></head><body></body></html>标签并将样式放在<head></head>中。
无法重现，Chrome 79 Windows 8.1。我将选择视为下拉列表而不是列表
@FunkFortyNiner 感谢您的提示，但正如我在帖子中提到的，这对输出没有影响。我已经试过了。
@ZohirSalak 忘了提及 - 我在 Linux（debian 9）、chrome 77 上运行。但它也没有效果 - 如果我将生成的 PDF 保存到文件然后使用浏览器打开它（使用 PDF 插件）或 PDF 阅读器（Linux 上的 Evince，Windows 上的 Adobe Acrobat），SELECT 始终显示为列表。但是感谢您的复制，它指向某种本地问题，然后是 mpdf 库中的错误。
该死，我确信那会有所作为。好吧，我可以在这里添加的只是查看 HTML 源代码的外观以及浏览器中的开发人员工具。我很难说为什么它会失败，因为我之前没有使用外部库完成 CSS。
【参考方案1】：
知道了 :) 似乎我不是第一个，也是唯一一个遇到同样问题的人。 这是帮助我的解决方案（解决方法）： https://github.com/mpdf/mpdf/issues/852#issuecomment-546851163
【讨论】：
以上是关于从 HTML 生成带有 <SELECT> 表单字段的 PDF 总是显示多行下拉菜单的主要内容，如果未能解决你的问题，请参考以下文章