Add problem pdf using browser print

This commit is contained in:
cuom1999 2021-06-10 16:36:03 -05:00
parent e91116fe1b
commit 62ba36a4c6
2 changed files with 44 additions and 21 deletions

View file

@ -41,11 +41,28 @@
.problem-info-entry { .problem-info-entry {
padding-top: 0.5em; padding-top: 0.5em;
} }
#raw_problem {
visibility: hidden;
width: 0;
height: 0;
}
</style> </style>
{% endblock %} {% endblock %}
{% block content_js_media %} {% block content_js_media %}
{% include "comments/media-js.html" %} {% include "comments/media-js.html" %}
<script type="text/javascript">
$(function() {
$('#pdf_button').click(async function(e) {
e.preventDefault();
while(!$('.math-loaded', frames['raw_problem'].document).length){
await new Promise(r => setTimeout(r, 200));
}
frames['raw_problem'].print();
});
});
</script>
{% endblock %} {% endblock %}
{% block title_row %} {% block title_row %}
@ -81,16 +98,19 @@
{% endfor %} {% endfor %}
</span> </span>
{% endif %} {% endif %}
{% if has_pdf_render %}
<span class="spacer"></span> <span class="spacer"></span>
{% if has_render %}
<a href="{{ url('problem_pdf', problem.code) }}" class="view-pdf"> <a href="{{ url('problem_pdf', problem.code) }}" class="view-pdf">
{% else %}
<a id="pdf_button" class="view-pdf" href='#'>
{% endif %}
<span class="pdf-icon"> <span class="pdf-icon">
<span class="fa fa-file-pdf-o pdf-icon-logo"></span> <span class="fa fa-file-pdf-o pdf-icon-logo"></span>
<span class="pdf-icon-bar"></span> <span class="pdf-icon-bar"></span>
</span> </span>
{{ _('View as PDF') }} {{ _('View as PDF') }}
</a> </a>
{% endif %}
</div> </div>
{% endblock %} {% endblock %}
@ -324,6 +344,7 @@
{% else %} {% else %}
{% include "comments/list.html" %} {% include "comments/list.html" %}
{% endif %} {% endif %}
<iframe src="{{problem.code}}/raw" name="raw_problem" id="raw_problem"></iframe>
{% endblock %} {% endblock %}
{% block bodyend %} {% block bodyend %}

View file

@ -1,6 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<link rel="stylesheet" href="{{ static('style.css') }}">
<link rel="stylesheet" href="{{ static('pygment-github.css') }}" type="text/css">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="pygment-github.css" type="text/css"> <link rel="stylesheet" href="pygment-github.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
@ -79,9 +81,10 @@
</div> </div>
<hr style="clear: both;"> <hr style="clear: both;">
<div class="content-description printing"> <div class="content-description printing">
{{ description|markdown('problem', 'tex' if math_engine == 'jax' else math_engine)|reference|absolutify(url)|str|safe }} {{ description|markdown('problem', 'tex')|reference|absolutify(url)|str|safe }}
</div> </div>
{% if math_engine == 'jax' %}
<script type="text/javascript" src="{{ static('mathjax_config.js') }}"></script>
<script type="text/javascript" src="mathjax_config.js"></script> <script type="text/javascript" src="mathjax_config.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_HTML"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_HTML"></script>
<script type="text/javascript"> <script type="text/javascript">
@ -91,6 +94,5 @@
document.body.classList.add('math-loaded'); document.body.classList.add('math-loaded');
}); });
</script> </script>
{% endif %}
</body> </body>
</html> </html>