intbot / ng2-pdfjs-viewer Goto Github PK

Hey thank you very much for your work! I have a problem with the events, they receive my subscriptions but i am not getting any response. Thank you ;)

Hello
I am developing an application with Angular7.
I want to view PDF in another tab in IE11 using your library, but it doesn't work.
(I worked fine with Chrome and FireFox.)
The settings are as follows, but are you aware of the cause?

html

<button (click)="openPdf()">Open Pdf</button>

<div style="width: 800px; height: 400px">
  <ng2-pdfjs-viewer
    #pdfViewer
    [externalWindow]="true"
    [downloadFileName]="'mytestfile.pdf'"
    [openFile]="false"
    [viewBookmark]="false"
    [download]="false"
  ></ng2-pdfjs-viewer>
</div>

component

export class MyComponent implements OnInit {
  @ViewChild("pdfViewer") pdfViewer
  ...
 
openPdf(): void {
    this.service.getFile().subscribe(response => {
      this.pdfViewer.pdfSrc = response.body;
      this.pdfViewer.refresh();
    });
  }

I also checked polyfills.ts and it was as follows.

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

/**
 * If the application will be indexed by Google Search, the following is required.
 * Googlebot uses a renderer based on Chrome 41.
 * https://developers.google.com/search/docs/guides/rendering
 **/
import 'core-js/es6/array';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js';  // Run `npm install --save classlist.js`.

/** IE10 and IE11 requires the following for the Reflect API. */
/**
 * DO NOT REMOVE
 * By default, Reflect polyfills are auto-included by the CLI and
 * are required for JIT compilation.  StackBlitz examples are
 * compiled using JIT.
 */
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';

/**
 * Web Animations `@angular/platform-browser/animations`
 * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
 * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
 */
import 'web-animations-js';  // Run `npm install --save web-animations-js`.

/**
 * By default, zone.js will patch all possible macroTask and DomEvents
 * user can disable parts of macroTask/DomEvents patch by setting following flags
 * because those flags need to be set before `zone.js` being loaded, and webpack
 * will put import in the top of bundle, so user need to create a separate file
 * in this directory (for example: zone-flags.ts), and put the following flags
 * into that file, and then add the following code before importing zone.js.
 * import './zone-flags.ts';
 *
 * The flags allowed in zone-flags.ts are listed here.
 *
 * The following flags will work for all browsers.
 *
 * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
 * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
 * (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
 *
 *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
 *  with the following flag, it will bypass `zone.js` patch for IE/Edge
 *
 *  (window as any).__Zone_enable_cross_context_check = true;
 *
 */

/***************************************************************************************************
 * Zone JS is required by default for Angular itself.
 */
import 'zone.js/dist/zone';  // Included with Angular CLI.

If print directed through the PDF viewer the font-weight getting Very light which cause a user readability issue to read and if print the downloaded PDF.
the font-weight printed as expected(Normal view).

If i am not mistaken, the package doesn't support a pdf file in base64 encoding. But pdf.js does.
It looks like this:

In my pdf.component.ts, pdfData property is pdf (base64 format), which is converted to Uint8 format. When I assign it to pdfSrc (inside .html file), the src is then "assets/pdfjs/web/viewer.html?file=", and therefore on my page the PDF is not loaded -> it throws an error that PDF file is missing. How can I make it that when I put Uint8 to pdfSrc, it will display the PDF inside the pdf viewer?

In my component.html file:
<ng2-pdfjs-viewer pdfSrc="{{pdfData}}"></ng2-pdfjs-viewer>

In my component.ts file:

ngOnInit() {
this.pdfData = this.convertDataURIToBinary(PDF);
}

convertDataURIToBinary(dataURI: string): Uint8Array {
let raw = window.atob(dataURI);
let rawLength = raw.length;
let array = new Uint8Array(new ArrayBuffer(rawLength));
let i: number;
for (i = 0; i < rawLength; i++) {
array[i] = raw.charCodeAt(i);
}
return array;
}

Hi,

I would like to know why

npm install ng2-pdfjs-viewer --save

always installs version 0.2.29. As I can see in your package.json, the most recent version should be 1.0.1, correct? If so, it seems that this version was not yet published to npm. Could you let me know when this will be done?

Thanks in advance, Andreas

To reproduce

npm install ng2-pdfjs-viewer --save

cp -r ./node_modules/ng2-pdfjs-viewer/pdfjs ./src/assets/

In app.module.ts

import { PdfJsViewerModule } from 'ng2-pdfjs-viewer';

@NgModule({
    imports: [
        BrowserModule, HttpClientModule, FormsModule, RouterModule, CoreModule,
        PdfJsViewerModule,
    ],

Issue

WARNING in ../node_modules/@angular/core/fesm5/core.js 25373:15-36
Critical dependency: the request of a dependency is an expression

WARNING in ../node_modules/@angular/core/fesm5/core.js 25385:15-102
Critical dependency: the request of a dependency is an expression

ERROR in ../node_modules/ng2-pdfjs-viewer/ng2-pdfjs-viewer.umd.js
Module not found: Error: Can't resolve '@angular/common' in '../node_modules/ng2-pdfjs-viewer'

Version Info

"ng2-pdfjs-viewer": "^3.4.8",

Angular CLI: 7.2.3
Node: 10.15.0
OS: darwin x64
Angular: 8.0.3

@angular-devkit/architect 0.12.3 (cli-only)
@angular-devkit/core 7.2.3 (cli-only)
@angular-devkit/schematics 7.2.3 (cli-only)
@schematics/angular 7.2.3 (cli-only)
@schematics/update 0.12.3 (cli-only)
rxjs 6.5.2

Hi,

I'm receiving an error when trying to navigate to a specific section of a Pdf.

PDFLinkService.navigateTo: "null" is not a valid destination array, for dest="3.2".

I'm running Electron/Angular 7 using the latest 3.5.1 which uses hashes to navigate routes.

Example: loading the following route

"dist/index.html#/docs"

Then specifying the nameddest

  _nameddest = '3.2';

  ngAfterViewInit(): void {
    this._service.getPdf().then(result => {
        this.pdfViewer.pdfSrc = result;
        this.pdfViewer.nameddest = this._nameddest;
        this.pdfViewer.refresh();
    });
  }

Perhaps something like this looks to be a similar issue to:
stephanrauh/ngx-extended-pdf-viewer#71

Any suggestions of how to workaround this would be greatly appreciated

Thanks,

Facing below error while opening PDF in IE11.

PDF.js v2.0.428 (build: 6662985a)
Message: Unexpected server response (500) while retrieving PDF "blob:3DFCCA27-0A17-460F-82BC-29DB796BE3BB".

working fine in other browsers(Chrome, FF and Edge).

How to direct to a certain page programmatically.
For example, if I set the pageNumber, it should direct to that page

Hi,

I'm trying to use this on my CLI-Project. I copied the pdfjs folder on my assets, but it keeps saying that 'ng2-pdfjs-viewer' is not a known element:

1. If 'ng2-pdfjs-viewer' is an Angular component, then verify that it is part of this module.

Any ideas? I imported on app.module.ts and nothing.

Thank you in advance

Browser : IE

When I try to open PDF file, the file is not loaded.

I have this error :

PDF.JS v2.2.171
Message : Unable to get propery ""headerReady" of null reference or undefined

Do you have any suggestions ?

Thank you.

My angular version is 4.4.7. When starting the project, the error throws:

ERROR in Metadata version mismatch for module C:/software/project/lazy/node_modules/ng2-pdfjs-viewer/ng2-pdfjs-viewer.d.ts, found version 4, expected 3, resolving symbol AppModule in C:/software/project/lazy/src/app/app.module.ts, resolving symbol AppModule in C:/software/project/lazy/src/app/app.module.ts

it seems the Metadata version should be 3 instead of 4, how to fix this issue ? Please help, thanks

I would like to know how to switch between 2 local pt-BR and en-US?

your angular sample code as well as application does not work in IE 11 can you please check it once... its showing error

i am using this library. In my local machine everything is working fine. But on our testing server i getting 401 unauthorized screen instead of PDF file.I am passing unit8Array data to src which works fine on my local environment. Not able to understand how to fix this issue. Any help will be appreciated. Thanks in advance.

When the pdfjs viewer gets loaded, it loads the following three large JS files:

It would be nice if the component defaulted to use the minified versions of these files to save load time. The minified versions of each of the three files are located here:
https://github.com/mozilla/pdfjs-dist/tree/master/build

Perhaps the component could have a [debug] input, and when set to true, it would use the full version of each of the JS files (with sourcemaps).

This is unrelated, but you should probably update your README to list the following as a way to copy pdfjs to the assets directory:

As large number of users use this wonderful library for Angular and updates being released frequently, it becomes necessary to maintain tags for commits . Subsequently updating release under the releases tab which will help users get what the need. Thanks.

How to set Zoom 100% instead of Automatic in this library

How to capture pdf finished loading event in angular 2 ?

Hi , Is there any option to load the particular specified pages alone?
For example:
How to load [2nd] (or) [2nd and 3rd] page alone in the PDF viewer from a 7 page PDF document

Hello,

The pdf viewer appears in an extremely small height.

HTML

TS

My guess is that the pdfjs still thinks that the content is empty when I call refresh, what do you think?
Not sure if the warnings are relateable.

We generate PDFs and show in Chrome (74.0.3729.169 build) and IE11 (011.0.9600.19377 build) with the ng2-pdfjs-viewer component (3.4.8 version). Both of them show the same results and it's fine. But when we try to print documents, results of printing are different: after Chrome the resulting document looks the same as visible PDF, but in IE11 the resulting document content is shrunked (scaled down). We finished fixing the problem with updating viewer.css for IE. It there some right way to fix the problem without updates of ng2-pdfjs-viewer code ?

I can see there is a lot of console.log() in pdfjs/web/viewer.js added for testing purposes. Can we please have them removed? It is unnecessarily spamming console output in the developer's mode of browser

Is there a way to get current page number and set a page number programmatically

When you load the pdf using a byte array or a blob you have to press back twice come back to previos page.

For example : You have an overview with a list of files, and when you click on on row will be redirected to a detail page where the pdf content is shown. In this case I have to press twice back button to the to the overview page.

This issue can be reproduced on the demo app : https://ng2-pdfjs-viewer.azurewebsites.net/bytearray

Steps:
Browser: Firefox

1. Click on "Simple Configuration" from sidebar
2. Click on " Blob and Byte array " from sidebar
3. Press back button

Actual result: The frame with the pdf content is cleared, and I have to press again back to go to "Simple Configuration"
Expected result: Navigate back to "Simple Configuration"

If you know a solution for this issue please help me. I may case the back button is integrated in the application and we have an issue opened by the client

Hi,
Is there any plans to upgrade this libary to Angular 8?
Thanks!

It seems we've started the same project simultaneously and independently of each other. Would you mind to mention my project in the readme file? In return, I'd do so, too. Plus, I'd like to blog about your project.

Project coordinates:
https://www.npmjs.com/package/ngx-extended-pdf-viewer
https://github.com/stephanrauh/ngx-extended-pdf-viewer

How to call print after the pdf is loaded.

I use this hack, but the page is not scaled properly:

ngOnInit() {
   this.downloadFile('url').subscribe(
      (res) => {
         this.pdfViewer.pdfSrc = res;
         this.pdfViewer.refresh();
         setTimeout(() => {
             window.print();
         }, 1000);
      }
   }
}

How should I disable/restrict copy paste functionality of PDF content as no direct property is given to modify it.

Hi, there is an issue with print function in Firefox (version: 70.0.1).
When I print pdf, a blank page added to the end of the document.

Reproduction with the demo app: https://ng2-pdfjs-viewer.azurewebsites.net/home
Error occurs on the 'simple configuration' page.
Other pages work correctly.

Hey! There is a problem with events, when open pdf in external window. They are not triggered even with 'viewerId' attribute. Here is my code:

##HTML

 <a *ngIf="document.s3_link" class="document-title" (click)="openDocument(document)">{{ document.description }}</a
                    >
<ng2-pdfjs-viewer
        #externalPdfViewer
        viewerId="MyUniqueID"
        [externalWindow]="true"
        (onDocumentLoad)="highlightSearchTerm()"
    ></ng2-pdfjs-viewer>

##TypeScript

openDocument(document): void {
        this.getDocumentBlob(document.s3_link).subscribe(res => {
            this.externalPdfViewer.pdfSrc = res
            this.externalPdfViewer.downloadFileName = document.description
            this.externalPdfViewer.refresh()
        })
    }

getDocumentBlob(link): Observable<any> {
        let headers = new HttpHeaders()
        headers = headers.set("Accept", "application/pdf")
        return this.http.get(link, { headers: headers, responseType: "blob" })
    }

    highlightSearchTerm() {
        this.externalPdfViewer.PDFViewerApplication.findController.executeCommand(
            "find",
            {
                caseSensitive: false,
                findPrevious: undefined,
                highlightAll: true,
                phraseSearch: true,
                query: this.initQuery,
            }
        )
    }

Hi,

I'm having trouble showing and hiding the buttons that are being displayed at the top of the PDF-viewer.

This doesn't work in Html:

<ng2-pdfjs-viewer [openFile]="false" [download]="false" [externalWindow]="false"> </ng2-pdfjs-viewer>

but also not in TypeScript:

this.pdfViewer.openFile = false; this.pdfViewer.download = false; this.pdfViewer.externalWindow = false;

Everything worked fine in version 0.2.29 (the one before the rewrite) but now I simply can't toggle the buttons.
However what works fine in the above statements is externalWindow. Only the buttons are somehow broken.

Any hints to a solution greatly appreciated, thanks!

Not able to open pdf hosted in the foreign domain. Getting cors error. Is there any option to load pdf hosted in aws s3?

Hi there!

I got "ERROR in Metadata version mismatch found version 4, expected version 3". Angular 4 package is still using version 3 for now. Would you mind me forking the library and re-publishing it for angular 4 (with module version 3)?

Thanks

Viewer removes parameters from the pdf URL. Consider using URL like http://my.api/get?id=123&name=test

To the admin.
Its a really awesome control, however I found few issues like events are not working after setting the viewerid as well and i am setting the page number from code behind which is also not changing the page .
Need ur help in this regards.

Hi, how to listen events from ng2-pdfjs-viewer? I want to listen event afterPrint to close the preview form automatically. Please suggest me how to do this?

Hi,

Will this libary be update to the new angular version '7' soon?

Thanks!

Hi,

I'm trying to implement your package into Angular 5 application. However, it doesn't work.
Can you please see what I need to do to make it work.
I followed your tutorial, but I'm getting the following message:

Error: Template parse errors:
'ng2-pdfjs-viewer' is not a known element:
1. If 'ng2-pdfjs-viewer' is an Angular component, then verify that it is part of this module.
2. If 'ng2-pdfjs-viewer' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("


    <div class="some-pdf-container">

        [ERROR ->]<ng2-pdfjs-viewer #pdfViewer

                          pdfSrc="../../../../assets/pdfjs/blank.pdf"><"): ng:///DashboardModule/SettingsComponent.html@3:8

Thanks

How to import when using es5 and global variable?

['ng2-pdfjs-viewer'].PdfJsViewerModule
ng2PdfjsViewer.PdfJsViewerModule
ect ....

index.html:
<script src="scripts/ng2-pdfjs-viewer/ng2-pdfjs-viewer.umd.js"></script>

app.js:

	var AppComponent = function () {
	};

	AppComponent.annotations = [
		new ng.core.Component({
			selector: 'app-root',
			template: 'Hello'
		})
	];


	var AppModule = function () {
	};

	AppModule.annotations = [
		new ng.core.NgModule({
			imports: [ng.platformBrowser.BrowserModule, ['ng2-pdfjs-viewer'].PdfJsViewerModule],
			declarations: [AppComponent],
			bootstrap: [AppComponent]
		})
	];

	document.addEventListener('DOMContentLoaded', function () {
		ng.platformBrowserDynamic.platformBrowserDynamic().bootstrapModule(AppModule);
	});

Error:

ng2-pdfjs-viewer.umd.js:134 Uncaught TypeError: Cannot read property 'Component' of undefined
    at ng2-pdfjs-viewer.umd.js:134
    at ng2-pdfjs-viewer.umd.js:153
    at Object.defineProperty.get (ng2-pdfjs-viewer.umd.js:4)
    at ng2-pdfjs-viewer.umd.js:5
(anonymous) @ ng2-pdfjs-viewer.umd.js:134
(anonymous) @ ng2-pdfjs-viewer.umd.js:153
Object.defineProperty.get @ ng2-pdfjs-viewer.umd.js:4
(anonymous) @ ng2-pdfjs-viewer.umd.js:5
zone.js:192 Uncaught Error: Unexpected value 'undefined' imported by the module 'AppModule'
    at syntaxError (util.ts:100)
    at metadata_resolver.ts:563
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.getNgModuleMetadata (metadata_resolver.ts:524)
    at JitCompiler._loadModules (compiler.ts:127)
    at JitCompiler._compileModuleAndComponents (compiler.ts:107)
    at JitCompiler.compileModuleAsync (compiler.ts:61)
    at CompilerImpl.compileModuleAsync (compiler_factory.ts:57)
    at PlatformRef.bootstrapModule (application_ref.ts:274)
    at HTMLDocument.<anonymous> (app-pdfview2.js:32)

My API is requesting Authorization header to access the files. How do i pass headers while passing URL in pdfSrc?

What I am trying to is something like below;

 @ViewChild("pdfViewerOnDemand") pdfViewerOnDemand: PdfJsViewerComponent;

// Can we have this available?
let entirePageTextContent = this.pdfViewerOnDemand.getTextContent(pageNumber);

I miss the fullscreen button, as seen here: http://mozilla.github.io/pdf.js/web/viewer.html

Any chance to add this option?

Another, slightly off topic question: How do you know the url options for the Mozilla viewer? I did not found them in the official documentation.
I tried to use the latest version of gh-pages and the options doesn't work there at all (but the fullscreen button is visible and functional, yay).