Bloggers recientes

Carlos Hernandez

Staff
2 Mensajes
24 de febrero de 2018

David H Nebinger

68 Mensajes
23 de febrero de 2018

Jonas Choi

Staff
3 Mensajes
23 de febrero de 2018

Jamie Sammons

Staff
11 Mensajes
19 de febrero de 2018

Iacopo Colonnelli

2 Mensajes
17 de febrero de 2018

Christian Klein

1 Mensajes
15 de febrero de 2018

Jose M. Navarro

Staff
8 Mensajes
14 de febrero de 2018

Maria Sanchez

Staff
18 Mensajes
13 de febrero de 2018

Sergio González

Staff
5 Mensajes
13 de febrero de 2018

Minhchau Dang

Staff
15 Mensajes
31 de enero de 2018
« Atrás

Visual Preview in Liferay DXP: Custom Portlet

General Blogs 8 de diciembre de 2017 Por Sandeep Sapra

Liferay provide OOTB features for Preview of Documents (PDF,  Word, Image), Media (Audio and Video) in Document and Media Portlet.  The same is available after installing following components

  • ImageMagick -  To convert into images for preview
  • Ghostscript  - Dependency of ImageMagick
  • Xuggler  - For Audio and Video.  Has to be included as jar file in case not available in DXP
  • Open Office - This is required for Word document

Post installation , their path needs be added and enabled in Liferay ( Server Administration --> External Services).  If we need to develop this in custom portlet , here is the solution for the same.

Custom Portlet Solution:

1. Create Portlet and write custom code to check what type of file it is ( Doc or Video etc.)

For PDF and Images

boolean hasPDFImages = PDFProcessorUtil.hasImages(fileVersion);

For Audio : 

boolean hasAudio = AudioProcessorUtil.hasAudio(fileVersion);

2. Generate preview URL for different file types

For Audio: 

previewFileURLs[j] = DLUtil.getPreviewURL(fileEntry, fileVersion, themeDisplay, previewQueryString + "&type=" + PropsUtil.getArray(PropsKeys.DL_FILE_ENTRY_PREVIEW_AUDIO_CONTAINERS)[j]);
 
For PDF and Image

previewFileURLs[0] = DLUtil.getPreviewURL(fileEntry, fileVersion, themeDisplay, previewQueryString)

3. Use preview URLs on JSP  ( used angular js in our case)

For Audio:

<div class="lfr-preview-audio" id="<portlet:namespace />previewFile{{$index}}">
<div class="lfr-preview-audio-content" id="<portlet:namespace />previewFileContent{{$index}}"></div>
</div>
 
4.  Generating preview when action is taken 
For Audio
AUI().use("aui-audio","liferay-preview", function(A){
new A.Audio({
contentBox:"#<portlet:namespace />previewFileContent"+index,
fixedAttributes:{allowfullscreen:"true",wmode:"opaque"},
oggUrl:"http://localhost:8080/documents/20143/0/SampleAudio_0.4mb.mp3/844cc37b-5130-7097-feda-48b48eeea76a?version\x3d1.0\x26audioPreview\x3d1\x26type\x3dogg",
url:refFileURLStr.url
}).render();
});
 
Screenshots:
For PDF:
 
For Audio:
 
For Video:
No hay ningún comentario aún. Sea usted el primero.