Skip to content

Commit 4808427

Browse files
alekswebnetalekswebnet
committed
Fix src prop updating, add text-layer prop & update demo
1 parent 41612d6 commit 4808427

File tree

9 files changed

+57
-26
lines changed

9 files changed

+57
-26
lines changed

‎README.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,9 @@ Using browser:
4848

4949
`viewer-path` - Path to PDF.js prebuilt
5050

51-
`locale` - Language of the interface
51+
`locale` - Language of the interface, see [all l10n files](https://github.com/mozilla/pdf.js/tree/master/l10n)
52+
53+
`text-layer` - Text layer, that is used for text selection
5254

5355
`page` - Page number
5456

‎index.html‎

Lines changed: 27 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,11 @@
2121
</style>
2222
</head>
2323
<body class="bg-light">
24-
<div class="d-flex" v-scope="{ tab: window.location.href.includes('/api') ? 'api' : 'start' , src: '/example.pdf', viewerPath: '/pdfjs', page: null, locale: null, locales: window.locales, zoom: 'auto', pagemode: 'none', search: null, phrase: true}">
24+
<div class="d-flex" v-scope="{ tab: window.location.href.includes('/api') ? 'api' : 'start' , src: '/sample-pdf-file.pdf', viewerPath: '/pdfjs', page: null, locale: null, locales: window.locales, zoom: 'auto', pagemode: 'none', search: null, phrase: true, textLayer: null}">
2525
<div class="container-fluid flex-fill p-0 ps-lg-2 overflow-hidden">
2626
<div class="row h-100">
2727
<div class="col-lg-6 px-4 pt-4 pb-4 overflow-auto content-col">
28-
<div class="d-flex pt-0 pt-lg-4 justify-content-center align-items-center">
28+
<div class="d-flex pt-4 justify-content-center align-items-center">
2929
<a class="d-block" href="https://github.com/alekswebnet/pdfjs-viewer-element" target="_blank">
3030
<svg height="32" aria-hidden="true" viewBox="0 0 16 16" version="1.1" width="32" data-view-component="true" class="octicon octicon-mark-github v-align-middle">
3131
<path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"></path>
@@ -36,7 +36,7 @@
3636
<h1 class="me-2 me-sm-3 mb-0" style="white-space: nowrap">pdfjs-viewer-element</h1>
3737
<a href="https://www.npmjs.com/package/pdfjs-viewer-element" target="_blank"><img class="mt-1" src="https://img.shields.io/npm/v/pdfjs-viewer-element" alt="Npm version"></a>
3838
</div>
39-
<p class="lead text-center text-muted pb-sm-4">
39+
<p class="lead text-center text-muted pb-4">
4040
A web component for viewing pdf files in the browser, based on
4141
<a href="https://github.com/mozilla/pdf.js" target="_blank">PDF.js</a> viewer.
4242
</p>
@@ -88,29 +88,47 @@ <h1 class="me-2 me-sm-3 mb-0" style="white-space: nowrap">pdfjs-viewer-element</
8888
<form style="display: none" class="pt-4" :class="{ 'd-block': tab === 'api' }">
8989
<p class="fs-6 mb-2">Properties overview:</p>
9090
<div class="row">
91-
<div class="col-5 col-sm-3"><label for="src" class="col-form-label"><code style="color: #905">src</code></label></div>
91+
<div class="col-5 col-sm-3"><label for="src" class="col-form-label"><code style="color: #905">zoom</code></label></div>
9292
<div class="col-7 col-sm-5 col-form-label text-muted d-flex"><span class="ms-auto ms-sm-0 small">Path to pdf file</span></div>
9393
<div class="col-sm-4 d-flex align-items-center">
94-
<input id="src" v-model="src" class="form-control form-control-sm" type="text" aria-label="Pdf file path" disabled />
94+
<select id="src" v-model="src" class="form-select form-select-sm" aria-label="Pdf file path">
95+
<option value="">None</option>
96+
<option selected value="/sample-pdf-file.pdf">/sample-pdf-file.pdf</option>
97+
<option value="/sample-pdf-with-images.pdf">/sample-pdf-with-images.pdf</option>
98+
<option value="/sample-pdf-10MB.pdf">/sample-pdf-10MB.pdf</option>
99+
</select>
95100
</div>
96101
</div>
97102
<div class="row">
98103
<div class="col-5 col-sm-3"><label for="viewerPath" class="col-form-label"><code style="color: #905">viewer-path</code></label></div>
99104
<div class="col-7 col-sm-5 col-form-label text-muted d-flex"><span class="ms-auto ms-sm-0 small">Path to PDF.js prebuilt</span></div>
100105
<div class="col-sm-4 d-flex align-items-center">
101-
<input id="viewerPath" v-model="viewerPath" class="form-control form-control-sm" type="text" aria-label="Viewer path" disabled />
106+
<input id="viewerPath" v-model="viewerPath" class="form-control form-control-sm" type="text" aria-label="Viewer path" />
102107
</div>
103108
</div>
104109
<div class="row">
105110
<div class="col-5 col-sm-3"><label for="locale" class="col-form-label"><code style="color: #905">locale</code></label></div>
106-
<div class="col-7 col-sm-5 col-form-label text-muted d-flex"><span class="ms-auto ms-sm-0 small">Language of the interface</span></div>
111+
<div class="col-7 col-sm-5 col-form-label text-muted d-flex"><span class="ms-auto ms-sm-0 small">Interface language, see <a href="https://github.com/mozilla/pdf.js/tree/master/l10n" target="_blank">all l10n files</a></span></div>
107112
<div class="col-sm-4 d-flex align-items-center">
108113
<select id="locale" v-model="locale" class="form-select form-select-sm" aria-label="Language localization">
109-
<option selected :value="null">Default</option>
114+
<option selected :value="null">None (from browser)</option>
110115
<option v-for="loc in locales" :value="loc" v-html="loc"></option>
111116
</select>
112117
</div>
113118
</div>
119+
<div class="row">
120+
<div class="col-5 col-sm-3"><label for="text-layer" class="col-form-label"><code style="color: #905">text-layer</code></label></div>
121+
<div class="col-7 col-sm-5 col-form-label text-muted d-flex"><span class="ms-auto ms-sm-0 small">Text layer, used for text selection</span></div>
122+
<div class="col-sm-4 d-flex align-items-center">
123+
<select id="text-layer" v-model="textLayer" class="form-select form-select-sm" aria-label="Text layer">
124+
<option selected value="null">None</option>
125+
<option value="off">off</option>
126+
<option value="visible">visible</option>
127+
<option value="shadow">shadow</option>
128+
<option value="hover">hover</option>
129+
</select>
130+
</div>
131+
</div>
114132
<div class="row">
115133
<div class="col-5 col-sm-3"><label for="page" class="col-form-label"><code style="color: #905">page</code></label></div>
116134
<div class="col-7 col-sm-5 col-form-label text-muted d-flex"><span class="ms-auto ms-sm-0 small">Page number</span></div>
@@ -171,6 +189,7 @@ <h1 class="me-2 me-sm-3 mb-0" style="white-space: nowrap">pdfjs-viewer-element</
171189
:phrase="phrase"
172190
:zoom="zoom"
173191
:pagemode="pagemode"
192+
:text-layer="textLayer"
174193
style="height: 100vh; height: 100dvh"
175194
class="border-start">
176195
</pdfjs-viewer-element>

‎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.2.4",
3+
"version": "2.3.0",
44
"license": "MIT",
55
"author": {
66
"name": "Oleksandr Shevchuk",

‎public/example.pdf‎

-992 KB
Binary file not shown.

‎public/sample-pdf-10MB.pdf‎

10.1 MB
Binary file not shown.

‎public/sample-pdf-file.pdf‎

23.6 KB
Binary file not shown.

‎public/sample-pdf-with-images.pdf‎

3.79 MB
Binary file not shown.

‎src/pdfjs-viewer-element.ts‎

Lines changed: 25 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
import { debounce } from "./debounce";
22

3-
const template = document.createElement('template');
3+
const defaults = {
4+
viewerPath: '/pdfjs',
5+
viewerEntry: '/web/viewer.html'
6+
}
7+
8+
const template = document.createElement('template')
49
template.innerHTML = `<iframe frameborder="0" width="100%"></iframe><style>:host{width:100%;display:block;overflow:hidden}:host iframe{height:100%}</style>`
510

611
export class PdfjsViewerElement extends HTMLElement {
@@ -13,7 +18,7 @@ export class PdfjsViewerElement extends HTMLElement {
1318
private iframe!: PdfjsViewerElementIframe
1419

1520
static get observedAttributes() {
16-
return ['src', 'viewer-path', 'locale', 'page', 'search', 'phrase', 'zoom', 'pagemode']
21+
return ['src', 'viewer-path', 'locale', 'page', 'search', 'phrase', 'zoom', 'pagemode', 'text-layer']
1722
}
1823

1924
connectedCallback() {
@@ -25,42 +30,47 @@ export class PdfjsViewerElement extends HTMLElement {
2530
this.onAttrsChanged()
2631
}
2732

28-
private onAttrsChanged = debounce(async () => {
29-
const url = this.iframe?.getAttribute('src')
33+
private onAttrsChanged = debounce(() => {
34+
const src = this.iframe.getAttribute('src')
3035

31-
if (url && url.split('&locale=')[1] !== this.getAttribute('locale')) {
32-
await this.setProps()
36+
if (src && src.split('&locale=')[1] !== this.getAttribute('locale')) {
37+
this.setProps()
38+
this.iframe.contentWindow.location.reload()
39+
}
40+
else if (src && src.split(defaults.viewerEntry)[0] !== this.getFullPath(this.getAttribute('viewer-path') || '') ) {
41+
this.setProps()
3342
this.iframe.contentWindow.location.reload()
3443
}
3544
else {
36-
await this.setProps()
45+
this.setProps()
3746
}
3847
})
3948

4049
private async setProps() {
41-
const viewerPath = this.getAttribute('viewer-path') || '/pdfjs'
42-
const file = this.getFileSrc(this.getAttribute('src') || '')
50+
const viewerPath = this.getAttribute('viewer-path') || defaults.viewerPath
4351
const page = this.getAttribute('page') || ''
4452
const search = this.getAttribute('search') || ''
4553
const phrase = this.getAttribute('phrase') || ''
4654
const zoom = this.getAttribute('zoom') || ''
4755
const pagemode = this.getAttribute('pagemode') || ''
48-
const locale = this.getAttribute('locale')
56+
const locale = this.getAttribute('locale') || ''
57+
const textLayer = this.getAttribute('text-layer') || ''
4958

5059
this.iframe.setAttribute(
5160
'src',
52-
`${viewerPath}/web/viewer.html#file=${file}&page=${page}&zoom=${zoom}&pagemode=${pagemode}&search=${search}&phrase=${phrase}${locale ? '&locale='+locale : ''}`
61+
`${this.getFullPath(viewerPath)}${defaults.viewerEntry}#page=${page}&zoom=${zoom}&pagemode=${pagemode}&search=${search}&phrase=${phrase}&textLayer=${textLayer}${locale ? '&locale='+locale : ''}`
5362
)
5463
}
5564

5665
private setEventListeners() {
57-
document.addEventListener('webviewerloaded', async () => {
58-
this.iframe.contentWindow?.PDFViewerApplicationOptions.set('disablePreferences', true)
59-
this.iframe.contentWindow?.PDFViewerApplicationOptions.set('pdfBugEnabled', true)
66+
document.addEventListener('webviewerloaded', () => {
67+
this.iframe.contentWindow.PDFViewerApplicationOptions.set('defaultUrl', this.getFullPath(this.getAttribute('src') || ''))
68+
this.iframe.contentWindow.PDFViewerApplicationOptions.set('disablePreferences', true)
69+
this.iframe.contentWindow.PDFViewerApplicationOptions.set('pdfBugEnabled', true)
6070
})
6171
}
6272

63-
private getFileSrc(path: string) {
73+
private getFullPath(path: string) {
6474
return path.startsWith('/') ? `${window.location.origin}${path}` : path
6575
}
6676
}

‎types/pdfjs-viewer-element.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export declare class PdfjsViewerElement extends HTMLElement {
77
private onAttrsChanged;
88
private setProps;
99
private setEventListeners;
10-
private getFileSrc;
10+
private getFullPath;
1111
}
1212
declare global {
1313
interface Window {

0 commit comments

Comments
 (0)