Show Pdf,docx Files In Clistview

How I can show pdf,docx files in clistview?

possibly in an iFrame tag.

how I can generate iframe under clistview?

Make an iFrame tag in the _view.php file.


I prefer to have links to the pdf/doc/etc in clistview and when click one of them, opened in new tab either to download or show in browser, if you want something like that please inform us

I prefer to open PDF /TXT/ CSV/ And Images in a fancybox and download ppt, xls, docs I downloaded fancybox and included the js and css manually in my them main layout file. Also, you cant render xls, ppt, word etc in a page without some sort of plugin i.e. google docs api so you can only download them.

in my _view i use something similar to

<a href="<?php echo Yii::app()->createUrl("/images/companies/products/",array("files"=>$data->file_path));?>" title="<?php echo $data->name; ?>"

<?php if ($data->extension =='pdf' or $data->extension =='txt' or $data->extension =='csv') {echo 'class="fancypdf  fancybox-button" data-rel="fancybox-button"';}

elseif ($data->extension =='jpeg' or $data->extension =='jpg' or $data->extension =='png') {echo 'class="fancybox-button" data-rel="fancybox-button"';};?>">

	<div class="col-lg-3 file-list-view-container">

		<div class="file-list-view-container-inner">

			<div class="col-lg-3">

				<div class="file-list-view-img">

					<img src="<?php echo Yii::app()->theme->baseUrl.'/assets/img/icons/'.$data->extension.'.png';?>"  title="<?php echo $data->extension;?>" class="img-responsive" style="min-width: 100%" alt="<?php echo $data->extension;?>" />



			<div class="col-lg-9">

				<h4><?php echo $data->name; ?></h4>

				<hr style="margin:-5px 0 5px 0;">

				<p><?php echo $data->description; ?></p>





i put the if else statements to see how the classes are rendered. i use a function but you get the idea.

Your style calsses will be different. if you do it this way make sure you assign the fancybox class to the link and not the actual image / document or it will make it disappear after viewing.

to view the pdfs /txt/csv use class fancypdf fancybox-button (fancypdf just calls the below script) and you need data-rel="fancybox-button"

on image links use class fancybox-button and you need data-rel="fancybox-button"

for doc downloads you dont need a class or the data-rel="fancybox-button" on click it will pop up with a download file promt

<script type="text/javascript">



type: 'html',

width  : '80%',

height  : '90%',

autoSize: false,

content: '<embed src="'+this.href+'#nameddest=self&page=1&view=FitH&toolbar=0&navpanes=0,0&zoom=80,0,0" type="application/pdf" height="99%" width="100%" />',

beforeClose: function() {



}); //fancybox

return false;

}); //click


fancybox pdf / txt/ csv

fancybox img

_view outputs this and when you click on them it shows the above

you can do the same thing with gridview