Best approach to showing PDFs to a user?

Anvil Q&A
1

I have a need to display a PDF to a user…either one that I’ve stored in the Anvil database or one that’s at a particular URL. Has anyone come up with a good solution for this?

I see Embedding pdf files retrieved from Data Tables - #2 by kevin, but this relies on Google’s Drive viewer. I’d prefer to have something more “built-in” to the app. PDF.js appears to be ideal, and it’s a path I’ll be going down in the very near future, but I’m so new to Anvil it’s a bit of a learning curve to understand how to integrate it.

I thought it was worth pinging the community to see if anyone else has already solved this.

Thanks in advance!

2

You could make a form that matches the PDF if it’s always the same format(s). Then, instead of saving the PDF as a media object, you could save it as a simple object made up of a dictionary of values for the Form’s values. That allows you to customize the view.

3

Thanks! Not a bad idea, but in my case it’s not always the same and I have a hard requirement to display the original PDF.

I appreciate the response regardless!

1 Like
4

All,

I’m trying to get the open source pdf.js to render in Anvil. Here’s a jsFiddle demonstrating it:

https://jsfiddle.net/pdfjs/9engc9mw/

I’ve replicated it in Anvil, and, funny enough…it works in the “Design” preview and renders the PDF, but when I run the app and press the “click me to show pdf” button, it doesn’t render and the Anvil output simply shows “[An internal error has occurred]”.

Nothing obvious in the browser console output.

Here’s the clone-able link:

https://anvil.works/build#clone:3OU3VEVFX3KRXOGP=FY5GAW5UI7ZYYBF4WJY6K5QF

Any ideas? Thanks in advance!

5

Interestingly enough, it works in Chrome but not in Firefox…in Firefox after publishing it, I see this error:

image

Anyway…getting somewhere. I’ll post here when I’ve figured things out.

6

Thanks for the clone:
As a quick fix if you move

<script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>

into native libraries it should work in firefox. I’ll see if there’s a good reason why it would work in chrome but not firefox with your current code

edit: looks like there’s a race condition going on in firefox - with scripts not necessary loading in the right order as you see them on the page. We’ll ship a fix for that soon.

Another tip -
in the second script tag - put everything into a function call

<script>
function loadPdf() {
    // the rest of the code
}
</script>

Add a form show event handler and call the JS function in the form show event

    def form_show(self, **event_args):
        self.call_js("loadPdf")
5 Likes
7

Thank you @stucork. Great suggestions on all fronts. I apparently also put myself in a bad position because of copy/paste coding as well…I had '<script src="//mozilla.github.io/pdf.js/build/pdf.js">’ in the html of PdfViewer, but then had '<script src="https://cdnjs.com/libraries/pdf.js">' in Native Libraries.

For whatever reason (I haven’t diff’ed them yet), the mozilla version is good, but the cndjs.com version is not. Well, at least, moving the mozilla version into Native Libraries and removing the cdnjs.com version works, while the reverse doesn’t.

It’s working here now: Anvil | Login. I’ll leave that project along in case anyone else here wants to take a look in the future. I’ll also post here as I learn pdf.js a bit more…obviously a tiny rendered pdf square is just a start :wink:

Awesome technology guys…just…AWESOME. At every turn, I’m more impressed.