angular-doc-viewer
v1.4.3
Published
This component can be used to show several different document types in an Angular app.
Downloads
9
Readme
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>
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