ngx-doc-viewer
Version:
Angular document viewer.
178 lines • 8.95 kB
JavaScript
import { __awaiter } from "tslib";
import { Component, Input, NgZone, Output, ViewChildren, QueryList, } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { EventEmitter } from '@angular/core';
// eslint-disable-next-line @nrwl/nx/enforce-module-boundaries
import { getDocxToHtml, getViewerDetails, googleCheckSubscription, iframeIsLoaded, isLocalFile, replaceLocalUrl } from './../../../helper';
export class NgxDocViewerComponent {
constructor(domSanitizer, ngZone) {
this.domSanitizer = domSanitizer;
this.ngZone = ngZone;
this.loaded = new EventEmitter();
this.url = '';
this.queryParams = '';
this.viewerUrl = '';
this.googleCheckInterval = 3000;
this.googleMaxChecks = 5;
this.disableContent = 'none';
this.googleCheckContentLoaded = true;
this.fullUrl = null;
this.externalViewer = false;
this.docHtml = '';
this.configuredViewer = 'google';
this.shouldCheckIframe = false;
}
ngAfterViewInit() {
var _a, _b;
if (this.shouldCheckIframe) {
const iframe = (_b = (_a = this.iframes) === null || _a === void 0 ? void 0 : _a.first) === null || _b === void 0 ? void 0 : _b.nativeElement;
if (iframe) {
this.shouldCheckIframe = false;
this.reloadIframe(iframe);
}
}
}
ngOnDestroy() {
if (this.checkIFrameSubscription) {
this.checkIFrameSubscription.unsubscribe();
}
}
ngOnChanges(changes) {
return __awaiter(this, void 0, void 0, function* () {
if (changes &&
changes.viewer &&
(changes.viewer.isFirstChange ||
changes.viewer.currentValue !== changes.viewer.previousValue)) {
if (this.viewer !== 'google' &&
this.viewer !== 'office' &&
this.viewer !== 'mammoth' &&
this.viewer !== 'pdf' &&
this.viewer !== 'url') {
console.error(`Unsupported viewer: '${this.viewer}'. Supported viewers: google, office, mammoth and pdf`);
}
this.configuredViewer = this.viewer;
}
if ((changes.url && changes.url.currentValue !== changes.url.previousValue) ||
(changes.viewer &&
changes.viewer.currentValue !== changes.viewer.previousValue) ||
(changes.viewerUrl &&
changes.viewerUrl.currentValue !== changes.viewerUrl.previousValue)) {
let viewerDetails = getViewerDetails(this.url, this.configuredViewer, this.queryParams, this.viewerUrl);
this.externalViewer = viewerDetails.externalViewer;
if (viewerDetails.externalViewer && this.overrideLocalhost && isLocalFile(this.url)) {
const newUrl = replaceLocalUrl(this.url, this.overrideLocalhost);
viewerDetails = getViewerDetails(newUrl, this.configuredViewer, this.queryParams, this.viewerUrl);
}
this.docHtml = '';
if (this.checkIFrameSubscription) {
this.checkIFrameSubscription.unsubscribe();
}
if (!this.url) {
this.fullUrl = null;
}
else if (viewerDetails.externalViewer ||
this.configuredViewer === 'url') {
this.fullUrl = this.domSanitizer.bypassSecurityTrustResourceUrl(viewerDetails.url);
// see:
// https://stackoverflow.com/questions/40414039/google-docs-viewer-returning-204-responses-no-longer-working-alternatives
// hack to reload iframe if it's not loaded.
// would maybe be better to use view.officeapps.live.com but seems not to work with sas token.
if (this.configuredViewer === 'google' &&
this.googleCheckContentLoaded) {
this.ngZone.runOutsideAngular(() => {
var _a, _b;
// if it's not loaded after the googleIntervalCheck, then open load again.
const iframe = (_b = (_a = this.iframes) === null || _a === void 0 ? void 0 : _a.first) === null || _b === void 0 ? void 0 : _b.nativeElement;
if (iframe) {
this.reloadIframe(iframe);
}
else {
this.shouldCheckIframe = true;
}
});
}
}
else if (this.configuredViewer === 'mammoth') {
this.docHtml = yield getDocxToHtml(this.url);
}
}
});
}
reloadIframe(iframe) {
this.checkIFrameSubscription = googleCheckSubscription();
this.checkIFrameSubscription.subscribe(iframe, this.googleCheckInterval, this.googleMaxChecks);
}
iframeLoaded() {
var _a, _b;
const iframe = (_b = (_a = this.iframes) === null || _a === void 0 ? void 0 : _a.first) === null || _b === void 0 ? void 0 : _b.nativeElement;
if (iframe && iframeIsLoaded(iframe)) {
this.loaded.emit(null);
if (this.checkIFrameSubscription) {
this.checkIFrameSubscription.unsubscribe();
}
}
}
}
NgxDocViewerComponent.decorators = [
{ type: Component, args: [{
// eslint-disable-next-line @angular-eslint/component-selector
selector: 'ngx-doc-viewer',
template: "<ng-container *ngIf=\"!externalViewer\">\r\n <div *ngIf=\"configuredViewer !== 'pdf'\" [innerHtml]=\"docHtml\"></div>\r\n <object\r\n *ngIf=\"fullUrl && configuredViewer === 'pdf'\"\r\n [data]=\"fullUrl\"\r\n type=\"application/pdf\"\r\n width=\"100%\"\r\n height=\"100%\"\r\n >\r\n <p>\r\n Your browser does not support PDFs.\r\n <a [href]=\"fullUrl\">Download the PDF</a>.\r\n </p>\r\n </object>\r\n</ng-container>\r\n<ng-container *ngIf=\"externalViewer\">\r\n <iframe\r\n (load)=\"iframeLoaded()\"\r\n *ngIf=\"fullUrl && disableContent === 'none'\"\r\n #iframe\r\n id=\"iframe-doc-viewer\"\r\n frameBorder=\"0\"\r\n [src]=\"fullUrl\"\r\n ></iframe>\r\n <div class=\"container\" *ngIf=\"disableContent !== 'none'\">\r\n <div\r\n [class.overlay-full]=\"disableContent === 'all'\"\r\n [class.overlay-popout-google]=\"\r\n configuredViewer === 'google' &&\r\n (disableContent === 'popout' || disableContent === 'popout-hide')\r\n \"\r\n [class.overlay-popout-office]=\"\r\n configuredViewer === 'office' &&\r\n (disableContent === 'popout' || disableContent === 'popout-hide')\r\n \"\r\n [style.background-color]=\"\r\n disableContent === 'popout-hide' ? '#fff' : 'transparent'\r\n \"\r\n ></div>\r\n <iframe\r\n (load)=\"iframeLoaded()\"\r\n *ngIf=\"fullUrl\"\r\n #iframe\r\n id=\"iframe\"\r\n frameBorder=\"0\"\r\n [src]=\"fullUrl\"\r\n ></iframe>\r\n </div>\r\n</ng-container>\r\n",
styles: [`
:host {
display: block;
}
.container {
width: 100%;
height: 100%;
position: relative;
}
.overlay-popout-google {
width: 40px;
height: 40px;
right: 26px;
top: 11.5px;
position: absolute;
z-index: 1000;
}
.overlay-popout-office {
width: 100px;
height: 20px;
right: 0;
bottom: 0;
position: absolute;
z-index: 1000;
}
.overlay-full {
width: 100%;
height: 100%;
right: 0;
top: 0;
position: absolute;
z-index: 1000;
}
iframe {
width: 100%;
height: 100%;
}
`]
},] }
];
NgxDocViewerComponent.ctorParameters = () => [
{ type: DomSanitizer },
{ type: NgZone }
];
NgxDocViewerComponent.propDecorators = {
loaded: [{ type: Output }],
url: [{ type: Input }],
queryParams: [{ type: Input }],
viewerUrl: [{ type: Input }],
googleCheckInterval: [{ type: Input }],
googleMaxChecks: [{ type: Input }],
disableContent: [{ type: Input }],
googleCheckContentLoaded: [{ type: Input }],
viewer: [{ type: Input }],
overrideLocalhost: [{ type: Input }],
iframes: [{ type: ViewChildren, args: ['iframe',] }]
};
//# sourceMappingURL=document-viewer.component.js.map