basic pdf embedding
This commit is contained in:
parent
42e09fcae9
commit
fc1cc70870
@ -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>
|
@ -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 %}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user