vinodnimbalkar/svelte-pdf

svelte-pdf provides a component for rendering PDF documents using PDF.js

svelte-pdf's Issues

Nice Package!

Any way to add thumbnails and continuous page scroll?

Also "save as" button.

It would be nice to have optional props to hide/unhide buttons.

Thanks for the good work.

Setting up fake worker failed

I have an issue when rendering the component on my app asynchronously:

Setting up fake worker failed: "Cannot load script at: http://localhost:3000/client/app/vendors-node_modules_svelte-pdf_index_js.7eb84ba08763e11d3530.worker.js".

Any idea what the problem is?

Thanks in advance!

Compile Error in Sveltekit

When I try to add to SvelteKit v1.0.0-next.230, I get the below error:

svelte-pdf doesn't appear to be written in CJS, but also doesn't appear to be a valid ES module (i.e. it doesn't have "type": "module" or an .mjs extension for the entry point). Please contact the package author to fix.

Here is the implementation:

<script>
  import { onMount } from "svelte";
  let PdfViewer;

  onMount(async () => {
    const module = await import("svelte-pdf");
    PdfViewer = module.default;
  });
</script>

<svelte:component this={PdfViewer} url="YOUR-PDF-URL"/>

Please advise if there is something I can change to make it work it SvelteKit?

Open password protected pdf.

It would be nice to have open a password protected pdf also

Support data passed directly, not via url

For use-cases where the data is already available, it would be convenient to have a data prop or similar rather than url, which necessitates constructing something like data:mimetype;charset=utf-8,<data> to pass in.

Unhide Scroll top button

Hi @vinodnimbalkar, first of all, thank you for you component. Is very usefull on my project. I have a question.

¿There's a way to hide the button that make a scroll to the top of page? It's no required for me but I cannot find the way to hide it.

Thanks.

Can it dynamically reload a PDF?

I have a question that I cannot answer by reading the current docs (and even the codebase):

Will I be able to dynamically set the PDF url and trigger a reload to reload it?

In my use case the PDF URL contains some path parameters, that the backend generates a special pdf based on them.

So, from the frontend I would like to push some switches/levers and then trigger a pdf reload to see the newly generated pdf!

Is something like that possible...?

Thanks!

in narrower view the nav buttons do not function the same way

The buttons when the screen is narrow do not lose or gain drop shadows the way they do in full width view. thanks.

Control each option (print,download...) on its own rather than disable all options once or show them

It would be nice to have optional props to control each option on its own

For use cases where for example you want to disable the download or print option for specific users of your application and still enable other options

and I would be glad to work on this enhancement feature if it's something you see that would be a great plus for this package

there are also some CSS control changes on the viewer that I would like to work on because I used this package in a project of mine lately, and it's a great package btw, and I needed to disable all options by controlling CSS and the classes globally in the application and I saw that the classes were very generic, so I might run over some CSS conflicts in the future.

FileSaver default export

Hello,

I came accross this issue while using your amazing library:

The requested module '/node_modules/file-saver/dist/FileSaver.min.js?v=9d52a9b1' does not provide an export named 'default' (at PdfViewer.svelte:5:10)

which is:

import FileSaver from "file-saver";

Let me know if I can help

SyntaxError: ambiguous indirect export: default

Running on SvelteKit:

let PdfViewer;
onMount(async () => {
  const module = await import("svelte-pdf");
  PdfViewer = module.default;
});

leads to

Uncaught (in promise) SyntaxError: ambiguous indirect export: default [PdfViewer.svelte:5:9](http://localhost:3000/node_modules/svelte-pdf/PdfViewer.svelte)
    rejected [id].svelte:1129
    (Async: promise callback)
    step [id].svelte:1136
    __awaiter [id].svelte:1139
    __awaiter [id].svelte:1116
    instance [id].svelte:26
    run index.mjs:18
    map self-hosted:221
    mount_component index.mjs:1427
    flush index.mjs:746
    init index.mjs:1515
    Root root.svelte:690
    createProxiedComponent svelte-hooks.js:245
    ProxyComponent proxy.js:241
    Proxy<Root> proxy.js:341
    _init start.js:649
    start start.js:533
    AsyncFunctionNext self-hosted:807
    (Async: async)
    start start.js:1099
    <anonymous> 16:454

which refers to

import FileSaver from "/node_modules/file-saver/dist/FileSaver.min.js?v=83e1d885";

The arrow on the counter-clockwise button is backwards

How to use it in sveltekit project?

My code

<script>
import { onMount } from 'svelte';
let PdfViewer;
onMount(async () => {
		const module = await import('svelte-pdf');
		PdfViewer = module.default;
	});
	
</script>
<svelte:component
	this={PdfViewer}
	url="https://raw.githubusercontent.com/vinodnimbalkar/svelte-pdf/369db2f9edbf5ab8c87184193e1404340729bb3a/public/sample.pdf"/>

it shows this error

Demo website svelte-pdf.netlify.com not found

When accessing the demo website https://svelte-pdf.netlify.com (mentioned in the readme), I get a "Site Not Found" error.

 WARN  1 deprecated subdependencies found: [email protected]

6d6f0ab did not increase version to 1.0.8

6d6f0ab

Could not read from file: ...pdf.worker.min.js

With the default example I see the pdf for 1 second and then I have error 504 (because it cannot find the file and timeouts) and I keep having this issue:

`✘ [ERROR] Could not read from file: /Users/user/Projects/Git/myproject/static/ui/node_modules/svelte-pdf/node_modules/pdfjs-dist/build/pdf.worker.min.js?url

node_modules/svelte-pdf/PdfViewer.svelte:45:24:
  45 │ ...rt pdfjsWorker from "pdfjs-dist/build/pdf.worker.min.js?url";`

I am using last version of Svelte/SvelteKit/Vite together with Tailwinds

Unable to open 'pdf.js'

<script>
  import PdfViewer from "svelte-pdf";
</script>

<PdfViewer url='https://infocenter.nordicsemi.com/pdf/nRF51_RM_v3.0.1.pdf'></PdfViewer>

Svelte accessibility warnings present within plugin

Background

The following warnings are output to console when building a project that uses this library, version 1.0.20.

It is not expected that plugins output build warnings.

Accessibility

The code should be refactored to be more accessible.

Eval

If it's possible to not use eval, that would be great. If not, this warning should be either suppressed or a config should be provided from the package to suppress it.

web:build: 244:         {#if showButtons.includes("navigation")}
web:build: 245:           <Tooltip>
web:build: 246:             <span
web:build:                  ^
web:build: 247:               slot="activator"
web:build: 248:               class="button-control {pageNum <= 1 ? 'disabled' : null}"
web:build: 13:11:47 [vite-plugin-svelte] D:/Coding/0 - Work/dragongc/dragongc/node_modules/svelte-pdf/PdfViewer.svelte:266:12 A11y: <span> with click, keydown handlers must have an ARIA role
web:build: 264:           </Tooltip>
web:build: 265:           <Tooltip>
web:build: 266:             <span
web:build:                  ^
web:build: 267:               slot="activator"
web:build: 268:               class="button-control {pageNum >= totalPage ? 'disabled' : null}"
web:build: 13:11:47 [vite-plugin-svelte] D:/Coding/0 - Work/dragongc/dragongc/node_modules/svelte-pdf/PdfViewer.svelte:288:12 A11y: <span> with click, keydown handlers must have an ARIA role
web:build: 286:           {#if showButtons.includes("zoom")}
web:build: 287:           <Tooltip>
web:build: 288:             <span
web:build:                  ^
web:build: 289:               slot="activator"
web:build: 290:               class="button-control {scale >= maxScale ? 'disabled' : null}"
web:build: 13:11:47 [vite-plugin-svelte] D:/Coding/0 - Work/dragongc/dragongc/node_modules/svelte-pdf/PdfViewer.svelte:310:12 A11y: <span> with click, keydown handlers must have an ARIA role
web:build: 308:           </Tooltip>
web:build: 309:           <Tooltip>
web:build: 310:             <span
web:build:                  ^
web:build: 311:               slot="activator"
web:build: 312:               class="button-control {scale <= minScale ? 'disabled' : null}"
web:build: 13:11:47 [vite-plugin-svelte] D:/Coding/0 - Work/dragongc/dragongc/node_modules/svelte-pdf/PdfViewer.svelte:334:12 A11y: <span> with click, keydown handlers must have an ARIA role
web:build: 332:           {#if showButtons.includes("print")}
web:build: 333:           <Tooltip>
web:build: 334:             <span
web:build:                  ^
web:build: 335:               slot="activator"
web:build: 336:               class="button-control"
web:build: 13:11:47 [vite-plugin-svelte] D:/Coding/0 - Work/dragongc/dragongc/node_modules/svelte-pdf/PdfViewer.svelte:356:12 A11y: <span> with click, keydown handlers must have an ARIA role
web:build: 354:           {#if showButtons.includes("rotate")}
web:build: 355:           <Tooltip>
web:build: 356:             <span
web:build:                  ^
web:build: 357:               slot="activator"
web:build: 358:               class="button-control"
web:build: 13:11:47 [vite-plugin-svelte] D:/Coding/0 - Work/dragongc/dragongc/node_modules/svelte-pdf/PdfViewer.svelte:376:12 A11y: <span> with click, keydown handlers must have an ARIA role
web:build: 374:           </Tooltip>
web:build: 375:           <Tooltip>
web:build: 376:             <span
web:build:                  ^
web:build: 377:               slot="activator"
web:build: 378:               class="button-control"
web:build: 13:11:47 [vite-plugin-svelte] D:/Coding/0 - Work/dragongc/dragongc/node_modules/svelte-pdf/PdfViewer.svelte:398:12 A11y: <span> with click, keydown handlers must have an ARIA role
web:build: 396:           {#if showButtons.includes("download")}
web:build: 397:           <Tooltip>
web:build: 398:             <span
web:build:                  ^
web:build: 399:               slot="activator"
web:build: 400:               class="button-control"
web:build: 13:11:47 [vite-plugin-svelte] D:/Coding/0 - Work/dragongc/dragongc/node_modules/svelte-pdf/PdfViewer.svelte:417:12 A11y: <span> with click, keydown handlers must have an ARIA role
web:build: 415:           {#if showButtons.includes("autoflip")}
web:build: 416:           <Tooltip>
web:build: 417:             <span
web:build:                  ^
web:build: 418:               slot="activator"
web:build: 419:               class="page-info button-control"
web:build: 13:11:47 [vite-plugin-svelte] D:/Coding/0 - Work/dragongc/dragongc/node_modules/svelte-pdf/utils/Tooltip.svelte:71:2 A11y: <div> with 
mouseenter, mouseleave, mouseenter, mouseleave handlers must have an ARIA role
web:build: 69: 
web:build: 70: <div class="activator">
web:build: 71:   <div
web:build:       ^
web:build: 72:     on:mouseenter={debounce(showTooltip, 100)}
web:build: 73:     on:mouseleave={debounce(hideTooltip, 500)}
web:build: ../../node_modules/pdfjs-dist/build/pdf.js (1982:23): Use of eval in "../../node_modules/pdfjs-dist/build/pdf.js" is strongly discouraged as it poses security risks and may cause issues with minification.

to top button - cannot use href #top inside sapper

Due to the way svelte + sapper fails to work right with href hash anchors, the "go to top" arrow at the bottom of the viewer should fire javascript window.scrollTo(0, 0); code instead of using a #top href

Update npm package

It seems the current npm package is svelte-pdf 1.0.20, using pdfjs-dist 3.8.

Here in the repo it is svelte-pdf 1.0.21, using pdfjs-dist 4.0. Could you update?

Semver vulnerability

Running pnpm audit results in:

semver vulnerable to Regular Expression Denial of Service
Vulnerable versions <7.5.2
Patched versions    >=7.5.2
Paths:
    - [email protected] > [email protected] > @mapbox/[email protected] > [email protected] > [email protected]
    - [email protected] > [email protected] > [email protected] > @mapbox/[email protected] > [email protected] > [email protected]
More info https://github.com/advisories/GHSA-c2qf-rxjj-qqgw

I saw #56 b61420e, but wasn't sure if that would fix the warning, I haven't checked the source code...

Edit: pdfjs-dist's optional dependency canvas was the root cause, so I'm closing this

<PdfViewer> was created without expected prop 'url'

This seems strange, as I should be able to simply use

<PdfViewer data={atob(base64)} />

The readme also states that url is a required prop.

Unable to open PdfViewer.svelte

@vinodnimbalkar

Probably due to your recent commit, your sandbox

https://codesandbox.io/s/svelte-pdf-govhm?file=/App.svelte

now fails consistently. It takes about thirty seconds to get:

Convert Svelte components into PDF as input type

As a developer of a frontend only project, I need a way to create a PDF and give the user a nice interface to preview and download his / her documentation.

The document includes svelte components and currently gets exported via the print engine of the browser. I wish I could just give the PDF library my Svelte Component as an input and in return get a way to display its content in a preview.

Possible ACs:

• it is possible to accept svelte component as input type
• it is possible to convert svelte into PDF using the browser api
• it is possible to download the created PDF

Helpful Notes:

• The User K J suggested using a library called html2pdf.js to convert HTML into PDF, and it looks very promising in my codepen test environment, so maybe integrating that would be already halfway of the solution. See Stackoverflow Post

PdfViewer not a valid SSR component

Error: <PdfViewer> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules. Otherwise you may need to fix a <PdfViewer>.
    at Module.validate_component (C:\Users\peter\web-projects\test-pdf\node_modules\.pnpm\[email protected]\node_modules\svelte\src\runtime\internal\ssr.js:126:9)
    at C:\Users\peter\web-projects\test-pdf\src\routes\+page.svelte:25:42
    at Object.$$render (C:\Users\peter\web-projects\test-pdf\node_modules\.pnpm\[email protected]\node_modules\svelte\src\runtime\internal\ssr.js:156:16)
    at Object.default (C:\Users\peter\web-projects\test-pdf\.svelte-kit\generated\root.svelte:45:41)
    at C:\Users\peter\web-projects\test-pdf\node_modules\.pnpm\@[email protected]_@[email protected][email protected][email protected]\node_modules\@sveltejs\kit\src\runtime\components\layout.svelte:5:41
    at Object.$$render (C:\Users\peter\web-projects\test-pdf\node_modules\.pnpm\[email protected]\node_modules\svelte\src\runtime\internal\ssr.js:156:16)
    at C:\Users\peter\web-projects\test-pdf\.svelte-kit\generated\root.svelte:44:40
    at $$render (C:\Users\peter\web-projects\test-pdf\node_modules\.pnpm\[email protected]\node_modules\svelte\src\runtime\internal\ssr.js:156:16)
    at Object.render (C:\Users\peter\web-projects\test-pdf\node_modules\.pnpm\[email protected]\node_modules\svelte\src\runtime\internal\ssr.js:164:17)
    at Module.render_response (C:\Users\peter\web-projects\test-pdf\node_modules\.pnpm\@[email protected]_@[email protected][email protected][email protected]\node_modules\@sveltejs\kit\src\runtime\server\page\render.js:171:29)

Not importing into repl

I was told in discord that a well-formed component should import into the repl (unless it relies on a preprocessor.)

callback for page change

To me, an extremely useful feature would be, if I could find out on which the pdf currently is.

I see two options for that:

1. the component forwards an event when the page changes, that indicates which page currently is selected.
2. the component could accept a callback function as a parameter, that gets executed when the page changes.

But maybe there are better ways... I'm not really good with Svelte yet.

Would that be a feature you might consider implementing?
Or would a PR implementing this be considered?

Compile Error Svelte (Worker Import)

<script>
	// export let name;
	import {onMount} from 'svelte'
	import PdfViewer from 'svelte-pdf';
onMount(()=>{
	
});
</script>

<main>
	<div class="w-50 vh-75 pa2">
		<PdfViewer url='sample.pdf' />
	</div>
</main>

Just trying to test it out a very basic example but keep getting this error everytime I try to compile.

Error: Could not load .../node_modules/pdfjs-dist/build/pdf.worker.min.js?url (imported by node_modules/svelte-pdf/src/PdfViewer.svelte)
ENOENT: no such file or directory, open '....node_modules/pdfjs-dist/build/pdf.worker.min.js?url'

Uncaught (in promise) SyntaxError: import not found: default

I'm trying to use it with Sveltekit. I installed svelte-pdf as a dev dependency. This is what my code looks like:

<script>
	import { onMount } from 'svelte';
	let PdfViewer;

	onMount(async () => {
		const module = await import('svelte-pdf');
		PdfViewer = module.default;
	});

	export let url;
</script>

<svelte:component this={PdfViewer} {url} />

Once the component mounts, the browser gives me the error:

Uncaught (in promise) SyntaxError: import not found: default

It refers to PdfViewer.svelte:41:7 which is:

import pdfjsWorker from "/node_modules/pdfjs-dist/build/pdf.worker.entry.js?v=c744c57a";

Doesn't work in Safari when used on a Sapper app

I am getting an empty result on Safari when the package is used within a Sapper app (it works fine on other browsers)

This is the code I've used, taken straight from the docs:

`<script>
import { onMount } from "svelte";
let PdfViewer;
let url = "something";

onMount(async () => {
const module = await import("svelte-pdf");
PdfViewer = module.default;
});
</script>

<svelte:component this={PdfViewer} url={url} />`

How to virtually display all PDF pages next to each other (horizontally or vertically)?

When opening a PDF file on Mac or iPad, usually all pages are next to each other and I can just scroll or swipe to see the next page, either below or on the side. It seems I need to add the buttons with svelte-pdf to navigate to the next page. Is there a way to enable scrolling/swiping (horizontally or vertically) for a more seamless user experience?

Typo in "Previous" button

"Previous" button in the example page reads "Prevoius".

Vertical Scrolling

Hi,
Your work here is really good. PDF file looks simple and elegant on the browser.

Is there any possibility of having a vertical scrolling option, instead of the buttons (or autoflip) to change pages?

Thanks for the project