Alfresco File Viewer Component for Angular 2

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.

Install

Follow the 3 steps below:

1. Npm

   npm install ng2-alfresco-viewer --save

2. Html

   Include these dependencies in your index.html page:

   
   <!-- Google Material Design Lite -->
   <link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
   <script src="node_modules/material-design-lite/material.min.js"></script>
   <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
   
   <!-- Load the Angular Material 2 stylesheet -->
   <link href="node_modules/@angular/material/core/theming/prebuilt/deeppurple-amber.css" rel="stylesheet">
   
   <!-- Polyfill(s) for Safari (pre-10.x) -->
   <script src="node_modules/intl/dist/Intl.min.js"></script>
   <script src="node_modules/intl/locale-data/jsonp/en.js"></script>
   
   <!-- Polyfill(s) for older browsers -->
   <script src="node_modules/core-js/client/shim.min.js"></script>
   <script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
   <script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
   
   <!-- Polyfill(s) for dialogs -->
   <script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
   <link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
   <style>._dialog_overlay { position: static !important; } </style>
   
   <!-- Modules  -->
   <script src="node_modules/zone.js/dist/zone.js"></script>
   <script src="node_modules/reflect-metadata/Reflect.js"></script>
   <script src="node_modules/systemjs/dist/system.src.js"></script>
   
   <!-- Polyfill(s) for pdf support -->
   <script src="node_modules/pdfjs-dist/web/compatibility.js"></script>
   
   <script src="node_modules/pdfjs-dist/build/pdf.js"></script>
   <script src="node_modules/pdfjs-dist/build/pdf.worker.js"></script>
   <script src="node_modules/pdfjs-dist/web/pdf_viewer.js"></script>
   
   

3. SystemJs

   Add the following components to your systemjs.config.js file:

   • ng2-translate
   • alfresco-js-api
   • ng2-alfresco-core
   • ng2-alfresco-viewer

   Please refer to the following example file: systemjs.config.js .

Basic usage with node id

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

Example of an App that declares the file viewer component :

import { NgModule, Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { CoreModule, AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
import { ViewerModule } from 'ng2-alfresco-viewer';

@Component({
    selector: 'alfresco-app-demo',
    template: `
        <alfresco-viewer 
            [showViewer]="true" 
            [overlayMode]="true" 
            [fileNodeId]="'d367023a-7ebe-4f3a-a7d0-4f27c43f1045'">
        </alfresco-viewer>`
})
class MyDemoApp {

    constructor(private authService: AlfrescoAuthenticationService, 
                private settingsService: AlfrescoSettingsService) {
        settingsService.ecmHost = 'http://localhost:8080';

        this.authService.login('admin', 'admin').subscribe(
            ticket => console.log(ticket),
            error => console.log(error)
        );
    }
}

@NgModule({
    imports: [
        BrowserModule,
        CoreModule.forRoot(),
        ViewerModule.forRoot()
    ],
    declarations: [ MyDemoApp ],
    bootstrap:    [ MyDemoApp ]
})
export class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule);

Basic usage with urlFile

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

Example of an App that declares the file viewer component :

import { NgModule, Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { CoreModule, AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
import { ViewerModule } from 'ng2-alfresco-viewer';

@Component({
    selector: 'alfresco-app-demo',
    template: `
        <alfresco-viewer 
            [showViewer]="true" 
            [overlayMode]="true" 
            [urlFile]="'localTestFile.pdf'">
        </alfresco-viewer>`
})
class MyDemoApp {

    constructor(private authService: AlfrescoAuthenticationService, 
                private settingsService: AlfrescoSettingsService) {
        settingsService.ecmHost = 'http://localhost:8080';
        this.authService.login('admin', 'admin').subscribe(
            ticket => console.log(ticket),
            error => console.log(error)
        );
    }
}

@NgModule({
    imports: [
        BrowserModule,
        CoreModule.forRoot(),
        ViewerModule.forRoot()
    ],
    declarations: [ MyDemoApp ],
    bootstrap:    [ MyDemoApp ]
})
export class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule);

Options

| Attribute | Options | Default | Description | Mandatory | --- | --- | --- | --- | --- | | 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 | extensions | | --- | --- | | Media | Mp4, WebM, Ogv | | Images | png, jpg, jpeg, gif, bmp | | Text | pdf |

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

<alfresco-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>

</alfresco-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:

<alfresco-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>
</alfresco-viewer> 

Build from sources

Alternatively you can build component from sources with the following commands:

npm install
npm run build

Build the files and keep watching for changes

$ npm run build:w

Running unit tests

npm test

Running unit tests in browser

npm test-browser

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

Code coverage

npm run coverage

Demo

If you want have a demo of how the component works, please check the demo folder :

cd demo
npm install
npm start

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 |

License

Apache Version 2.0