angular-doc-viewer

angular-doc-viewer

This component can be used to show several different document types in an Angular app.

Documents that are publicly available can be shown in an iframe using the google or office document viewer.

Pdf files and word document that are not publicly available can be shown using the mammoth viewer or pdf viewer by passing an objectUrl.

Changes

Install the NPM Module

npm install angular-doc-viewer --save

Usage

1. Import AngularDocViewerModule

@NgModule({
    imports: [AngularDocViewerModule]
  })
  export class AppModule { }

2. Add DocViewer to component:

    <angular-doc-viewer [url]="doc" viewer="google" style="width:100%;height:50vh;"></angular-doc-viewer>

To

API:

Input:

• url: document url.
• viewer: google (default), office, mammoth, pdf or url
• viewerUrl: only for viewer: 'url'; location of the document renderer. Only use this option for other viewers then google or office.
• queryParams, e.g. to set language. for google: hl=[lang] e.g. hl=nl
• disableContent: 'none' | 'all' | 'popout' | 'popout-hide' = 'none.
• googleCheckContentLoaded = true | If true it will check by interval if the content is loaded.
• googleCheckInterval = 3000 | The interval in milliseconds that is checked whether the iframe is loaded.

File type support

office viewer

.pdf, .doc, .docx.

Source

url

For another external document viewers that should be loaded in an iframe.

For Google Drive

    <angular-doc-viewer
        [url]="http://docs.google.com/fileview?id=0B5ImRpiNhCfGZDVhMGEyYmUtZTdmMy00YWEyLWEyMTQtN2E2YzM3MDg3MTZh"
        viewer="url" style="width:100%;height:50vh;">
    </angular-doc-viewer>

For the Google Viewer or any other viewer where there is a base url and a parameter for the documentUrl:

    <angular-doc-viewer 
        [viewerUrl]="https://docs.google.com/gview?url=%URL%&embedded=true"
        [url]="https://file-examples.com/wp-content/uploads/2017/02/file-sample_100kB.doc"
        viewer="url" style="width:100%;height:50vh;">
    </angular-doc-viewer>

pdf

.pdf

NOTE: PDF's are shown in the embed tag. Browser support is not guaranteed. If you need to be sure the pdf renders on all browsers you better use PDF.js

mammoth

.docx

To use mammoth, also add:

npm install mammoth --save

and make sure mammoth.browser.min.js is loaded. For the angular/cli you would add the following in angular.json:

    "scripts": [
        "node_modules/mammoth/mammoth.browser.min.js"
    ]

My other packages

• angular-15x-image-viewer