mirror of
https://code.equilibrium.co.ao/ITO/doneit-web.git
synced 2026-04-19 04:57:52 +00:00
Fix
This commit is contained in:
Peter Maquiran
@@ -0,0 +1,17 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { DocumentViewerPage } from './document-viewer.page';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: DocumentViewerPage
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule],
|
||||
})
|
||||
export class DocumentViewerPageRoutingModule {}
|
||||
@@ -0,0 +1,24 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
|
||||
import { IonicModule } from '@ionic/angular';
|
||||
|
||||
import { DocumentViewerPageRoutingModule } from './document-viewer-routing.module';
|
||||
|
||||
import { DocumentViewerPage } from './document-viewer.page';
|
||||
import { PdfViewerModule } from 'ng2-pdf-viewer';
|
||||
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
IonicModule,
|
||||
DocumentViewerPageRoutingModule,
|
||||
//
|
||||
PdfViewerModule
|
||||
],
|
||||
declarations: [DocumentViewerPage]
|
||||
})
|
||||
export class DocumentViewerPageModule {}
|
||||
@@ -0,0 +1,22 @@
|
||||
<ion-header class="ion-no-border">
|
||||
<ion-toolbar class="d-flex">
|
||||
|
||||
<div class="d-flex px-20 pt-20">
|
||||
<div class="cursor-pointer" (click)="close()">
|
||||
<ion-icon class="font-35" src="assets/images/icons-arrow-arrow-left.svg"></ion-icon>
|
||||
</div>
|
||||
|
||||
<div class="font-25">{{ fileName }}</div>
|
||||
|
||||
</div>
|
||||
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content class="pt-10 height-100">
|
||||
|
||||
<div *ngIf="pdfSrc" class="height-100">
|
||||
<iframe id="iframe" src="https://equilibrium.dyndns.info/FileShare/pdfjs/web/viewer.html?file=https://equilibrium.dyndns.info/FileShare/merged_fastview.pdf" height="100%" width="100%" title="Iframe Example"></iframe>
|
||||
</div>
|
||||
|
||||
</ion-content>
|
||||
@@ -0,0 +1,14 @@
|
||||
ion-content {
|
||||
background-color: #ececec;
|
||||
}
|
||||
|
||||
.ng2-pdf-viewer-container {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
#pdf-container {
|
||||
canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
import { IonicModule } from '@ionic/angular';
|
||||
|
||||
import { DocumentViewerPage } from './document-viewer.page';
|
||||
|
||||
describe('DocumentViewerPage', () => {
|
||||
let component: DocumentViewerPage;
|
||||
let fixture: ComponentFixture<DocumentViewerPage>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ DocumentViewerPage ],
|
||||
imports: [IonicModule.forRoot()]
|
||||
}).compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(DocumentViewerPage);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
}));
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,212 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ModalController, NavParams } from '@ionic/angular';
|
||||
import { ProcessesService } from 'src/app/services/processes.service';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-document-viewer',
|
||||
templateUrl: './document-viewer.page.html',
|
||||
styleUrls: ['./document-viewer.page.scss'],
|
||||
})
|
||||
export class DocumentViewerPage implements OnInit {
|
||||
|
||||
pdfSrc = 'http://laptop-46/FileShare/Test_25MB.pdf';
|
||||
task = null
|
||||
DocId = null
|
||||
fileName = ''
|
||||
link = ''
|
||||
|
||||
constructor(
|
||||
private modalController: ModalController,
|
||||
private navParams: NavParams,
|
||||
private processes: ProcessesService) {
|
||||
|
||||
this.task = this.navParams.get('task') || null;
|
||||
this.DocId = this.navParams.get('DocId');
|
||||
|
||||
if(this.navParams.get('pdfSrc')) {
|
||||
this.pdfSrc = this.navParams.get('pdfSrc') || null;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
|
||||
this.processes.getFileBase64(this.DocId).subscribe((res: any) => {
|
||||
|
||||
console.log(res)
|
||||
this.pdfSrc= 'data:application/pdf;base64,'+ res.file
|
||||
this.fileName = res.name
|
||||
|
||||
})
|
||||
|
||||
// this.setPdfViewer()
|
||||
|
||||
|
||||
// setTimeout(() => {
|
||||
|
||||
// document.getElementById('iframe')['contentWindow'].postMessage(
|
||||
// {
|
||||
// sender: "get_page_button1",
|
||||
// message: 'url'
|
||||
// }, "*")
|
||||
|
||||
// }, 3000)
|
||||
|
||||
}
|
||||
|
||||
|
||||
setPdfViewer() {
|
||||
setTimeout( async () => {
|
||||
|
||||
// If absolute URL from the remote server is provided, configure the CORS
|
||||
// header on that server.
|
||||
var url = 'http://192.168.0.87:3000/000634977.pdf';
|
||||
|
||||
const pdfjsWorker = await import('pdfjs-dist/build/pdf.worker.entry');
|
||||
// Loaded via <script> tag, create shortcut to access PDF.js exports.
|
||||
var pdfjsLib = await import('pdfjs-dist/build/pdf');
|
||||
|
||||
// The workerSrc property shall be specified.
|
||||
// pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';
|
||||
pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;
|
||||
|
||||
var pdfDoc = null,
|
||||
pageNum = 1,
|
||||
pageRendering = false,
|
||||
pageNumPending = null,
|
||||
scale = 0.8,
|
||||
canvas: any = document.getElementById('the-canvas'),
|
||||
ctx = canvas.getContext('2d');
|
||||
|
||||
/**
|
||||
* Get page info from document, resize canvas accordingly, and render page.
|
||||
* @param num Page number.
|
||||
*/
|
||||
function renderPage(num) {
|
||||
pageRendering = true;
|
||||
// Using promise to fetch the page
|
||||
pdfDoc.getPage(num).then(function(page) {
|
||||
var viewport = page.getViewport({scale: scale});
|
||||
canvas.height = viewport.height;
|
||||
canvas.width = viewport.width;
|
||||
|
||||
// Render PDF page into canvas context
|
||||
var renderContext = {
|
||||
canvasContext: ctx,
|
||||
viewport: viewport
|
||||
};
|
||||
var renderTask = page.render(renderContext);
|
||||
|
||||
// Wait for rendering to finish
|
||||
renderTask.promise.then(function() {
|
||||
pageRendering = false;
|
||||
if (pageNumPending !== null) {
|
||||
// New page rendering is pending
|
||||
renderPage(pageNumPending);
|
||||
pageNumPending = null;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Update page counters
|
||||
// document.getElementById('page_num').textContent = num;
|
||||
}
|
||||
|
||||
/**
|
||||
* If another page rendering in progress, waits until the rendering is
|
||||
* finised. Otherwise, executes rendering immediately.
|
||||
*/
|
||||
function queueRenderPage(num) {
|
||||
if (pageRendering) {
|
||||
pageNumPending = num;
|
||||
} else {
|
||||
renderPage(num);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Displays previous page.
|
||||
*/
|
||||
function onPrevPage() {
|
||||
if (pageNum <= 1) {
|
||||
return;
|
||||
}
|
||||
pageNum--;
|
||||
queueRenderPage(pageNum);
|
||||
}
|
||||
|
||||
document.getElementById('prev').addEventListener('click', onPrevPage);
|
||||
|
||||
/**
|
||||
* Displays next page.
|
||||
*/
|
||||
function onNextPage() {
|
||||
if (pageNum >= pdfDoc.numPages) {
|
||||
return;
|
||||
}
|
||||
pageNum++;
|
||||
queueRenderPage(pageNum);
|
||||
}
|
||||
|
||||
document.getElementById('next').addEventListener('click', onNextPage);
|
||||
|
||||
var currPage = 1; //Pages are 1-based not 0-based
|
||||
var numPages = 0;
|
||||
var thePDF = null;
|
||||
|
||||
|
||||
function handlePages(page)
|
||||
{
|
||||
//This gives us the page's dimensions at full scale
|
||||
var viewport = page.getViewport( 1 );
|
||||
|
||||
//We'll create a canvas for each page to draw it on
|
||||
var canvas = document.createElement( "canvas" );
|
||||
canvas.style.display = "block";
|
||||
var context = canvas.getContext('2d');
|
||||
canvas.height = viewport.height;
|
||||
canvas.width = viewport.width;
|
||||
|
||||
//Draw it on the canvas
|
||||
page.render({canvasContext: context, viewport: viewport});
|
||||
|
||||
//Add it to the web page
|
||||
document.querySelector('#pdf-container').appendChild( canvas );
|
||||
|
||||
//Move to next page
|
||||
currPage++;
|
||||
if ( thePDF !== null && currPage <= numPages )
|
||||
{
|
||||
thePDF.getPage( currPage ).then( handlePages );
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Asynchronously downloads PDF.
|
||||
*/
|
||||
pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
|
||||
|
||||
pdfDoc = pdfDoc_;
|
||||
thePDF = pdfDoc_
|
||||
|
||||
pdfDoc.getPage(1).then(function(page) {
|
||||
// you can now use *page* here
|
||||
alert('first page')
|
||||
});
|
||||
|
||||
// Initial/first page rendering
|
||||
renderPage(pageNum);
|
||||
|
||||
numPages = pdfDoc.numPages;
|
||||
pdfDoc.getPage( 1 ).then( handlePages );
|
||||
});
|
||||
|
||||
}, 100)
|
||||
}
|
||||
|
||||
close() {
|
||||
this.modalController.dismiss();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user