Skip to content
This repository was archived by the owner on Jun 25, 2024. It is now read-only.

Commit 10c068b

Browse files
jasnyjasny
committed
Configure global settings through pdfViewerConfigProvider
Reimplemented the option to set the worker src Added option to disable using the browser's Worker API
1 parent ca78a78 commit 10c068b

File tree

3 files changed

+128
-36
lines changed

3 files changed

+128
-36
lines changed

‎README.md

+26-6
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,11 @@ that images, translations and such are being loaded from the `web` folder.
2222
<title>Angular PDF.js demo</title>
2323
<meta name="viewport" content="width=device-width, initial-scale=1">
2424

25-
<script src="vendor/pdf.js-viewer/pdf.worker.js"></script>
26-
<script src="vendor/pdf.js-viewer/pdf.js"></script>
25+
<script src="bower_components/pdf.js-viewer/pdf.js"></script>
2726
<link rel="stylesheet" href="vendor/pdf.js-viewer/viewer.css">
2827

29-
<script src="vendor/angular/angular.js"></script>
30-
<script src="vendor/angular-pdfjs/dist/angular-pdfjs.js"></script>
28+
<script src="bower_components/angular/angular.js"></script>
29+
<script src="bower_components/angular-pdfjs/dist/angular-pdfjs-viewer.js"></script>
3130
<script src="app.js"></script>
3231

3332
<style>
@@ -48,8 +47,7 @@ that images, translations and such are being loaded from the `web` folder.
4847
<div class='some-pdf-container'>
4948
<pdfjs-viewer src="{{ pdf.src }}" scale="scale"
5049
download="true" print="false" open="false"
51-
on-init="onInit()" on-page-load="onPageLoad(page)s"
52-
cmap-dir="vendor/pdf.js-viewer/cmaps" image-dir="vendor/pdf.js-viewer/images">
50+
on-init="onInit()" on-page-load="onPageLoad(page)">
5351
</pdfjs-viewer>
5452
</div>
5553
</body>
@@ -109,3 +107,25 @@ Afterwards run the server like so.
109107

110108
The server will be running on localhost:8080
111109

110+
## Advanced configuration
111+
112+
By default the location of PDF.js assets are automatically determined. However if you place them on alternative
113+
locations they may not be found. If so, you can configure these locations.
114+
115+
You may disable using the [Web Workers API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API).
116+
This is useful if you want to add pdf.worker.js to your concatinated JavaScript file. However this will have a
117+
negative effect on the runtime performance.
118+
119+
angular.module('app').config(function(pdfjsViewerConfigProvider) {
120+
pdfjsViewerConfigProvider.setWorkerSrc("/assets/pdf.js-viewer/pdf.worker.js");
121+
pdfjsViewerConfigProvider.setCmapDir("/assets/pdf.js-viewer/cmaps");
122+
pdfjsViewerConfigProvider.setImageDir("/assets/pdf.js-viewer/images");
123+
124+
pdfjsViewerConfigProvider.disableWorker();
125+
});
126+
127+
Note that a number of images used in the PDF.js viewer are loaded by the `viewer.css`. You can't configure these
128+
through JavaScript. Instead you need to compile the `viewer.less` file as
129+
130+
lessc --global-var='pdfjsImagePath=/assets/pdf.js-viewer/images' viewer.less viewer.css
131+

‎dist/angular-pdfjs-viewer.js

+50-14
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,57 @@
77
+function () {
88
'use strict';
99

10-
angular.module('pdfjsViewer', []);
10+
var module = angular.module('pdfjsViewer', []);
11+
12+
module.provider('pdfjsViewerConfig', function() {
13+
var config = {
14+
workerSrc: null,
15+
cmapDir: null,
16+
imageResourcesPath: null,
17+
disableWorker: false
18+
};
19+
20+
this.setWorkerSrc = function(src) {
21+
config.workerSrc = src;
22+
};
23+
24+
this.setCmapDir = function(dir) {
25+
config.cmapDir = dir;
26+
};
27+
28+
this.setImageDir = function(dir) {
29+
config.imageDir = dir;
30+
};
31+
32+
this.disableWorker = function(value) {
33+
if (typeof value === 'undefined') value = true;
34+
config.disableWorker = value;
35+
}
36+
37+
this.$get = function() {
38+
return config;
39+
}
40+
});
41+
42+
module.run(function(pdfjsViewerConfig) {
43+
if (pdfjsViewerConfig.workerSrc) {
44+
PDFJS.workerSrc = pdfjsViewerConfig.workerSrc;
45+
}
46+
47+
if (pdfjsViewerConfig.cmapDir) {
48+
PDFJS.cMapUrl = pdfjsViewerConfig.cmapDir;
49+
}
1150

12-
angular.module('pdfjsViewer').directive('pdfjsViewer', ['$interval', function ($interval) {
51+
if (pdfjsViewerConfig.imageDir) {
52+
PDFJS.imageResourcesPath = pdfjsViewerConfig.imageDir;
53+
}
54+
55+
if (pdfjsViewerConfig.disableWorker) {
56+
PDFJS.disableWorker = true;
57+
}
58+
});
59+
60+
module.directive('pdfjsViewer', ['$interval', function ($interval) {
1361
return {
1462
template: '<div id="outerContainer">\n' +
1563
'\n' +
@@ -373,18 +421,6 @@
373421
}, function () {
374422
if (!$attrs.src) return;
375423

376-
if ($attrs.localeDir) {
377-
// not sure how to set locale dir in PDFJS
378-
}
379-
380-
if ($attrs.cmapDir) {
381-
PDFJS.cMapUrl = $attrs.cmapDir;
382-
}
383-
384-
if ($attrs.imageDir) {
385-
PDFJS.imageResourcesPath = $attrs.imageDir;
386-
}
387-
388424
if ($attrs.open === 'false') {
389425
document.getElementById('openFile').setAttribute('hidden', 'true');
390426
document.getElementById('secondaryOpenFile').setAttribute('hidden', 'true');

‎src/angular-pdfjs-viewer.js

+52-16
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,57 @@
77
+function () {
88
'use strict';
99

10-
angular.module('pdfjsViewer', []);
11-
12-
angular.module('pdfjsViewer').directive('pdfjsViewer', ['$interval', function ($interval) {
10+
var module = angular.module('pdfjsViewer', []);
11+
12+
module.provider('pdfjsViewerConfig', function() {
13+
var config = {
14+
workerSrc: null,
15+
cmapDir: null,
16+
imageResourcesPath: null,
17+
disableWorker: false
18+
};
19+
20+
this.setWorkerSrc = function(src) {
21+
config.workerSrc = src;
22+
};
23+
24+
this.setCmapDir = function(dir) {
25+
config.cmapDir = dir;
26+
};
27+
28+
this.setImageDir = function(dir) {
29+
config.imageDir = dir;
30+
};
31+
32+
this.disableWorker = function(value) {
33+
if (typeof value === 'undefined') value = true;
34+
config.disableWorker = value;
35+
}
36+
37+
this.$get = function() {
38+
return config;
39+
}
40+
});
41+
42+
module.run(function(pdfjsViewerConfig) {
43+
if (pdfjsViewerConfig.workerSrc) {
44+
PDFJS.workerSrc = pdfjsViewerConfig.workerSrc;
45+
}
46+
47+
if (pdfjsViewerConfig.cmapDir) {
48+
PDFJS.cMapUrl = pdfjsViewerConfig.cmapDir;
49+
}
50+
51+
if (pdfjsViewerConfig.imageDir) {
52+
PDFJS.imageResourcesPath = pdfjsViewerConfig.imageDir;
53+
}
54+
55+
if (pdfjsViewerConfig.disableWorker) {
56+
PDFJS.disableWorker = true;
57+
}
58+
});
59+
60+
module.directive('pdfjsViewer', ['$interval', function ($interval) {
1361
return {
1462
templateUrl: file.folder + '../../pdf.js-viewer/viewer.html',
1563
restrict: 'E',
@@ -85,18 +133,6 @@
85133
}, function () {
86134
if (!$attrs.src) return;
87135

88-
if ($attrs.localeDir) {
89-
// not sure how to set locale dir in PDFJS
90-
}
91-
92-
if ($attrs.cmapDir) {
93-
PDFJS.cMapUrl = $attrs.cmapDir;
94-
}
95-
96-
if ($attrs.imageDir) {
97-
PDFJS.imageResourcesPath = $attrs.imageDir;
98-
}
99-
100136
if ($attrs.open === 'false') {
101137
document.getElementById('openFile').setAttribute('hidden', 'true');
102138
document.getElementById('secondaryOpenFile').setAttribute('hidden', 'true');
@@ -145,7 +181,7 @@
145181
var location = document.createElement("a");
146182
location.href = href;
147183

148-
if (!location.host) location.href = location.href; // Weird assigned
184+
if (!location.host) location.href = location.href; // Weird assigment
149185

150186
return location;
151187
}

0 commit comments

Comments
 (0)