alfresco-ng2-components/ng2-components/ng2-alfresco-viewer

Alfresco File Viewer Component

• Prerequisites
• Install
• Basic usage
• Properties
• Supported file formats
• PDF Conversion
• Custom extension handler
• Build from sources
• NPM scripts
• Demo
• License

See it live: Viewer Quickstart

Prerequisites

Before you start using this development framework, make sure you have installed all required software and done all the necessary configuration prerequisites.

If you plan using this component with projects generated by Angular CLI, please refer to the following article: Using ADF with Angular CLI

Install

npm install ng2-alfresco-viewer

Basic usage

Using with node id:

<adf-viewer 
    [showViewer]="true" 
    [overlayMode]="true" 
    [fileNodeId]="'d367023a-7ebe-4f3a-a7d0-4f27c43f1045'">
</adf-viewer>

Using with file url:

<adf-viewer 
    [overlayMode]="true" 
    [urlFile]="'filename.pdf'">
</adf-viewer>

Properties

Attribute	Options	Default	Description
fileNodeId	string		Node Id of the file to load the file
urlFile	string		If you want load an external file that not comes from the ECM you can use this Url where to load the file
urlBlob	Blob		If you want load a Blob File
overlayMode	boolean	false	if true Show the Viewer full page over the present content otherwise will fit the parent div
showViewer	boolean	true	Hide or show the viewer
showToolbar	boolean	true	Hide or show the toolbars
displayName	string		You can specify the name of the file

Supported file formats

Type	Extension
Media	wav, Mp3, Mp4, WebM, Ogv
Images	png, jpg, jpeg, gif, bmp
Text	pdf, txt

PDF Conversion

Note for unsupported extension the viewer will offer the possibility to convert it in PDF is that kind of extension is supported by the content service renditions service

Custom extension handler

If you want handle other file formats that are not yet supported by the ng2-alfresco-viewer you can define your own custom handler.

Below you can find an example where with the use of extension-viewer if you can handle 3d files

<adf-viewer 
    [(showViewer)]="fileShowed"
    [fileNodeId]="fileNodeId"
    [overlayMode]="true">
    
    <extension-viewer [supportedExtensions]="['obj','3ds']" #extension>
        <template let-urlFileContent="urlFileContent" let-extension="extension">
            <threed-viewer 
                [urlFile]="urlFileContent" 
                [extension]="extension">
            </threed-viewer>
        </template>
    </extension-viewer>

</adf-viewer> 

Note: you need adding ng2-3d-editor dependency to your package.json file to make example above work.

It is possible to define multiple extension-viewer templates:

<adf-viewer 
    [(showViewer)]="fileShowed"
    [fileNodeId]="fileNodeId"
    [overlayMode]="true">

    <extension-viewer [supportedExtensions]="['xls','xlsx']" #extension>
        <template let-urlFileContent="urlFileContent"  >
            <my-custom-xls-component 
                urlFileContent="urlFileContent">
            </my-custom-xls-component>
        </template>
    </extension-viewer>

    <extension-viewer [supportedExtensions]="['txt']" #extension>
        <template  let-urlFileContent="urlFileContent" >               
            <my-custom-txt-component 
                urlFileContent="urlFileContent">
            </my-custom-txt-component>
        </template>
    </extension-viewer>
</adf-viewer> 

Build from sources

You can build component from sources with the following commands:

npm install
npm run build

The build task rebuilds all the code, runs tslint, license checks and other quality check tools before performing unit testing.

NPM scripts

Command	Description
npm run build	Build component
npm run test	Run unit tests in the console
npm run test-browser	Run unit tests in the browser
npm run coverage	Run unit tests and display code coverage report

Demo

Please check the demo folder for a demo project

cd demo
npm install
npm start

License

Apache Version 2.0