Embedding PDF Viewer in Anki Card Template

Anki Card Design
1

Hey folks,

I want to embed a simple PDF Viewer in an Anki card template to experiment a little with incremental reading. Since the cards are simple HTML/Javascript i am sure this should work. But i cannot get it to work.

So far i have tried to embed pdfjs. Using a script tag and importing it from a cdn, local file and by copy pasting the whole pdfjs code into the card. Both ways did not work and the pdfjs object was not defined.

A snippet:

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>
<script>
(function() {
    const url = 'path/to/your/pdf/file.pdf'; // Change this to the path of your PDF file
    const pageNum = 23; // The page you want to open

    const canvas = document.getElementById('pdf-canvas');
    const context = canvas.getContext('2d');

    // Load the PDF document
    pdfjsLib.getDocument(url).promise.then(pdfDoc => {

I have looked around the forum and saw that other people hat problems with loading JavaScript, too but did not find a solution that worked for me.

The second idea was to utilize the build in features of the qtwebengine. But neither embed, object nor iframe tags worked. The iframe at least rendered something. A download button that opened the pdf in my Webbrowser on windows.

<iframe id="pdfViewer" style="width: 100%; height: 100%;" src="Continuous-Delivery.pdf"></iframe>

I also got it kind of working on AnkiDroid by changing the URI to the full path like content://com.android.blablabla… This opens the file in Firefox as soon as I open the card. Not bad but not what I am looking for. I tried to open it with Librera but that showed an error about a missing activity for the VIEW intent. I guess that is something missing in the Librera Reader implementation.

I am aware of pdf AddOns. I want it to work just with card styles because i mostly use AnkiDroid.

1 Like
2

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.