stephanrauh / ngx-extended-pdf-viewer Goto Github PK

Hello,
How can do so to select the default "main" tools ?
Thanks !

Steps to reproduce:

• use my company project (but probably that's a general issue)
• use the option [zoom]="persistentZoomSetting"
• open the PDF viewer tab. It should show a document.
• select a different zoom in the dropdown field
• now the JavaScript console shows an exception
• open another PDF document
• now the zoom is reset to the default setting. In most cases, that'd be "automatic"

Is there a way to change the icon and icone size and add the ability to download as csv?

Hi Stephan how I can define the filename when user click over download button? Now is always using document.pdf

I want to set page ranges (like 3-5) for a 7 page PDF document which is already rendered in the PDF viewer. How to achieve this with [page] attribute ?

I'm getting errors loading the PDF through bytes when I refresh the page.

If I'm on 'X' route and go 'Y', the route where the viewer is, it works fine.
If I reload 'Y', pdf viewer, then it crashes and doesn't show the PDF. Some times it kinda loads because I can download it but nothing shows. And a few times it shows but the errors still appear.

Thank you

getting the above message when getting the Uint8Array of the pdf. Does the src support this?

Less than a week ago, the first official release of pdf.js 2.0 has seen the light of the world.

Let's update our library to the release.

Is it possible to bind the displayed page to a property in the component, where ngx-extended-pdf-viewer is used? For example, after I displayed a pdf in ngx-extended-pdf-viewer and scrolled down to page 5, how
should I inform my typescript code that I am currently on page 5?

I'm using ngx-extended-pdf-viewer with almost all features disabled except zoom, pagination, download and print.

When setting the showSidebarButton param to false, the sidebar still loads.

Looking at the code, sidebarViewOnLoad is hardcoded to 1. Shouldn't this option either be an input parameter or be set according to showSidebarButton?

It seems the sidebar and the document have absolute positions. As a consequence, they aren't pushed down when the toolbar grows.

Dear developers,
i was trying to visualize the pdf image using angular 7 with this part of code in html page:

<div *ngIf="floorInfo">
        <ngx-extended-pdf-viewer src ="'/assets/' + floorInfo.image">
        </ngx-extended-pdf-viewer> 
</div>

there is no errors, so i do not know what is wrong with the code, but i can see only gray screen of the pdf viewer and the control buttons located in the wrong way on it and no image.
I tried with the static image and everything was working fine, but i need the image to be loaded dynamically based on the selection of the user.
Any idea what am i doing wrong?
Any suggestion is appreciated.
Thanks in advance,
Liudmila

While investigating #12, I noticed there are memory leaks concerning the PDFViewer object. It's referenced my many widgets even after destroying the PDF viewer and removing it from the DOM.

The memory leak is roughly 30 KB each time a PDF viewer is created (e.g. after hiding and showing the PDF file again).

When you open this file for ex(http://www.peoplelikeus.org/piccies/codpaste/codpaste-teachingpack.pdf) in chrome or firefox, the file begins displaying first pages as it's downloading, but viewing it in ngx-extended-pdf-viewer it downloads the whole file before showing the first page, I was wondering if behaviour similar to viewing it through browser address bar might be possible, to show pages as they download.

This is same for ng2-pdf-viewer and ng2-pdfjs-viewer, I haven't tested with default pdf.js library yet, there is also this:https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#range.

Also to mention that when you view the file using embed or object tag, you get same behaviour - views pages as they are downloading. I am not sure if this is a limiting of using external packages other that browser default or related to module, it's most likely the former, but having lazy-loading kind of behaviour is one of my main motivations for using this library

Steps to reproduce:

• open a PDF in <ngx-extended-pdf-viewer>
• go to another page container a new instances of <ngx-extended-pdf-viewer>

It would be nice if Github's README had all the helpful information from the NPM README. Can they not be one and the same?

Also, why not have your releases and changelog managed in Github?

If click on showPresentationModeButton, the following error will show up:

TextLayerBuilder._bindEvents: this.cancel() should have been called when the page was reset, or rendering cancelled.

Steps for reproduce:

1. Check out repository
2. Click the button "Show PDF" -> click the button "back" -> again click the button "Show PDF" ->
   click showPresentationModeButton.

P.S.
The error shows up only if you came from another component using router. If you refresh the page and click on showPresentationModeButton then nothing will happen.

P.S.S.
I tried to upload the reproduction on some sandbox platform as stackblitz, but unfortunately I failed to add dependencies from node_modules/ngx-extended-pdf-viewer/assets/ as it doesn't support (or I didn't find how) changes in scripts in angular.json

Currently, the toolbar buttons and input fields are too small to be used on a mobile devices, especially if the users are wearing gloves (which is a frequent use case in industrial applications).

Let's add an option increasing the size of the toolbar. For instance,

• [toolbarSize]="200%"
• [mobile]="true"

Hi there,

First of all, thanks a lot for this great plugin. I have been able to work with it from NCompass document management system and it is being rendered properly. However, I have a problem with another backend that is sending me over the blob instead of base64.

Description
I am receiving from a backend a PDF file and am unable to load into ngx-extender-pdf-viewer.

setPDFDataFromBinary(arg: any) {
    const blob = new Blob([arg], {type: 'application/pdf'});
    this.pdfData = URL.createObjectURL(blob);
  }

And then in the stmt viewer component I have:

 this.stmtPDFBinaryData  = this.mySession.pfData;

---html--
<ngx-extended-pdf-viewer
  [showPrintButton]="false"
  [showPropertiesButton]="false"
  [showBookmarkButton]="false"
  [showOpenFileButton]="false"
  [src]="stmtPDFBinaryData"
  useBrowserLocale="true">
</ngx-extended-pdf-viewer>

Current Behavior:
This shows in the console:

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'then' of undefined
TypeError: Cannot read property 'then' of undefined
    at viewer.js:1101
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
    at Object.onInvoke (core.js:17289)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:390)

PLEASE NOTE:
It is not the backend sending the PDF because I am able to download the file and view it in the browser using the following method:

 downloadFile(arg: any) {
    const blob = new Blob([arg], {type: 'application/pdf'});
    const link = document.createElement('a');
    link.href = window.URL.createObjectURL(blob);
    link.download =
      this.accountSummaryAppResponse.accountNumber +
      '-' +
      this.statementDate +
      '.pdf';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }

if you leave the page between initializing the PDF viewer and loading the PDF file, you get error.
For reproduction is enough to set delayFirstView as 5000

logger.ts:120 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'div' of undefined
TypeError: Cannot read property 'div' of undefined
at backtrackBeforeAllVisibleElements (viewer.js:3129)
at getVisibleElements (viewer.js:3176)
at PDFViewer._getVisiblePages (viewer.js:8637)
at PDFViewer.update (viewer.js:8653)
at webViewerScaleChanging (viewer.js:1948)
at viewer.js:3368
at Array.forEach ()
at EventBus.dispatch (viewer.js:3367)
at PDFViewer._setScaleDispatchEvent (viewer.js:9040)
at PDFViewer._setScaleUpdatePages (viewer.js:9073)
at backtrackBeforeAllVisibleElements (viewer.js:3129)
at getVisibleElements (viewer.js:3176)
at PDFViewer._getVisiblePages (viewer.js:8637)
at PDFViewer.update (viewer.js:8653)
at webViewerScaleChanging (viewer.js:1948)
at viewer.js:3368
at Array.forEach ()
at EventBus.dispatch (viewer.js:3367)
at PDFViewer._setScaleDispatchEvent (viewer.js:9040)
at PDFViewer._setScaleUpdatePages (viewer.js:9073)
at resolvePromise (zone.js:814)
at resolvePromise (zone.js:771)
at zone.js:873
at ZoneDelegate.push.../../../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:14051)
at ZoneDelegate.push.../../../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
at Zone.push.../../../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
at drainMicroTaskQueue (zone.js:595)

I know it is an ugly and problematic browser, but we have a requirement to show PDFs in all browsers. I check the library and works smoothly in Edge, Firefox and Chrome. But not load in Internet Explorer and in the developers' tools show a JS error.

This is not working with base64 string could you please provide some demo stackblitz link.

Does the library support dynamic PDF response in blob or array buffer format instead of local path

When I downgrade to 0.9.4 it is working again.

Not showing any errors in console (tons of console.warn). The div for the page seems to exist but has no content.

• Last version that seems to work good is 0.9.8,
  0.9.9 no document displayed

Input for Spread Odd for two pages side by side

We're using Angular material's tabs with ngx-extented-pdf-viewer [version 0.9.8]. In the first tab it works perfectly, but in the second or third tab, it's broken and throws an error on console: no resource to load, early way out

.

Code sample

`ngOnInit() {

this.route.params.subscribe(id => {
  this.documentId = id['id'];
  this.documentApi
    .getSingleDocument(this.documentId)
    .subscribe((data: OneDocument) => {
      this.document = data;
      this.pdf = true;
    });
});

}`

The "hide/show" button of the demo in the repository allows to hide the PDF file when it's still being displayed.

Ideally, this bug should be solved. However, I don't think that's possible to do without modifying the underlying pdf.js library.

So let's document the bug nuisance in the readme file.

Hi Stephan,

First of all, this is not an issue. I didn't got any comment option so i am asking the question under Issue tag.

What i am trying to achieve:

1. On Click of a text outside the PDF, i need to search that text in PDF. User can click any text any number of times.

What achieved so far:
Via java-script code i am able to set the value of findInput (search textbox id) and on click of the findNext via js code only, i am able to search the text clicked by the user in PDF.

Problem:
But this is happening for the first text only clicked by the user.
If user clicks on any other text, we are able to set the values of search textbox and click on findNext is searching for the previous text only with the length of current text clicked.
But if user edit the text manually in search text box, search is performed as expected.

e.g:
PDF:
this is my pdf text and i am going to search one word.

Search: "going" //1st time
output: this is my pdf text and i am going to search one word.

Search: "word" //2nd time
output: this is my pdf text and i am going to search one word.

Could you please guide us how we can achieve this functionality via code.

Thanks,
Akash

When all functionalities have been set to false, the top bar remains visible. This is a weird effect, because now only an empty top bar is visible, which serves no purpose.

It seems overriding this in CSS would be a solution, yet this is not possible due to inline styles.

pdf.js supports passing nameddest according to the viewer option page. Would it be possible to add support for this as an input?

@stephanrauh , Hi
I was trying to use package, it gives me the following error:
ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'dispatch' of null
**TypeError: Cannot read property 'dispatch' of

Package some time it work but some time it not work.

Thanks a lot in advance,

First of all, thank you for implementation such a component. Really useful.

After last update I got a problem with font-size. All of my html elements in body changed font-size.

Here is a screenshot:

It contains meaningless "j" at the "/projects/ngx-extended-pdf-viewer/src/lib/ngx-extended-pdf-viewer.component.html" line 54.

Since PDFJs allows for the src to be either a string or a byte array, that should also be reflected in ngx-extended-pdf-viewer.

Related PDFjs lines:
https://github.com/mozilla/pdf.js/blob/master/src/display/api.js#L225-L229

Hello,
I tried to do the steps of how to build. However, I encounter different errors. When I tried to use the command "gulp server";

AssertionError [ERR_ASSERTION]: Task function must be specified
    at Gulp.set [as _setTask] (D: \ adf \ testViewer \ embedded-pdf \ mozilla-pdf.js \ node_modules \ undertaker \ lib \ set-task.js: 10: 3)
    at Gulp.task (D: \ adf \ testViewer \ embedded-pdf \ mozilla-pdf.js \ node_modules \ undertaker \ lib \ task.js: 13: 8)
    at Object. <anonymous> (D: \ adf \ testViewer \ embedded-pdf \ mozillas-pdf.js \ gulpfile.js: 567: 6)
    at Module._compile (internal / modules / cjs / loader.js: 689: 30)
    at Object.Module._extensions..js (internal / modules / cjs / loader.js: 700: 10)
    at Module.load (internal / modules / cjs / loader.js: 599: 32)
    at tryModuleLoad (internal / modules / cjs / loader.js: 538: 12)
    at Function.Module._load (internal / modules / cjs / loader.js: 530: 3)
    at Module.require (internal / modules / cjs / loader.js: 637: 17)
    at require (internal / modules / cjs / helpers.js: 22: 18)

The following steps do not work. In addition, the ngx-extended-pdf-viewer and inlineImageFiles folders do not exist.

Can you help me please?

It would be really helpful if you could post something in the README about how much this package affects prod build size. You can see package size by using this type of command:

ng build --prod --stats-json && npx webpack-bundle-analyzer dist/NAME_OF_PROJECT/stats.json

Furthermore, it would be even more helpful if you were to compare the size of this package to the competition.

Currently setting [height]="'100%'" will result in the pdf not being displayed as the container has a height of zero. This can be easily fixed by also setting the .zoom container to height: 100%.

When trying to set the backgroundColor to "#fff" (or alike), it's not being applied. However, when trying other combinations, the color is being applied correctly.

It seems several settings are stored on a per-document basis. In general, that's probably a good thing, but we've got an application with several PDF files. Most of the time, the zoom level isn't perfect, so we modify it. After switching to another PDF file, the zoom level is reset to some default.

Here's the catch: going back to the first PDF file restores the zoom level.

In our case, our users prefer to set a zoom level and to stick with it all day. Obviously, there are use cases with different needs, so the "sticky zoom level" should be an option that may or may not be activated.

In a way, the title of this ticket is misleading, since every language of the world is supported by ngx-extended-pdf-viewer. However, there's the folder "assets/inline-locale-files". It's meant to help developers to add native and fast access to their native language.

Until version 0.9.5, this folder only contains the German translation file. Let's make the library international!

There's already a working example at the GitHub repository:

• use lazy loading,
• hide the PDF file for at least 500 ms after activating the tab
  ** the long delay may be caused by the animation of Material Design

Hi Stephan let me know how I can call a callback function when document is loaded from server? There are something like (after-load-complete) of ng2-pdf-viewer ?

When I print from this control it reduces the size, whereas if i download the file and then print it works fine.

Is it possible to add this functionality? It doesn't show the matches right now (for example 3 of 10 matches)

https://mozilla.github.io/pdf.js/web/viewer.html

Original ticket reported by @javid-abd.

I wasted almost full day to implement this library in my project using this link https://github.com/stephanrauh/ngx-extended-pdf-viewer/blob/master/projects/ngx-extended-pdf-viewer/README.md
but its always show the blank file not showing any content, when I click on download link file downloaded successfully with all content
Second base64 string also not working in this library,
don't what the issue,why don't you provide us any working stackblitz link.

Could we bump versions in peer dependencies to support angular 7. After several testing I don't think any change in v7 breaks the lib.

So we could extend peer dependencies or we could bump major version to support v7 only.

Hi!

Great work on the library and thanks for sharing.

There is one issue which is weird - when I click on the search button the input field is pre-populated with a saved username from some login form.

It is my email address and also I get 4 suggestions for other usernames.

This is strange so I checked out the original viewer:

https://mozilla.github.io/pdf.js/web/viewer.html

I don't have the problem on there . Any idea? 🤔

BUG

Access to fetch at 'https://www.adobe.com/support/products/enterprise/knowledgecenter/media/c4611_sample_explain.pdf' from origin 'https://dashboard.finna.ai' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I can't use any remote URL for pdf rendering. All of these point out this CORS problem. It used to work properly but it seems something as changed.

@angular/core 7.2.2
@angular/cli 7.2.3