ngx-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.

View demo

Changes

Install the NPM Module

npm install ngx-doc-viewer --save

Usage

1. Import NgxDocViewerModule

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

2. Add DocViewer to component:

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

The component now shows an internal loading overlay while external viewers such as Google Docs Viewer and Office Online are initializing, so viewer switches do not appear as a blank panel.

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':
  • none: no overlay
  • all: adds an overlay to the whole iframe, which makes nothing in the document clickable/selectable
  • popout: adds an overlay over googles popout button or office popout and menu which disables just this button/menu but keeps giving the possibility to select text. The popout button is still visible (for google during a few seconds) but not clickable.
  • popout-hide: see popup, instead of an transparent overlay a white one. This really hides the button but you'll see a white block while loading for the google viewer.
• overrideLocalhost: documents from the assets folder are not publicly available and therefor won't show in an external viewer (google, office). If the site is already published to public server, then pass that url and if will replace localhost by the other url. Like: overrideLocalhost="https://angular-doc-viewer.web.app/"
• loadingText: fallback text shown in the built-in loading overlay. Defaults to Loading document...
• errorTextOverride: fallback text shown in the built-in error overlay. Defaults to the runtime error message.
• retryButtonText: text used by the built-in retry button in the default error overlay. Defaults to Retry
• googleFinalRetryDelay: waits this many milliseconds and retries Google once more before showing the error overlay. Defaults to 0
• officeAutoRetry: automatically retries the Office viewer once after officeRetryDelay. Defaults to false
• officeRetryDelay: delay in milliseconds before the one-time Office auto retry. Defaults to 3000
• officeReloadButtonText: text shown in the persistent Office reload button. Defaults to ↻
• officeReloadButtonTitle: tooltip/title for the persistent Office reload button. Defaults to Reload document
• secondaryActionText: optional text for a built-in secondary error action button, for example Open source or Download
• secondaryActionMode: controls the built-in secondary action behavior. Supported values: open or download. Defaults to open

For custom loading markup in Angular, project an ng-template named loadingContent. The template receives $implicit and state with:

• viewer
• url
• phase
• errorText
• retry()
• actionUrl

<ngx-doc-viewer [url]="doc" viewer="office">
  <ng-template #loadingContent let-state>
    <div style="display:flex;gap:8px;align-items:center;">
      <span class="spinner"></span>
      <span>Preparing {{ state.viewer }} preview...</span>
    </div>
  </ng-template>
</ngx-doc-viewer>

To replace the persistent Office reload control, project an ng-template named officeReloadContent:

<ngx-doc-viewer [url]="doc" viewer="office">
  <ng-template #officeReloadContent let-state>
    <span>Reload</span>
  </ng-template>
</ngx-doc-viewer>

For custom error markup in Angular, project an ng-template named errorContent. It receives the same context and can call retry() directly:

<ngx-doc-viewer [url]="doc" viewer="office">
  <ng-template #errorContent let-state>
    <div style="text-align:center;">
      <div>Preview unavailable for {{ state.viewer }}.</div>
      <div>{{ state.actionUrl }}</div>
      <button type="button" (click)="state.retry()">Retry</button>
      <a [href]="state.actionUrl" target="_blank" rel="noreferrer">Open source</a>
    </div>
  </ng-template>
</ngx-doc-viewer>

If you want to keep the default error layout but replace just the actions area, project an ng-template named errorActions:

<ngx-doc-viewer [url]="doc" viewer="office" retryButtonText="Try again">
  <ng-template #errorActions let-state>
    <div style="margin-top: 14px; display: flex; gap: 8px; justify-content: center;">
      <button type="button" (click)="state.retry()">Try again</button>
      <a [href]="state.actionUrl" target="_blank" rel="noreferrer">Open source</a>
    </div>
  </ng-template>
</ngx-doc-viewer>

There are some issues loading document in the google viewer. See: https://stackoverflow.com/questions/40414039/google-docs-viewer-returning-204-responses-no-longer-working-alternatives. If loading pdf's and Word documents, seems to work now with this hack let me know via a Github issue.

• 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.

• googleMaxChecks = 5 | max number of retries Output:

• loaded: emitted when the current iframe is ready. Can be used to hook into custom loading or telemetry flows.

• loading: emitted when the viewer enters the loading phase. Payload includes viewer, url, phase, errorText, retry(), and actionUrl.

• error: emitted when the viewer enters the error phase. Payload includes viewer, url, phase, errorText, retry(), and actionUrl.

• phaseChange: emitted whenever the internal phase changes to idle, loading, ready, or error.

Recent behavior improvements

• External viewer switches now remount the iframe cleanly when changing between viewers such as Google and Office.
• A built-in loading overlay is shown while remote viewers are loading.
• Mammoth rendering now refreshes correctly when switching from an iframe-based viewer back to inline document rendering.

File type support

office viewer

.ppt, .pptx, .doc, .docx, .xls and .xlsx

google viewer

Only files under 25 MB can be previewed with the Google Drive viewer.

Google Drive viewer helps you preview over 15 different file types, listed below:

• Text files (.TXT)
• Markup/Code (.CSS, .HTML, .PHP, .C, .CPP, .H, .HPP, .JS)
• Microsoft Word (.DOC and .DOCX)
• Microsoft Excel (.XLS and .XLSX)
• Microsoft PowerPoint (.PPT and .PPTX)
• Adobe Portable Document Format (.PDF)
• Apple Pages (.PAGES)
• Adobe Illustrator (.AI)
• Adobe Photoshop (.PSD)
• Tagged Image File Format (.TIFF)
• Autodesk AutoCad (.DXF)
• Scalable Vector Graphics (.SVG)
• PostScript (.EPS, .PS)
• TrueType (.TTF)
• XML Paper Specification (.XPS)

Note: Archive files (.ZIP, .RAR) are not supported by the Google Docs embedded viewer despite some community sources claiming otherwise. For the current official list of supported formats, see the Google Drive Help Center.

url

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

For Google Drive

<ngx-doc-viewer
  [url]="'https://drive.google.com/file/d/0B5ImRpiNhCfGZDVhMGEyYmUtZTdmMy00YWEyLWEyMTQtN2E2YzM3MDg3MTZh/preview'"
  viewer="url"
  style="width:100%;height:50vh;"
>
</ngx-doc-viewer>

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

<ngx-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;"
>
</ngx-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

• ngx-event-handler: advance event handling like click-outside with serval options: npm | github | demo
• ngx-edit-inline: basic inline edit component: npm | github | demo