Search code examples
sveltesveltekit

Adding pdf to svelte component

I want to add a pdf to my svelte component.

I'm using the same syntax as normal HTML but this dose not work.

<iframe src="./stadgar.pdf" width="500" height="1000" ></iframe>

What I get is an image of how my error page looks like.

The only solution I see here is to install a package like svelte-pdf.

Any other ideas?

Solution

  • Given that the browser supports it, you can link to PDFs in an iframe, but you cannot just reference files like that.

    If you have static assets, they should be imported in the script. Unless the type is known to Vite, add ?url to the import to make Vite emit the asset and give you a valid URL:

    <script>
    import pdfUrl from './stadgar.pdf?url';
</script>

<iframe src={pdfUrl} width="500" height="1000" title="PDF"/>