Laravel:如何使用thujohn / pdf-l4插件将带有Morris图表的HTML页面加载为PDF?

时间:2015-03-17 10:55:41

标签: html laravel-4 wkhtmltopdf dompdf export-to-pdf

我使用的是Larvel 4.2和thujohn / pdf-l4插件。

将HTML页面转换为PDF时遇到问题。当我转换HTML页面时,页面上的所有内容都会显示,除了上面的Morris图表。

我的路线

Route::post('performanceDetail/preview',[
    'as' => 'print.preview',
    'uses' => 'PerformanceController@postPerformanceDetails']);

控制器

public function postPerformanceDetails()
{
    $data = [
        'event' => Input::get('events'),
        'start_date' => Input::get('start_date'),
        'to_date' => Input::get('to_date'),
    ];
        $start_date = date('Y-m-d H:i:s',strtotime($data['start_date'].'00:00:00'));
        $to_date = date('Y-m-d H:i:s',strtotime($data['to_date'].'23:59:59'));
        $stats = Performance::where('event_type','=',$data['event'])
        ->where('campaign_id',Session::get('campaignid'))
        ->where('created_at', '>=',$start_date)
        ->where('created_at','<=',$to_date)
        ->groupBy('perf_date')
        ->orderBy('perf_date', 'DESC')
        ->remember(60)
        ->get([
        DB::raw('Date(created_at) as perf_date'),
        DB::raw('COUNT(id) as perf_count')
        ])
        ->toJSON();
        //return $stats;
        $campaign = Campaign::find(Session::get('campaignid'));
        $list = CategoryList::find($campaign->categorylist_id);
        $totalPerformance = TotalPerformance::find(Session::get('totalPerformance'));
        //$this->layout->title = "Performance details";
        return PDF::load(View::make('performance.show')
        ->with('stats',$stats)
        ->with('campaign',$campaign)
        ->with('list',$list)
        ->with('start_date',$data['start_date'])
        ->with('to_date',$data['to_date'])
        ->with('totalPerformance',$totalPerformance))->show();
}

查看

&#13;
&#13;
{{-- Form to view performance details --}}
<html lang="en">
    <head>
		<p align="center">
			<b> <font size="5" >Performance report</font></b>
		</p>
	</head>
	<body>
		<p align="center"> 
			<font size="4" >{{{$campaign->template->title}}}</font></b>
		</p>
		<p>
 			<b>List:&nbsp;</b><font>{{$list->name}} </font>
		</p>
		<br>
		<p>
			<b>Total performance</b>
		</p>
		<p>
			<table>
				<thead>
    				<tr>
        				<th width="100">Campaign</th>
        				<th width="50" >Sent</th>
        				<th width="50" >Clicks</th>
        				<th width="50" >Loads</th>
        				<th width="50" >Opens</th>
        				<th width="50" >Views</th>
    				</tr>
    			</thead>
    			<tbody>
    				<tr>
    					<td align="center" width="200">{{{$campaign->template->title}}}</td>
    					<td align="center" width="50">{{$totalPerformance->totalSent }}</td>
    					<td width="50" align="center">{{$totalPerformance->clicks }}</td>
    					<td width="50" align="center">{{$totalPerformance->loads }}</td>
    					<td width="50" align="center">{{$totalPerformance->opens }}</td>
    					<td width="50" align="center">{{$totalPerformance->views }}</td>
    				</tr>
    			</tbody>
			</table>
		</p>
		<br>
		<p>
			<b>Date</b>
		</p>
		<p>
			From: &nbsp;{{$start_date}} &nbsp;&nbsp; To: &nbsp; {{$to_date}}
		</p>
		{{-- hosted assets for Morris charts --}}
		<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
		{{ HTML::script('../bower_components/jquery/dist/jquery.min.js') }}
		{{ HTML::script('../bower_components/raphael/raphael-min.js') }}
		{{ HTML::script('../bower_components/morrisjs/morris.min.js') }}
		<input type="hidden" name="dataChart" id="dataChart" value="{{{$stats}}}">
		<div id="mchart">
			
		</div>
		<script type="text/javascript">
		$(document).ready(function()
		{
			var events = $('#dataChart').val();
    		console.log(events);

			var chart = Morris.Bar({
    		barGap:1,
    		barSizeRatio:.10,
    		// ID of the element in which to draw the chart.
    		element: 'mchart',
    		// Set initial data (ideally you would provide an array of default data)
    		data: [0,0],
    		xkey: 'perf_date',
    		ykeys: ['perf_count'],
    		labels: ['Count'],
    		//barColors: ['#0B62A4','#f75b68','#4DA74D','#646464'],
    		hideHover: 'auto'
    		});
			chart.setData(JSON.parse(events));
    		
			
		});
		</script>
	</body>
</html>
&#13;
&#13;
&#13;

我试图在没有转换的情况下显示此视图,但它是成功的。但是,执行上述代码时,Morris图表不会显示在PDF上。

我该如何解决这个问题指南。

1 个答案:

答案 0 :(得分:0)

只需使用{!! !!}而不是在视图文件中使用{{}} ...

还要确保您的文件应该是这样的 &#39; demo.blade.php&#39; ..