1

我正在尝试使用 CFDOCUMENT 将页面从 HTML 转换为 PDF。

这是原始页面的屏幕截图

在此处输入图像描述

这是转换后的 PDF 页面的屏幕截图：

在此处输入图像描述

这是原始页面的 HTML：

<!DOCTYPE HTML> 

                <html lang="en">

            <head>        
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
                <!--[if gt IE 8]>
                <meta http-equiv="X-UA-Compatible" content="IE=edge" />
                <![endif]-->    
                <title>Big Shots Registration</title>
                <meta name="description" content="PlayerSpace.Com offers state of the art league, tournament and sport event management tools combined with powerful social networking features." />
                <meta name="keywords" content="league management,tournament management,sports event management,league management software,tournament management software" />
                <meta name="title" content="Big Shots Registration" />      
                <meta name="author" content="PlayerSpace.Com">      
                <meta http-equiv="expires" content="Tue, 05 Nov 2013 00:00:00 E883T" />     
                <link rel="icon" type="image/ico" href="/favicon.ico"/>    
                <link rel="shortcut icon" href="/favicon.ico">
                <link href="/css/stylesheets.css" rel="stylesheet" type="text/css"/>                
                <!--[if lt IE 8]>
                <link href="/css/ie7.css" rel="stylesheet" type="text/css" />
                <![endif]-->            
                <link rel="stylesheet" type="text/css" href="/css/fullcalendar.print.css" media="print" />    
                <script type='text/javascript' src="/js/plugins/jquery/jquery-1.10.2.min.js"></script>
                <script type='text/javascript' src="/js/plugins/jquery/jquery-ui-1.10.1.custom.min.js"></script>
                <script type='text/javascript' src="/js/plugins/jquery/jquery-migrate-1.2.1.min.js"></script>
                <script type="text/javascript" src="/js/plugins/jquery/jquery.mousewheel.min.js"></script>    
                <script type="text/javascript" src="/js/plugins/cookie/jquery.cookies.2.2.0.min.js"></script>    
                <script type="text/javascript" src="/js/plugins/bootstrap.min.js"></script>    
                <script type="text/javascript" src="/js/plugins/charts/excanvas.min.js"></script>
                <script type="text/javascript" src="/js/plugins/charts/jquery.flot.js"></script>    
                <script type="text/javascript" src="/js/plugins/charts/jquery.flot.stack.js"></script>    
                <script type="text/javascript" src="/js/plugins/charts/jquery.flot.pie.js"></script>
                <script type="text/javascript" src="/js/plugins/charts/jquery.flot.resize.js"></script>    
                <script type="text/javascript" src="/js/plugins/sparklines/jquery.sparkline.min.js"></script>    
                <script type="text/javascript" src="/js/plugins/fullcalendar/fullcalendar.min.js"></script>    
                <script type="text/javascript" src="/js/plugins/select2/select2.min.js"></script>    
                <script type="text/javascript" src="/js/plugins/uniform/uniform.js"></script>    
                <script type="text/javascript" src="/js/plugins/maskedinput/jquery.maskedinput-1.3.min.js"></script>    
                <script type="text/javascript" src="/js/plugins/validation/languages/jquery.validationEngine-en.js" charset="utf-8"></script>
                <script type="text/javascript" src="/js/plugins/validation/jquery.validationEngine.js"" charset="utf-8"></script>    

                <script src="/js/plugins/scrollpane/jquery.jscrollpane.min.js"></script>
                <script src="/js/plugins/scrollpane/mwheelIntent.js"></script>
                <script src="/js/plugins/scrollpane/jquery.mousewheel.js"></script>
                <script type="text/javascript" src="/js/plugins/tagsinput/jquery.tagsinput.min.js"></script>                                
                <script type="text/javascript" src="/js/plugins/animatedprogressbar/animated_progressbar.js"></script>    
                <script type="text/javascript" src="/js/plugins/qtip/jquery.qtip.min.js"></script>

                <script type="text/javascript" src="/js/plugins/ckeditor/ckeditor.js"></script>    
                <script type="text/javascript" src="/js/plugins/ckeditor/adapters/jquery.js"></script>                  
                <script type="text/javascript" src="/js/plugins/dataTables/jquery.dataTables.min.js"></script>         
                <script type="text/javascript" src="/js/plugins/dataTables/FixedColumns.js"></script>         
                <script type="text/javascript" src="/js/plugins/fancybox/jquery.fancybox.pack.js"></script>
                <script type="text/javascript" src="/js/plugins/bootstrap-dialog/bootstrap-dialog.js"></script>        
                <script type="text/javascript" src="/js/plugins/pnotify/jquery.pnotify.min.js"></script>                
                <script type="text/javascript" src="/js/plugins/ibutton/jquery.ibutton.min.js"></script>                    
                <script type="text/javascript" src="/js/plugins/scrollup/jquery.scrollUp.min.js"></script>
                <script type="text/javascript" src="/js/plugins/autosuggest/bsn.AutoSuggest_2.1.3.js"></script>                                 
                <script type="text/javascript" src="/js/plugins/autoexpand/jquery.autosize-min.js"></script>                                                    
                <script type="text/javascript" src="/js/plugins/stepywizard/jquery.stepy.js"></script>
                <script type="text/javascript" src="/js/plugins/bootstrap-select/bootstrap-select.js"></script>             
                <script type="text/javascript" src="/js/plugins/plugindetect/plugindetect.js"></script>                             

                    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>               

                <script type="text/javascript" src="/js/plugins/gmap/gmap3.min.js"></script>                                
                <script type="text/javascript" src="/js/cookies.js"></script>
                <script type="text/javascript" src="/js/actions.js"></script>
                <script type="text/javascript" src="/js/charts.js"></script>
                <script type="text/javascript" src="/js/pwdchkr.js"></script>                                                               
                <script type="text/javascript" src="/js/plugins.js"></script>
                <script type="text/javascript" src="/js/settings.js"></script>                  
                <script type="text/javascript" src="/js/checkzip.js"></script>    
                <script type="text/javascript" src="/js/custom.js"></script>                                    
                <script type="text/javascript" src="/js/afterajax.js"></script>                                                 
                <script type="text/javascript" src="/js/aftereasytabs.js"></script>                                                                 
                <script type="text/javascript" src="/js/plugins/jeasyui/easyloader.js"></script>                     
                <script type="text/javascript" src="/js/plugins/underscore/underscore-min.js"></script>                                                                                                                                                                                     
                <script type="text/javascript" src="/js/plugins/easytabs/jquery.easytabs.min.js"></script>                                                                                                                              

            </head>

                    <body id="registration_body_wrap">

            <div id="registration_wizard">

                <div id="registration_body">
                    <div class="row-fluid">
                        <div class="span12">
                            <div class="span2"></div>
                            <div class="span8">                             
                                <div class="content">
                                    <div class="workplace">

            <form method="post" action="/register/index_registration.cfm?wizard_action=pay_by_check&league=678&m0dal_update=registration_wizard&submethod=checkout&teamstatus=individual&requesttimeout=5000" name="dues_form" id="validation" class="reg_verify">
                <div class="row-fluid">
                    <div class="span12">
                        <h4><b class="text text-error">Registration Dues Checkout</b></h4>
                        <h5>Please review your dues payment information and complete the checkout form below. <b class="text text-error">Red text indicates a required answer.</b></h5>                 
                        <div class="alert alert-info">
                            <h4 style="margin:0px;">Main Registration</h4>
                        </div>  

                            <div class="row-form-reg clearfix">
                                <div class="pull-right tar" style="width:125px;">

                                            <input type="hidden" name="main_p_dues_division_id5" value="2381" id="main_p_dues_division_id5">

                                            <div class="input-prepend" style="margin-left:0px;">
                                                <span class="add-on">$</span>
                                                <input type="text" readonly name="sum6785" style="width:40px !important;" value="300" id="sum6785"> 
                                            </div>                                              

                                </div>      
                                <div style="width:60%;">

                                        <p style="font-size:110%;">

                                                        <b>Todd John</b> for <b class="label label-info ttRT" title="This is the selected division for this player.">BIG SHOTS Report (Non-Div 1) $300</b>                                      

                                        </p>

                        <input type="hidden" name="main_p_duesA" id="main_p_dues2141_A" value="300_2381">

                                </div>                                      
                            </div>                      
                            <div class="dr" style="margin:10px 10px 20px 10px ;"><span></span></div>                                                                                                                            

                            <div class="alert alert-info">
                                <h4 style="margin:0px;">Select your donation amount (optional)</h4>
                            </div>  

                            <div class="row-form-reg clearfix">
                                <div class="pull-right tar" style="width:125px;">
                                    <input type="hidden" name="int_donation_collected" id="int_donation_collected" value="0.00">

                                        <div class="input-prepend" style="margin-left:0px;">
                                            <span class="add-on">$</span>
                                            <input type="text" readonly name="sum_donation" value="0" id="sum_donation" style="width:40px !important;">
                                        </div>                                                                                              

                                </div>                          
                                <div style="width:60%;">

                                        <div class="pull-left tac" style="margin:0px 5px 5px 0px;">

                                                <b class="label label-warning"><h5 style="margin:2px 3px 2px 3px;">$0</h5></b>
                                                <div></div>
                                                <input type="radio" checked="checked" disabled name="donation" id="donation0.00" value="0.00" class="donation_radio" OnMouseOver="calc();" OnMouseOut="calc();">

                                        </div>      


                                </div>
                            </div>                                                  

                            <div class="alert alert-info">
                                <h4 style="margin:0px;">Pay By Check</h4>
                            </div>

                            <div class="row-form-reg clearfix">
                                <div class="span6">
                                    <label class="control-label">Total Due:</label>
                                </div>
                                <div class="span6 tar clearfix">
                                    <div class="input-prepend" style="margin-left:0px;">
                                        <span class="add-on">$</span></span>                                
                                        <input type="text" name="totalSum" id="totalSum" value="300" readonly onmouseover="calc();" style="width:40px !important;">
                                    </div>                                                                  
                                </div>                              
                            </div>                                                                                                                              

                            <div class="alert alert-info">
                                <h4 style="margin:0px;">Alternative Payment Arrangements</h4>
                            </div>      
                            <div class="well well-small" style="margin-top:-20px;">

                                        Please contact your director for more information on how to pay by check.

                            </div>

                    </div>
                </div>                          
            </form>                                                     
            <script language="JavaScript" type="text/javascript">                                                               
                $(document).ready(function(){           

                        $( "#main_p_dues2141_A" ).prop( "disabled", false );

                        $( "#donation0.00" ).prop( "disabled", false );

                    $.uniform.update();
                    calc();                 

                        $("#e_m_row").hide();

                }); 
                function calc()
                {

                        elem1 = document.getElementById("sum6785");

                        elem2 = document.getElementById("sum_donation");

                    elem = document.getElementById("totalSum");                             
                    elem.value = parseFloat(elem1.value ) + parseFloat(elem2.value );
                }   
                function loadwindow()
                {
                    var myheight = $(window).height();
                    var mywidth = $(window).width();                
                    window.open(
                        'https://bigshotsdc41213.playerspace.com//register/index_registration.cfm?wizard_action=pay_by_check&league=678&teamstatus=individual&m0dal_update=registration_wizard&submethod=record_unpaid_preference&pref=check&pay_by_check=1',
                        'mywindow',
                        status=0,
                        toolbar=0,
                        menubar=0,
                        resizable=1,
                        width=mywidth,
                        scrollbars=1,
                        height=myheight
                    );
                    pay_by_checkScript();                   
                }                                           
                function pay_by_checkScript()
                {   
                    document.dues_form.target='mywindow';                                   
                    document.dues_form.action='http://bigshotsdc41213.playerspace.com/register/index_registration.cfm?wizard_action=pay_by_check&league=678&teamstatus=individual&m0dal_update=registration_wizard&submethod=record_unpaid_preference&pref=check&pay_by_check=1';
                    document.dues_form.str_billing_fname.value='pay_by_check';
                    document.dues_form.str_billing_lname.value='pay_by_check';
                    document.dues_form.str_billing_address1.value='pay_by_check';
                    document.dues_form.city.value='pay_by_check';
                    document.dues_form.str_billing_phone.value='555-555-5555';
                    document.dues_form.str_credit_card_type.value='pay_by_check';
                    document.dues_form.str_credit_card_number.value='4828640590401142';
                    document.dues_form.str_ccv_number.value='pay_by_check'  ;                                                                                                           
                    document.dues_form.submit();
                    //window.location = "http://bigshotsdc41213.playerspace.com/register/index_registration.cfm?wizard_action=registration_complete&league=678&teamstatus=individual&m0dal_update=registration_wizard&submethod=record_unpaid_preference&pref=check"
                }
                $(document).on("click", "[id*=uniform-donation]", function(){    
                    var myval =  $(this).find(':radio').val();
                    $('#int_donation_collected').val(myval);
                    $('#sum_donation').val(myval);                                              
                    $(this).find(':radio').prop('checked', true);
                    $.uniform.update();
                    calc();   
                });     
                $(document).on("click", ".iagree", function(){    
                    $(this).addClass("iagreewidth");
                    $(this).val('');
                    $(this).attr("placeholder", "");
                    calc();   
                });                                     
                function showem()   
                {                                               
                    $("#e_m_row").show();
                    if($("#confirmmultiple").length > 0){
                        $("#confirmmultiple").show();                   
                    }      
                    $("#checkout_now").attr('value','SUBMIT FIRST INSTALLMENT PAYMENT >>');                                                 
                    calc();                             
                }
                function hideem()   
                {           
                    $(".iagree").removeClass("iagreewidth");
                    $(".iagree").val('');
                    $(".iagree").attr('placeholder', 'Type "I AGREE" in this box to complete your order and click the "PAY THESE DUES" button.');               
                    $("#checkout_now").attr('value','SUBMIT DUES PAYMENT >>');                                              
                    calc();                                                 
                    $("#e_m_row").hide();
                    if($("#confirmmultiple").length > 0){
                        $("#confirmmultiple").hide();                   
                    }                           
                }                                                       
            </script>   
            <script>    
                window.onload = function() {
                    for(var i = 0, l = document.getElementsByTagName('input').length; i < l; i++) {
                        if(document.getElementsByTagName('input').item(i).type == 'text') {
                            document.getElementsByTagName('input').item(i).setAttribute('autocomplete', 'off');
                        };
                    };
                };                                          
            </script>                                                                                                               
            <script type="text/javascript">  
                function disableEnterKey(e){  
                var key; 
                    if(window.event){ 
                    key = window.event.keyCode; 
                    } else { 
                    key = e.which;      
                    } 
                    if(key == 13){ 
                    return false; 
                    } else { 
                    return true; 
                    }       
                } 
            </script>                       

                                    </div>
                                </div>
                            </div>
                            <div class="span2"></div>                           
                        </div>
                    </div>
                </div>

            </div>

                    </body>
                </html>

我似乎无法使 pdf 输出与原始输出相匹配。任何帮助，将不胜感激。

4

1 回答 1

1

根据我的经验，PDF 渲染实际上比我预期的要容易。我要做的是创建一个 CFM 文件，它只输出您想要的核心页面结构 - 所以丢失所有这些 javascript 文件和所有内容，只需要在其上添加常规标记。一个普通的 CSS 表应该可以正常工作，但您可能需要使用 CFINCLUDE 将其包含在内，而不是依赖于标题中的链接元标记。

创建 PDF 的代码如下：

<cfdocument format="pdf" 
    pagetype="custom" 
    unit="cm" 
    pagewidth="21" 
    pageheight="29.7" 
    margintop="0" 
    marginbottom="0" 
    marginleft="0" 
    marginright="0" 
    filename="#pdf.path_render_page#" 
    overwrite="true"
    fontembed="yes"
>
    <cfinclude template='render_page.cfm'>
</cfdocument>

所以基本的输出 CFM 文件在 CFDOCUMENT 标记中是 CFINCLUDE 的，这使得代码非常紧凑，并且很容易将 PDF 创建与模板分开。然后，您的 CFM 模板也会在其中包含您的 CSS 文件 CFINCLUDE。递归包含应该可以正常工作。

如果您希望将其打印在纸上，那么它会变得有点棘手，因为您开始必须进行物理测量而不是像素，因此您的布局最终会经历很多试验和错误 - 打印出来然后看看它的外观等。

最大的问题是字体。如果您想在 PDF 中嵌入字体，则需要将其安装在服务器计算机上，并正确引用。如果您打开 CF 管理员，您可以查看列出可用字体的页面，并且它有几列对每种字体都有不同的引用。我永远不确定其中哪一列为您的 CSS 提供了正确的参考，以与正确的字体结合 - 我认为它可能会因您的服务器运行的字体和平台而异，但其中之一会是正确的，所以再次只是反复试验。

查看您的文档，它似乎是一个表格，所以不太确定这在直接 PDF 版本中有何意义 - 您可能想要修改布局以使其更像物理表格？

于 2013-11-07T10:44:48.227 回答