legalthings / angular-pdfjs-viewer Goto Github PK
View Code? Open in Web Editor NEWPDF.js viewer directive for AngularJS
License: MIT License
PDF.js viewer directive for AngularJS
License: MIT License
Hi,
thank you for posting such a nice article.
I have tried to setup this in IIS and tried using the demo.
I am getting the ReferenceError: PDFViewerApplication
any clues?
Regards
Kalyan
Error thrown when scrolling at any time in dashboard:
Uncaught TypeError: Cannot read property 'isInPresentationMode' of nullhandleMouseWheel
Error points to line 57187 in pdf.js.
I have include PDF.js and also set the url of pdf.worker.js but still i am getting this error in console. What i am doing wrong ?
Steps to reproduce :
Please suggest on how to tackle this.
I was trying to use this directive in an application that has several ui-router states. I'm using the directive inside a dialogue box that could be opened from any state.
After using the pdf viewer, any state transitions would kick me back to my initial state, making the application unusable until the page was refreshed. I did notice that after opening the pdf viewer, it would change the title in the browser tab from the application's name, to the title of the pdf that was opened, and I checked a stack trace that seemed to imply that fireUrlChange() was causing the unexpected state transition. I was not able to determine why though.
Hi,
Thanks for your awesome work.
The thumbnailView is not reloading when I set a new PDF file.
I code the example below to simple testing (just the demo/app.js).
Please, first run the demo like your instructions on main page (node server.js), open the thumbnailView, wait for 4 seconds and you will see that the thumbs about first document, maintain.
file:demo/app.js
angular.module('app', ['pdfjsViewer']);
angular.module('app').controller('AppCtrl', function($scope, $timeout) {
$scope.pdf = {
src: 'example.pdf'
};
$timeout(function() {
$scope.pdf.src = 'example2.pdf';
}, 4000);
});
PS.: You should provide any example2.pdf file
Can't get external links in PDFs to work (tested in Firefox, Chrome etc.).
Is this a known limitations of the angular-pdfjs-viewer or am I doing something wrong?
(Other than that everything is working fine!).
Is there a way to load PDFs from byte stream?
I have PDFs saved as byte array into DB, I would like to show them from within the viewer, but i only have "src" and it is supposed to open the document from an url.
My requirement for displaying a PDF in my web application includes the requirements for: Print, Rotate, Zoom and Pop Out in New Window. I'd like to be able to customize the PDF viewer layout to remove some unneeded features, move the Rotate features to the main toolbar and add a button for Pop Out in New Window to the toolbar, but of course I don't want to go in and directly start editing the HTML. I can get part of the way toward my goal with just CSS but CSS alone won't work for all of my needs.
There doesn't seem to be a supported strategy for this type of customization but am I wrong about that? If not, what is a recommendation for the best way to go about this? I'd like to do it in a way where, of course, I would still be eligible for updates made to the angular-pdfjs-viewer module in the future.
Hi,
I am working on angular 4 project. I like angular-pdfjs-viewer , Now i need to do the same with angular 4 is there is any way i can easily migrate and use this plugin.
Hello, I am having a problem when I try printing. I have a 3 page pdf, when I print I have 4 pages in the preview, and they are blank pages, except for the date and pdf name in the top, and in the bottom I have the URL of the site where the code is implemented.
Best regards
ER
Hi,
I needed to load a PDF from a REST API and this failed because the credentials were not sent in the request. I found out that this is possible by passing an argument object with '{ "withCredentials": true }' as the second parameter to PDFViewerApplication.open().
Unfortunately angular-pdfjs-viewer does not support this, so I forked your project and made a quick fix. Maybe you could evaluate if this is a valid approach and can be merged or if you prefer another solution.
Hi,
Thanks for your awesome work. I have been evaluating your plugin and find it very useful.
However, I have a requirement of showing 2 PDF files side by side. The first controller loads the PDF without any problems. For the second, I see the below error in the browser console.
pdf.js:11696 There can only be one pending page. PDFFindController_nextPageMatch
PDF Viewer is displayed but no PDF file in it.
Is there a workaround/solution for this issue?
Appreciate your response.
Cheers,
Can you show a demo of this implemented inside of an existing site?
Whenever I try to embed inside a
that's placed somewhere on a site, I get something like this:Also, I get an error in the console:
angular.js:12793ReferenceError: PDFViewerApplication is not defined
at angular-pdfjs-viewer.js:380
at s (angular.js:11610)
at m.$eval (angular.js:16321)
at m.$digest (angular.js:16139)
at m.$apply (angular.js:16429)
at angular.js:11600(anonymous function) @ angular.js:12793
387angular.js:12793 ReferenceError: PDFViewerApplication is not defined
at angular-pdfjs-viewer.js:380
at s (angular.js:11610)
at m.$eval (angular.js:16321)
at m.$digest (angular.js:16139)
at m.$apply (angular.js:16429)
at angular.js:11600(anonymous function) @ angular.js:12793(anonymous function) @ angular.js:9526m.$digest @ angular.js:16141m.$apply @ angular.js:16429(anonymous function) @ angular.js:11600
Supposing the pdf url responded with an error, how can we catch it so that we can provide a customized message or provide a logic?
Thanks for making angular-pdfjs-viewer
. It looking great.
There seems to be an issue with printing. PDF.js complains when calling renderProgress
, it crashes because the template is lacking 2 divs:
The renderProgress function searches the mozPrintCallback-shim
, but cannot find it. It is null
and
Crash:
var progressContainer = document.getElementById('mozPrintCallback-shim');
is null...
One cannot call querySelector
on it.
Is the solution as simple as adding the missing divs to the template?
Nothing more frustrating than spending a day trying to drop packages into your project that are supposed to be plug and play and they don't work so you start spiraling down a list of alternatives trying anything hoping something will work, only to still be bombing out on your fourth attempt.
pdf.js:17939 Uncaught (in promise) TypeError: Cannot read property 'firstElementChild' of null
at new PDFViewer (pdf.js:17939)
at pdf.js:12985
at new Promise (<anonymous>)
at Object._initializeViewerComponents (pdf.js:12973)
at pdf.js:12884
at <anonymous>
Template: <pdfjs-viewer data="ctrl.pdfData"></pdfjs-viewer>
Controller: ctrl.pdfData = new Uint8Array(UtilitiesService.generatePdfTable(categoryColumns, results, pdfTableOptions, pdfFilename, 'data'));
Total garbage. Not sure if it is your package or pdf.js but Jesus Christ is this frustrating.
for example this url "/filerepo/pdfs/file_name.pdf#page=17" will open first page.
Hello everyone,
until now i use angular-pdfjs-viewer 0.7.4 and everything works fine.
Now i was upgrading it (tryed it with both 0.8.0 and 0.8.1) and my build fails.
At the start of my build process i recompile the viewer.less with the global variable as it stands in the advanced configuration in the readme:
"lessc --global-var=\"pdfjsImagePath='../pdfjs'\" bower_components\\pdf.js-viewer\\viewer.less bower_components\\pdf.js-viewer\\viewer.css
As i said with 0.7.4 everything was ok. Now i get this:
SyntaxError: expected ')' got '/' in on line 2, column 4312:
And this fails:
border-image:url(@pdfjsImagePath/shadow.png)
While the print button now works, it doesn't do a nice print of the document only. It shows as if someone tried to print the website.
I am having the following problem. When I open the first document in pdf.js viewer and click the download button, that document is downloaded. But when I open a second document, and click download, that document is downloaded two times. And if I open a third document, click download, the document is downloaded three times. And so on. The problem here is, I think, that the event to download is being binded to the download button multiple times. Do you have any ideia how I can resolve this issue?
Hi,
I need to embed a pdf file in one of the pages. Up until today I used an iframe that showed the pdf and it worked like charm, I use my server as a proxy so I won't have a problem with CORS. I just added mobile support and the iframe pdf stopped wroking, the mobile downloads the pdf which is something that I don't want. I tried to integrate angular-pdfjs-viewer (as far as I know it supports mobile) but I can't get it to work. I am getting wired buttons and text instead of the pdf (image attached).
I tried to use the url and also the data like in the readme file example. Any idea ?
When I am using grunt serve the pdfjs viewer works fine, but when I generate the project dist and run does not work, it follows the two prints and the error in console
Uncaught ReferenceError: document is not defined
Uncaught ReferenceError: document is not defined blob:http://localhost:8080/b803276a-aa61-4f95-8710-1f6a04ac8cb6:1
Warning: Setting up fake worker.
scripts.e32ad488.js:formatted:10251 PDF db5d92d2d7ca03a71d959a1208c27b52 [1.4 iTextSharp™ 5.5.5 ©2000-2014 iText Group NV (AGPL-version) / -] (PDF.js: 1.1.215)
I'm using the $scope.data and pass data as a Uint8Array object.
Another error is:
PDFViewerApplication.pdfViewer is not set
TypeError: Cannot read property 'currentPageNumber' of null
Does anyone know if there is any additional configuration when generating the dist?
Hi, this really looks interesting.
There is one thing though.
To enable the viewer it needs the location of the pdf like src=...
Thing is, that the PDF's that we use must be protected and only accessed by users logged in. Just giving the src would not work in this case.
Is there a possibility for giving specific headers to it or setting data instead of src?
Then I could use angular for "downloading" the PDF into $scope.pdfdata
and then as argument for the viewer set data="pdfdata"
Hope you understand
I am using gulp to create the build for my project.
The code is working perfectly via gulp-serve
but when i try to use gulp build, it tries to find the worker file like vendor.worker.js
which is not found.
What could be the issue?
When the PDF cannot be loaded because of "invalid or corrupt PDF file" -- is there a directive we can use like on-init="" or on-page-load="" to run a function when this is incorrect?
I'd like to swap the pdfUrl out with a different sample PDF that has a pretty error.
Hi,
does anyone have experience using this viewer with Bootstrap. I try to embed it in row-col structure like this
<div class="row">
<div class="col-md-6">
<pdfjs-viewer src="{{ pdfUrl }}"></pdfjs-viewer>
</div>
</div>
and it act really strange
THX
Raf
pdfjs-viewer is working fine , but the thing is that i want to get pdf files from server and not from the localhost.
so can you please tell how i can change this..
Thanks
First of all, I want to congratulate you, this component is great, save me life
It will be excellent if you could migrate it to Angular 2
Many thanks for this wonderful library
I've a problem when embedding the PDF viewer in div element, the print functionality doesn't print the PDF.
here is example on what i've been working on
here is the result when i clicked button print
any suggestion or hints would be very much appreciated
Thanks
Hi Team,
I used this directive in my application.
After using this I observed controller is loading 2 times.
Code in controller.
$http.get($sce.trustAsResourceUrl(url), {
responseType: 'arraybuffer',
}).then(function (response) {
vm.data = new Uint8Array(response.data);
});
Thanks,
Ravi.K
Am getting PDFJS.webViewerLoad is not a function.
Am using Angularjs 1.6 and psf.js pdfjs-1.6.210.
Thx,
I have base64string pdf data (from API). Is there a way to pass any form of this to - pdfjs-viewer src ?
Tried various options which did NOT work -
a. using binary data. //window.atob(base64)
b. using Object URL created from blob.
base64 converted to -> blob -> object URL -> pfjs-viewer src
Ex code:
let currentBlob: Blob = new Blob([byteArrayData], { type: 'application/pdf' });
this.pdfSrc = window.URL.createObjectURL(currentBlob);
Please suggest. Thank you.
How to Stop Downloading the file when Press CTRL+s?
I'd like to use that module but I'm blocked due to the licence.
What does it means "license": "proprietary" ? in package.json
When I do either #1 or #2, the pdf viewer starts acting up. For example, when I open the sidebar and start clicking thumbnails, it breaks and won't let me close the sidebar anymore.
any ideas?
Please help to make a worked demo online.
Hi,
I'm facing a problem using angular-pdfjs-viewer :
Do you have any idea why ?
Do i have to reload or destroy the viewer instance someway ?
Thank you
My console shows the message, "no resource to load, early way out".
and "pdf.js:17022 PDF 110dd61fd57444010b1ab5ff38782f0f [1.4 pdfeTeX-1.21a / TeX] (PDF.js: 1.1.215)".
The toolbar for the viewer shows but the pdf section is blank. When click "presentation mode" button, the pdf displays fulls screen.
Any suggestions to get the pdf to show without clicking "presentation mode" would be appreciated.
Thanks,
It doesn't render the pdf after loading it on safari. It shows 3 warnings Warning: Could not find preferred cmap table.
But it works if you press the full screen button
I'm trying to render a PDF using IE9. The viewer renders on the screen, and when I click "Document Properties," I can see the info about the PDF. However, the PDF itself isn't being displayed. I did run the demo project in IE9 and that PDF is displaying fine.
I am having a angular one application in which i need to open pdf so on link button i create a new angular route in which i am having# </pdfjs-viewer> only this code And the pdf page displayed two page but none is displayed in viewer
getting this error PDFLinkService_navigateTo: "null" is not a valid destination array.
angular-pdfjs-viewer is great library, can we expose all other tool bar options so as to show or hide some of them. Another requirement i came across is to override the download button functionality, i got into situation where on download should make server call to retrieve raw document( which is in other format like .docx or .pptx etc..). I am converting into PDF and passing to pdfjs-viewer to view in the webpage.
I use data,
In the case that you cannot simply use the URL of the pdf, you can pass in raw data as a Uint8Array object. The data attribute takes a scope variable as its argument.
$scope.data = null; // this is loaded async
$http.get("http://example.com/file.pdf", {
responseType: 'arraybuffer'
}).then(function (response) {
$scope.data = new Uint8Array(response.data);
});
$scope.data
have database,but i use <pdfjs-viewer data="$ctrl.data"></pdfjs-viewer>
in html,not pdf view ,Prompt: "no resource to load, early way out". I need your help, thank you.
The PDF.js version number that is in the pdf.js-viewer is 1.1.215 but the PDF.js github repo is on 1.4.20.
There is a printing issue with IE. Is there anyway to update to the latest version of PDF.js?
First of all thank a ton for providing such a wonderful pdf viewer for anularjs.
My issue i am not able to view pdf with the below code, but the toolbar is visible.
<pdfjs-viewer src="{{ pdf.src }}" scale="scale" download="false" print="false" open="false" on-init="onInit()" on-page-load="onPageLoad(page)">
</pdfjs-viewer>
After doing the below code, i am able to view the pdf file but it is not working with boostrap col resize.
<div style="width: 800px; height: 550px;">
<pdfjs-viewer src="{{ pdf.src }}" scale="scale" download="false" print="false" open="false" on-init="onInit()" on-page-load="onPageLoad(page)">
</pdfjs-viewer>
</div>
Please help me as i need to use this with bootstrap.
Can anyone help me out how to use annotation on it like- comments,underline,drawing,etc.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.