pdfjs-viewer-element 2.4.1 → 2.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +26 -5
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# pdfjs-viewer-element
|
|
2
2
|
|
|
3
|
-
A custom element, based on [PDF.js default viewer](https://mozilla.github.io/pdf.js/web/viewer.html). Supported in all [major browsers](https://caniuse.com/custom-elementsv1) and works with most [JS frameworks](https://custom-elements-everywhere.com/). See [examples](https://alekswebnet.github.io/pdfjs-viewer-element/#demo) of usage in Vue, React and Svelte or pure HTML.
|
|
3
|
+
A custom element, based on [PDF.js default viewer](https://mozilla.github.io/pdf.js/web/viewer.html) and . Supported in all [major browsers](https://caniuse.com/custom-elementsv1) and works with most [JS frameworks](https://custom-elements-everywhere.com/). See [examples](https://alekswebnet.github.io/pdfjs-viewer-element/#demo) of usage in Vue, React and Svelte or pure HTML.
|
|
4
4
|
|
|
5
5
|
⚠️ `pdfjs-viewer-element` requires PDF.js [prebuilt](http://mozilla.github.io/pdf.js/getting_started/), that includes the generic build of PDF.js and the viewer. To use the package you should [download](http://mozilla.github.io/pdf.js/getting_started/) and **place the prebuilt** files to some directory of your project. Then specify the path to this directory with `viewer-path` property (`/pdfjs` by default).
|
|
6
6
|
|
|
@@ -47,15 +47,15 @@ Using browser:
|
|
|
47
47
|
<pdfjs-viewer-element src="/file.pdf" viewer-path="/path-to-viewer"></pdfjs-viewer-element>
|
|
48
48
|
```
|
|
49
49
|
|
|
50
|
-
##
|
|
50
|
+
## Attributes
|
|
51
51
|
|
|
52
52
|
`src` - PDF file URL, should refer to the [same origin](https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#can-i-load-a-pdf-from-another-server-cross-domain-request)
|
|
53
53
|
|
|
54
54
|
`viewer-path` - Path to PDF.js [prebuilt](http://mozilla.github.io/pdf.js/getting_started/)
|
|
55
55
|
|
|
56
|
-
`locale` - Specifies which language to use in the viewer UI
|
|
56
|
+
`locale` - Specifies which language to use in the viewer UI `en-US | ...`. [Available locales](https://github.com/mozilla/pdf.js/tree/master/l10n)
|
|
57
57
|
|
|
58
|
-
`text-layer` - Text layer, that is used for text selection
|
|
58
|
+
`text-layer` - Text layer, that is used for text selection `off | visible | shadow | hover`
|
|
59
59
|
|
|
60
60
|
`page` - Page number
|
|
61
61
|
|
|
@@ -67,12 +67,33 @@ Using browser:
|
|
|
67
67
|
|
|
68
68
|
`pagemode` - Page mode
|
|
69
69
|
|
|
70
|
+
`viewer-css-theme` - Apply automatic, light or dark theme `AUTOMATIC | LIGHT | DARK`. Default is `AUTOMATIC`
|
|
71
|
+
|
|
72
|
+
`viewer-extra-styles` - Add your CSS rules to viewer application
|
|
73
|
+
|
|
70
74
|
For more clarity, see the [Api docs page](https://alekswebnet.github.io/pdfjs-viewer-element/#api).
|
|
71
75
|
|
|
76
|
+
## Viewer extra styles
|
|
77
|
+
|
|
78
|
+
You can add your own CSS rules to the viewer application using `viewer-extra-styles` attribute:
|
|
79
|
+
|
|
80
|
+
```html
|
|
81
|
+
<!-- Hide open file button -->
|
|
82
|
+
<pdfjs-viewer-element
|
|
83
|
+
src="/file.pdf"
|
|
84
|
+
viewer-path="/path-to-viewer"
|
|
85
|
+
viewer-extra-styles="#openFile { display: none }">
|
|
86
|
+
</pdfjs-viewer-element>
|
|
87
|
+
```
|
|
88
|
+
|
|
72
89
|
## PDF.js Viewer Application
|
|
73
90
|
|
|
74
91
|
`initialize` - using this method you can access PDFViewerApplication and use methods and events of PDF.js default viewer
|
|
75
92
|
|
|
93
|
+
```html
|
|
94
|
+
<pdfjs-viewer-element viewer-path="/path-to-viewer"></pdfjs-viewer-element>
|
|
95
|
+
```
|
|
96
|
+
|
|
76
97
|
```javascript
|
|
77
98
|
const viewer = document.querySelector('pdfjs-viewer-element')
|
|
78
99
|
// Wait for the viewer initialization, receive PDFViewerApplication
|
|
@@ -86,4 +107,4 @@ viewerApp.eventBus.on('pagesloaded', () => {
|
|
|
86
107
|
```
|
|
87
108
|
|
|
88
109
|
## License
|
|
89
|
-
[MIT](http://opensource.org/licenses/MIT)
|
|
110
|
+
[MIT](http://opensource.org/licenses/MIT)
|