basic pdf embedding

This commit is contained in:
vabene1111 2020-02-19 00:08:32 +01:00
parent 42e09fcae9
commit fc1cc70870
2 changed files with 86 additions and 26 deletions

View File

@ -1,6 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<project version="4"> <project version="4">
<component name="JavaScriptLibraryMappings"> <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> </component>
</project> </project>

View File

@ -20,8 +20,10 @@
<div class="col col-md-3 d-print-none" style="text-align: right"> <div class="col col-md-3 d-print-none" style="text-align: right">
<button class="btn btn-success" onclick="$('#bookmarkModal').modal({'show':true})"><i <button class="btn btn-success" onclick="$('#bookmarkModal').modal({'show':true})"><i
class="fas fa-bookmark"></i></button> class="fas fa-bookmark"></i></button>
<a class="btn btn-warning" href="{% url 'view_shopping' %}?r={{ recipe.pk }}"><i {% if ingredients %}
class="fas fa-shopping-cart"></i></a> <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 <a class="btn btn-info" href="{% url 'new_plan' %}?recipe={{ recipe.pk }}"><i
class="fas fa-calendar"></i></a> class="fas fa-calendar"></i></a>
</div> </div>
@ -130,30 +132,88 @@
{% if recipe.storage %} {% 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 %}
{% if not recipe.internal %} <canvas id="id_pdf_canvas" class="border"></canvas>
<br/>
<br/> <br/>
<br/> <br/>
<div class="card border-info"> <br/>
<div class="card-body text-info"> <div class="card border-info">
<h5 class="card-title">{% trans 'External recipe' %}</h5> <div class="card-body text-info">
<p class="card-text"> <h5 class="card-title">{% trans 'External recipe' %}</h5>
{% blocktrans %} <p class="card-text">
This is an external recipe, which means you can only view it by opening the link above. {% blocktrans %}
You can convert this recipe to a fancy recipe by pressing the convert button. The original file This is an external recipe, which means you can only view it by opening the link above.
will still be accessible. You can convert this recipe to a fancy recipe by pressing the convert button. The
{% endblocktrans %}. original
<br/> file
<br/> will still be accessible.
<a href="{% url 'edit_convert_recipe' recipe.pk %}" {% endblocktrans %}.
class="card-link btn btn-info">{% trans 'Convert now!' %}</a> <br/>
</p> <br/>
</div> <a href="{% url 'edit_convert_recipe' recipe.pk %}"
class="card-link btn btn-info">{% trans 'Convert now!' %}</a>
</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> </div>
{% endif %} {% endif %}