Embedding PDFs via iframe in Anki Cards (show PDF content instead of "Open" button)

Hi everyone,

I’m trying to embed a remote PDF directly into an Anki card using an iframe, for example like this:

<iframe src="https://pdfobject.com/pdf/sample.pdf#page=1" width="800" height="600"></iframe>

However, instead of showing the PDF inline, Anki just displays an “Open” button.

Would it be possible to implement built-in support for inline PDF viewing in Anki cards so that something like this works by default?

Thanks!

1 Like

In the meantime, I found an alternative solution by using Google Drive viewer like this:

<iframe
  src="https://docs.google.com/viewer?url=https://pdfobject.com/pdf/sample.pdf&embedded=true"
  width="800"
  height="600"
  onload="this.contentWindow.location.hash=':0.page.0';"
  frameborder="0"
></iframe>

However, I can’t link to speficic pages, unlike the previous direct approach (i.e. adding #page=N or ?page=N before &embedded=true doesn’t work, and the onload parameter is ignored).

This add-on can help you with that.

https://ankiweb.net/shared/info/16097657

1 Like

There’s a solution for that, but it requires changes to Anki or using a simple add-on.

You can add this code to a file named __init__.py and put in a subfolder in your addons folder to show an inline PDF viewer:

from __future__ import annotations

from typing import cast

from aqt import gui_hooks
from aqt.browser.previewer import Previewer
from aqt.clayout import CardLayout
from aqt.qt import QWebEngineSettings
from aqt.reviewer import Reviewer
from aqt.webview import AnkiWebView, WebContent


def on_webview_will_set_content(
    web_content: WebContent, context: object | None
) -> None:
    if isinstance(context, Reviewer):
        web = cast(AnkiWebView, context.web)
    elif isinstance(context, CardLayout):
        web = context.preview_web
    elif isinstance(context, Previewer):
        web = context._web
    else:
        return
    web.settings().setAttribute(QWebEngineSettings.WebAttribute.PluginsEnabled, True)
    web.settings().setAttribute(QWebEngineSettings.WebAttribute.PdfViewerEnabled, True)


gui_hooks.webview_will_set_content.append(on_webview_will_set_content)

You can go to your add-ons folder from Tools > Add-ons > Show Files.

Note that this solution doesn’t work on mobile apps. If you need that, you can try this add-on (it comes with a custom PDF viewer that works on mobile): https://ankiweb.net/shared/info/1648575776

2 Likes

Thank you for the response.

On PC, I created the Python init file and restarted Anki, but this first solution didn’t change the behaviour of Anki when showing the embedded PDF (it still shows just the Open button). It blocked Google Drive embedded PDFs from working correctly, though.

The addon you suggested (and made, many thanks!), works perfectly (even on web, though not on AnkiDroid) and supports page references, too!

I will use that add-on and put it as a requirement for my decks if they use embedded PDFs, but the fact that it exists and can work makes me wonder if it could be a future new native Anki feature, at least on PC.

Is it ok if ask on GitHub with an issue about this feature? Or is it really technically impossible? I don’t know about technical details but it seems like it only requires a PDF.js viewer like you implemented.

1 Like

No need to. Feature request should be posted here on the forums in Anki > Suggestions. You have done that already, so there’s nothing else to do. It might take a (long) while though until it might be implemented (and maybe it won’t be implemented at all).

Yes, it is possible. Otherwise the addons wouldn’t be able to do it either.

3 Likes

Ok, perfect! I’m hopeful :slight_smile: