basic pdf embedding

.idea/jsLibraryMappings.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="JavaScriptLibraryMappings">
-    <file url="file://$PROJECT_DIR$" libraries="{jquery-3.4.1}" />
+    <file url="file://$PROJECT_DIR$" libraries="{jquery-3.4.1, pdf, pretty-checkbox}" />
   </component>
 </project>

cookbook/templates/recipe_view.html

@@ -20,8 +20,10 @@
         <div class="col col-md-3 d-print-none" style="text-align: right">
             <button class="btn btn-success" onclick="$('#bookmarkModal').modal({'show':true})"><i
                     class="fas fa-bookmark"></i></button>
+            {% if ingredients %}
                 <a class="btn btn-warning" href="{% url 'view_shopping' %}?r={{ recipe.pk }}"><i
                         class="fas fa-shopping-cart"></i></a>
+            {% endif %}
             <a class="btn btn-info" href="{% url 'new_plan' %}?recipe={{ recipe.pk }}"><i
                     class="fas fa-calendar"></i></a>
         </div>
@@ -130,12 +132,14 @@
 
 
     {% if recipe.storage %}
-        <a href='#' onClick='openRecipe({{ recipe.id }}, true)' class="d-print-none">{% trans 'View external recipe' %}
+        <div class="row">
-            <i
+            {% if recipe.internal %}
-                    class="fas fa-external-link-alt"></i></a>
+                <a href='#' onClick='openRecipe({{ recipe.id }}, true)'
-    {% endif %}
+                   class="d-print-none">{% trans 'View external recipe' %} <i class="fas fa-external-link-alt"></i></a>
+            {% else %}
+
+                <canvas id="id_pdf_canvas" class="border"></canvas>
 
-    {% if not recipe.internal %}
                 <br/>
                 <br/>
                 <br/>
@@ -145,7 +149,9 @@
                         <p class="card-text">
                             {% blocktrans %}
                                 This is an external recipe, which means you can only view it by opening the link above.
-                        You can convert this recipe to a fancy recipe by pressing the convert button. The original file
+                                You can convert this recipe to a fancy recipe by pressing the convert button. The
+                                original
+                                file
                                 will still be accessible.
                             {% endblocktrans %}.
                             <br/>
@@ -155,6 +161,60 @@
                         </p>
                     </div>
                 </div>
+
+                <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.3.200/pdf.min.js"
+                        integrity="sha256-J4Z8Fhj2MITUakMQatkqOVdtqodUlwHtQ/ey6fSsudE="
+                        crossorigin="anonymous"></script>
+
+                <script type="text/javascript">
+                    var url = "{% url 'api_get_external_file_link' recipe_id=12345 %}".replace(/12345/, {{ recipe.id }});
+
+                    var xhttp = new XMLHttpRequest();
+                    xhttp.onreadystatechange = function () {
+                        if (this.readyState === 4 && this.status === 200) {
+                            var url = this.responseText;
+
+                            var loadingTask = pdfjsLib.getDocument(url.replace('www.dropbox.', 'dl.dropboxusercontent.'));
+                            loadingTask.promise.then(function (pdf) {
+                                console.log('PDF loaded');
+
+                                // Fetch the first page
+                                var pageNumber = 1;
+                                pdf.getPage(pageNumber).then(function (page) {
+                                    console.log('Page loaded');
+
+                                    var scale = 1.5;
+                                    var viewport = page.getViewport({scale: scale*0.8});
+
+                                    // Prepare canvas using PDF page dimensions
+                                    var canvas = document.getElementById('id_pdf_canvas');
+                                    var context = canvas.getContext('2d');
+                                    canvas.height = viewport.height;
+                                    canvas.width = viewport.width;
+
+                                    // Render PDF page into canvas context
+                                    var renderContext = {
+                                        canvasContext: context,
+                                        viewport: viewport
+                                    };
+                                    var renderTask = page.render(renderContext);
+                                    renderTask.promise.then(function () {
+                                        console.log('Page rendered');
+                                    });
+                                });
+                            }, function (reason) {
+                                // PDF loading error
+                                console.error(reason);
+                            });
+                        }
+                    };
+                    xhttp.open("GET", url, true);
+                    xhttp.send();
+
+
+                </script>
+            {% endif %}
+        </div>
     {% endif %}
 
     <br/>