svelte-pdf-view 0.1.3 → 0.1.4
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 +16 -0
- package/dist/pdf-viewer/PDFPageView.js +14 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -32,6 +32,22 @@ If you want to use the default `<PdfToolbar>` component, also install:
|
|
|
32
32
|
npm install @lucide/svelte
|
|
33
33
|
```
|
|
34
34
|
|
|
35
|
+
### Vite Configuration
|
|
36
|
+
|
|
37
|
+
If you're using Vite (including SvelteKit), you may need to exclude `pdfjs-dist` from dependency optimization to ensure the PDF.js worker loads correctly:
|
|
38
|
+
|
|
39
|
+
```ts
|
|
40
|
+
// vite.config.ts
|
|
41
|
+
export default defineConfig({
|
|
42
|
+
// ... other config
|
|
43
|
+
optimizeDeps: {
|
|
44
|
+
exclude: ['pdfjs-dist']
|
|
45
|
+
}
|
|
46
|
+
});
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
This is especially important in monorepo setups where Vite's optimizer may incorrectly bundle the worker.
|
|
50
|
+
|
|
35
51
|
## Quick Start
|
|
36
52
|
|
|
37
53
|
### Basic Usage
|
|
@@ -12,7 +12,14 @@
|
|
|
12
12
|
* See the License for the specific language governing permissions and
|
|
13
13
|
* limitations under the License.
|
|
14
14
|
*/
|
|
15
|
-
|
|
15
|
+
// Dynamically loaded pdfjs utilities
|
|
16
|
+
let setLayerDimensions;
|
|
17
|
+
async function ensurePdfJsLoaded() {
|
|
18
|
+
if (!setLayerDimensions) {
|
|
19
|
+
const pdfjs = await import('pdfjs-dist/legacy/build/pdf.mjs');
|
|
20
|
+
setLayerDimensions = pdfjs.setLayerDimensions;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
16
23
|
export const RenderingStates = {
|
|
17
24
|
INITIAL: 0,
|
|
18
25
|
RUNNING: 1,
|
|
@@ -61,7 +68,7 @@ export class PDFPageView {
|
|
|
61
68
|
this.loadingDiv.textContent = 'Loading...';
|
|
62
69
|
this.div.appendChild(this.loadingDiv);
|
|
63
70
|
}
|
|
64
|
-
setDimensions() {
|
|
71
|
+
async setDimensions() {
|
|
65
72
|
const { width, height } = this.viewport;
|
|
66
73
|
this.div.style.width = `${Math.floor(width)}px`;
|
|
67
74
|
this.div.style.height = `${Math.floor(height)}px`;
|
|
@@ -75,6 +82,7 @@ export class PDFPageView {
|
|
|
75
82
|
// mustFlip=false because the text layer uses raw page coordinates
|
|
76
83
|
// and rotation is handled via CSS transforms
|
|
77
84
|
if (this.textLayerDiv) {
|
|
85
|
+
await ensurePdfJsLoaded();
|
|
78
86
|
setLayerDimensions(this.textLayerDiv, this.viewport, /* mustFlip */ false);
|
|
79
87
|
}
|
|
80
88
|
}
|
|
@@ -227,7 +235,10 @@ export class PDFPageView {
|
|
|
227
235
|
this.div.appendChild(this.textLayerDiv);
|
|
228
236
|
try {
|
|
229
237
|
// Import TextLayer from pdfjs-dist
|
|
230
|
-
const { TextLayer } = await
|
|
238
|
+
const [{ TextLayer }] = await Promise.all([
|
|
239
|
+
import('pdfjs-dist/legacy/build/pdf.mjs'),
|
|
240
|
+
ensurePdfJsLoaded()
|
|
241
|
+
]);
|
|
231
242
|
const textContent = await this.pdfPage.getTextContent();
|
|
232
243
|
this.textDivs = [];
|
|
233
244
|
this.textContentItemsStr = [];
|