Coldfusion CFDocument PDF转换问题

时间:2013-11-05 08:54:02

标签: pdf coldfusion

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

以下是原始页面的屏幕截图

enter image description here

以下是转换后的PDF页面的屏幕截图:

enter image description here

以下是原始网页的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输出。任何帮助将不胜感激。

1 个答案:

答案 0 :(得分: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版本中它是如何有意义的 - 你可能想要修改布局,使其更像是一个物理形式? / p>