Question

我创建了一个表单，我向用户提供在线提交或打印和邮件的选项。我使用一个简单的javascript打印命令，并使用.d-print-none类关闭除表单之外的所有其他元素进行打印。这可能是一个非常简单的问题，但是当我打印它时，它不会输出整个表格。它填充一页，然后填写第二页空白页。想知道是否有助于将其他d-print类添加到表单元素中，或者可能有一种方法可以使表单的高度适合一页。这是一个错误还是我错过了什么？

代码没什么特别之处，但我已经显示了下面的表格。

<div class="col-lg-7 col-sm-12 d-print-inline-flex h-100 w-100" id="donationForm">
        <div class="card">
        <div class="card-header"><h4 class="text-center">Donation Request&nbsp;Form</h4>
        </div>
        <div class="card-body">
        <form name="donationRequest" id="donationRequest" novalidate>
        <h5>Event Information</h5>
        <div class="form-group">
        <label for="orgName">Name of Organization: </label>
        <input type="text" class="form-control" id="orgName" required placeholder="Name of Organization">
        </div>
        
        <div class="form-group">
        <label for="taxID">501(c)(3) Tax ID Number: </label>
        <input type="number" class="form-control" id="taxID" required placeholder="Tax ID Number">
        </div>
        
        <div class="form-group">
        <label for="eventName">Event Name: </label>
        <input type="text" class="form-control" id="eventName" required placeholder="Event Name">
        </div>
        
        <div class="form-group">
        <label for="eventDate">Date of Event: </label>
        <input type="date" class="form-control" id="eventDate" required placeholder="Event Date">
        </div>
        
        <div class="form-group">
        <label for="eventLoc">Event Location: </label>
        <input type="text" class="form-control" id="eventLoc" required placeholder="Event Location">
        </div>
        <hr>
        <h5>Contact Information</h5>
        <div class="form-group">
        <label for="contact">Contact Name: </label>
        <input type="text" class="form-control" id="contact" required placeholder="First &amp; Last Name of Contact Person">
        </div>
        
        <div class="form-group">
        <label for="address">Address: </label>
        <input type="text" class="form-control" id="address" required placeholder="Address of Organization">
        </div>
        
        <div class="form-group">
        <label for="city">City: </label>
        <input type="text" class="form-control" id="City" required placeholder="City of Organization">
        </div>
        
        <div class="form-group">
        <label for="state">State: </label>
        <input type="text" class="form-control" id="State" required placeholder="State of Organization">
        </div>
        
        <div class="form-group">
        <label for="zipcode">Zip Code: </label>
        <input type="number" class="form-control" id="zipcode" required placeholder="Zip Code of Organization">
        </div>
        
        <div class="form-group">
        <label for="phone">Phone: </label>
        <input type="number" class="form-control" id="phone" required placeholder="123-456-7890">
        </div>
        
        <div class="form-group">
        <label for="email">Email: </label>
        <input type="email" class="form-control" id="email" required placeholder="email@provider.com">
        </div>
       
        <hr>
        
        <h5>Type of Donation Request:</h5>
         <div class="form-group">
         <label class="form-check-inline"><input type="checkbox" value="">&nbsp;Financial Contribution</label>
<label class="form-check-inline"><input type="checkbox" value="">&nbsp;Auction/Drawing Item</label>
<label class="form-check-inline"><input type="checkbox" value="">&nbsp;Other</label>
		</div>

<div class="form-group">
<label for="description">Please briefly note how this event will benefit our community:</label>
 <textarea class="form-control" rows="7" id="comment"></textarea>
 </div>
 <hr>
 <div class="form-group">
  <div class="row">
 <div class="col-md-6"><button type="submit" class="btn btn-primary btn-block"><em class="fa fa-send"></em>&nbsp;Submit Request</button></div>
 <div class="col-md-6"><a href="#" onclick="window.print()" value="Print Form" class="hoverNoLine"><button class="btn btn-primary btn-block"><em class="fa fa-print"></em>&nbsp;Print Form</button></a></div>
 </div>
 </div>
 
 
 
        
        
        
        </form>
        </div>
        
        
        </div>
        </div>

Answer 1

一周前我正在处理此问题，我使用以下方法解决了该问题：

<div id="printbody" class="d-none d-print-block"> /*load elements to print via js*/ </div>
<div class="d-block d-print-none"> /*all my html body with funtionalities*/ </div>

我使用事件 onbeforeprint 将打印元素加载到 Mozilla，Chrome，Safari，EI，Edge。使用类似这样的东西：

window.onbeforeprint = function () {          
        $("#printbody").html("") 
        $("#printbody").append($("#list1").html())
        $("#printbody").append($("#msg1").html())
        $("#printbody").append($("#things").html())
        $("#printbody").append($("#foo").html())
        $("#printbody").append($("#faa").html())                                                
        if (/MSIE 10/i.test(navigator.userAgent) || /MSIE 9/i.test(navigator.userAgent) || /rv:11.0/i.test(navigator.userAgent)) {
            $("#printbody").append($("#flag").html())                                                                                                              
            $("#printbody").append('<div class="row w-100 overflow-hidden">'+$("#boo").html()+'</div>')                                                              
            $("#printbody").append('<div class="col-12 col-sm-10 offset-sm-1 col-xl-4 offset-xl-4 pt-3 px-0">' + $("#vudlist").html() + '</div>')
            $("#printbody").append('<div class="col-12 text-center mb-3" >'+$("#tmvus").html()+ '</div>')  
            $("#printbody").append($("#tmksla").html())  
        } else {
            $("#printbody").append($("#foos").html())                            
        }   
        $("#printbody").append('<div>' + $("#objs").html() + '</div>')
        $("#printbody").append($("#lmsg").html())                        
    }

实际上，iOS不会触发事件 onbeforeprint ，所以我也使用了相同的句柄，但使用了事件 onclick =“ fillPrint（）”。如下所示：

function fillPrint() {          
            $("#printbody").html("") 
            $("#printbody").append($("#list1").html())
            $("#printbody").append($("#msg1").html())
            $("#printbody").append($("#things").html())
            $("#printbody").append($("#foo").html())
            $("#printbody").append($("#faa").html())                                                
            if (/MSIE 10/i.test(navigator.userAgent) || /MSIE 9/i.test(navigator.userAgent) || /rv:11.0/i.test(navigator.userAgent)) {
                $("#printbody").append($("#flag").html())                                                                                                              
                $("#printbody").append('<div class="row w-100 overflow-hidden">'+$("#boo").html()+'</div>')                                                              
                $("#printbody").append('<div class="col-12 col-sm-10 offset-sm-1 col-xl-4 offset-xl-4 pt-3 px-0">' + $("#vudlist").html() + '</div>')
                $("#printbody").append('<div class="col-12 text-center mb-3" >'+$("#tmvus").html()+ '</div>')  
                $("#printbody").append($("#tmksla").html())  
            } else {
                $("#printbody").append($("#foos").html())                            
            }   
            $("#printbody").append('<div>' + $("#objs").html() + '</div>')
            $("#printbody").append($("#lmsg").html())                        
        }

当您尝试打印带有多个节（div）的大元素时会产生此问题，因为我决定在DOM上将其带入更高级别的元素。

我希望这可以帮助某人。

表单

1 个答案: