Skip to content

Commit f01d4e9

Browse files
alekswebnetalekswebnet
committed
Add extra-styles-urls attribute, demo pages
1 parent b80bac9 commit f01d4e9

11 files changed

+176
-8
lines changed

‎README.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -107,14 +107,14 @@ Use `viewer-css-theme` attribute to set light or dark theme manually:
107107

108108
## Viewer extra styles
109109

110-
You can add your own CSS rules to the viewer application using `viewer-extra-styles` attribute:
110+
You can add your own CSS rules to the viewer application using `viewer-extra-styles` or `viewer-extra-styles-urls` attribute:
111111

112112
```html
113-
<!-- Remove download button from viewer toolbar -->
114113
<pdfjs-viewer-element
115114
src="/file.pdf"
116115
viewer-path="/pdfjs-4.0.379-dist"
117-
viewer-extra-styles="#download { display: none }">
116+
viewer-extra-styles="#toolbarViewerMiddle { display: none; }"
117+
viewer-extra-styles-urls="['/demo/extra-styles-one.css', '/demo/extra-styles-two.css']">
118118
</pdfjs-viewer-element>
119119
```
120120

‎demo/basic.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>pdfjs-viewer-element | Basic demo</title>
7+
<script type="module" src="./../../dist/pdfjs-viewer-element.js"></script>
8+
<style>
9+
body {
10+
margin: 0;
11+
padding: 0;
12+
}
13+
</style>
14+
</head>
15+
16+
<body>
17+
<pdfjs-viewer-element
18+
src="/public/sample-pdf-with-images.pdf"
19+
viewer-path="/public/pdfjs-4.0.379-dist"
20+
style="height: 100dvh">
21+
</pdfjs-viewer-element>
22+
</body>
23+
</html>

‎demo/dark-theme.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>pdfjs-viewer-element | Dark theme demo</title>
7+
<script type="module" src="./../../dist/pdfjs-viewer-element.js"></script>
8+
<style>
9+
body {
10+
margin: 0;
11+
padding: 0;
12+
}
13+
</style>
14+
</head>
15+
16+
<body>
17+
<pdfjs-viewer-element
18+
src="/public/sample-pdf-with-images.pdf"
19+
viewer-path="/public/pdfjs-4.0.379-dist"
20+
viewer-css-theme="DARK"
21+
style="height: 100dvh">
22+
</pdfjs-viewer-element>
23+
</body>
24+
</html>

‎demo/extra-styles-one.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
2+
#toolbarViewer {
3+
background: wheat;
4+
}

‎demo/extra-styles-two.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
:root {
2+
--main-color: blue;
3+
--toolbar-icon-bg-color: blue;
4+
}

‎demo/extra-styles-urls.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>pdfjs-viewer-element | Extra styles demo</title>
7+
<script type="module" src="./../../dist/pdfjs-viewer-element.js"></script>
8+
<style>
9+
body {
10+
margin: 0;
11+
padding: 0;
12+
}
13+
</style>
14+
</head>
15+
16+
<body>
17+
<pdfjs-viewer-element
18+
src="/public/sample-pdf-with-images.pdf"
19+
viewer-path="/public/pdfjs-4.0.379-dist"
20+
viewer-extra-styles-urls="['/demo/extra-styles-one.css', '/demo/extra-styles-two.css']"
21+
style="height: 100dvh">
22+
</pdfjs-viewer-element>
23+
</body>
24+
</html>

‎demo/extra-styles.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>pdfjs-viewer-element | Extra styles demo</title>
7+
<script type="module" src="./../../dist/pdfjs-viewer-element.js"></script>
8+
<style>
9+
body {
10+
margin: 0;
11+
padding: 0;
12+
}
13+
</style>
14+
</head>
15+
16+
<body>
17+
<pdfjs-viewer-element
18+
src="/public/sample-pdf-with-images.pdf"
19+
viewer-path="/public/pdfjs-4.0.379-dist"
20+
viewer-extra-styles="#toolbarViewerMiddle { display: none; }"
21+
style="height: 100dvh">
22+
</pdfjs-viewer-element>
23+
</body>
24+
</html>

‎demo/pdf-data-load.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>pdfjs-viewer-element | Basic demo</title>
7+
<script type="module" src="./../../dist/pdfjs-viewer-element.js"></script>
8+
<style>
9+
body {
10+
margin: 0;
11+
padding: 0;
12+
}
13+
</style>
14+
</head>
15+
16+
<body>
17+
<pdfjs-viewer-element
18+
id="viewer"
19+
viewer-path="/public/pdfjs-4.0.379-dist"
20+
style="height: 100dvh">
21+
</pdfjs-viewer-element>
22+
23+
<script>
24+
const pdfData = Uint8Array.from(atob(
25+
'JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwog' +
26+
'IC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAv' +
27+
'TWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0K' +
28+
'Pj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAg' +
29+
'L1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+' +
30+
'PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9u' +
31+
'dAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2Jq' +
32+
'Cgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJU' +
33+
'CjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVu' +
34+
'ZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4g' +
35+
'CjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAw' +
36+
'MDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9v' +
37+
'dCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G'), (m) => m.codePointAt(0));
38+
39+
40+
document.addEventListener('DOMContentLoaded', async () => {
41+
const viewer = document.querySelector('#viewer')
42+
// Wait for the viewer initialization
43+
const viewerApp = await viewer.initialize()
44+
// Open PDF file data using Uint8Array instead of URL
45+
viewerApp.open({ data: pdfData })
46+
})
47+
</script>
48+
</body>
49+
</html>

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "pdfjs-viewer-element",
3-
"version": "2.6.1",
3+
"version": "2.6.2",
44
"license": "MIT",
55
"author": {
66
"name": "Oleksandr Shevchuk",

‎src/pdfjs-viewer-element.ts‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@ const DEFAULTS = {
1313
locale: '',
1414
textLayer: '',
1515
viewerCssTheme: 'AUTOMATIC',
16-
viewerExtraStyles: ''
16+
viewerExtraStyles: '',
17+
viewerExtraStylesUrls: ''
1718
} as const
1819

1920
export const ViewerCssTheme = {
@@ -22,7 +23,7 @@ export const ViewerCssTheme = {
2223
DARK: 2,
2324
} as const
2425

25-
export const hardRefreshAttributes = ['src', 'viewer-path', 'locale', 'text-layer', 'viewer-css-theme', 'viewer-extra-styles']
26+
export const hardRefreshAttributes = ['src', 'viewer-path', 'locale', 'text-layer', 'viewer-css-theme', 'viewer-extra-styles', 'viewer-extra-styles-urls']
2627

2728
export class PdfjsViewerElement extends HTMLElement {
2829
constructor() {
@@ -39,14 +40,15 @@ export class PdfjsViewerElement extends HTMLElement {
3940
public iframe!: PdfjsViewerElementIframe
4041

4142
static get observedAttributes() {
42-
return ['src', 'viewer-path', 'locale', 'page', 'search', 'phrase', 'zoom', 'pagemode', 'text-layer', 'viewer-css-theme', 'viewer-extra-styles']
43+
return ['src', 'viewer-path', 'locale', 'page', 'search', 'phrase', 'zoom', 'pagemode', 'text-layer', 'viewer-css-theme', 'viewer-extra-styles', 'viewer-extra-styles-urls']
4344
}
4445

4546
connectedCallback() {
4647
this.iframe = this.shadowRoot!.querySelector('iframe') as PdfjsViewerElementIframe
4748
document.addEventListener('webviewerloaded', async () => {
4849
this.setCssTheme(this.getCssThemeOption())
49-
this.setViewerExtraStyles(this.getAttribute('viewer-extra-styles'))
50+
this.injectExtraStylesLinks(this.getAttribute('viewer-extra-styles-urls') ?? DEFAULTS.viewerExtraStylesUrls)
51+
this.setViewerExtraStyles(this.getAttribute('viewer-extra-styles') ?? DEFAULTS.viewerExtraStyles)
5052
if (this.getAttribute('src') !== DEFAULTS.src) this.iframe.contentWindow?.PDFViewerApplicationOptions?.set('defaultUrl', '')
5153
this.iframe.contentWindow?.PDFViewerApplicationOptions?.set('disablePreferences', true)
5254
this.iframe.contentWindow?.PDFViewerApplicationOptions?.set('pdfBugEnabled', true)
@@ -132,6 +134,19 @@ export class PdfjsViewerElement extends HTMLElement {
132134
this.iframe.contentDocument?.head.appendChild(style)
133135
}
134136

137+
private injectExtraStylesLinks = (rawLinks?: string) => {
138+
if (!rawLinks) return
139+
const linksArray = rawLinks.replace(/'|]|\[/g, '').split(',').map((link) => link.trim())
140+
linksArray.forEach((url) => {
141+
const linkExists = this.iframe.contentDocument?.head.querySelector(`link[href="${url}"]`);
142+
if (linkExists) return
143+
const linkEl = document.createElement('link')
144+
linkEl.rel = 'stylesheet'
145+
linkEl.href = url
146+
this.iframe.contentDocument?.head.appendChild(linkEl)
147+
})
148+
}
149+
135150
public initialize = (): Promise<PdfjsViewerElementIframeWindow['PDFViewerApplication']> => new Promise(async (resolve) => {
136151
await elementReady('iframe', this.shadowRoot!)
137152
this.iframe?.addEventListener('load', async () => {

0 commit comments

Comments
 (0)