use pdf library

Author: tallen42

selections/blueprints/application.py

@@ -8,7 +8,6 @@
 from selections.models import Applicant, Criteria, db, Members, Submission
 
 
-
 @app.route('/application/<app_id>')
 @auth.oidc_auth
 @before_request
@@ -26,14 +25,21 @@ def get_application(app_id, info=None):
         flash('You already reviewed that application!')
         return redirect(url_for('main'))
 
-    pdf_url = s3.generate_presigned_url('get_object', Params={'Bucket': app.config['S3_BUCKET_NAME'], 'Key': applicant_info.rit_id+'.pdf'}, ExpiresIn=30)
     return render_template(
         'vote.html',
         application=applicant_info,
-        pdf_url=pdf_url,
+        pdf_url='/application/content'+app_id,
         info=info,
         fields=fields)
 
+@app.route('/application/content/<app_id>')
+@auth.oidc_auth
+def get_application_pdf(app_id):
+    applicant_info = Applicant.query.filter_by(id=app_id).first()
+    resp = s3.get_object(Bucket=app.config['S3_BUCKET_NAME'], Key='/'+applicant_info.rit_id+'.pdf')
+    pdfdata = resp.read()
+    return pdfdata
+
 
 @app.route('/application', methods=['POST'])
 @auth.oidc_auth

selections/static/js/render_pdf.js

@@ -0,0 +1,44 @@
+
+// atob() is used to convert base64 encoded PDF to binary-like data.
+// (See also https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/
+// Base64_encoding_and_decoding.)
+
+// Loaded via <script> tag, create shortcut to access PDF.js exports.
+var { pdfjsLib } = globalThis;
+
+// The workerSrc property shall be specified.
+pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.mjs';
+
+// Using DocumentInitParameters object to load binary data.
+var canvas = document.getElementById('the-canvas');
+var loadingTask = pdfjsLib.getDocument(canvas.getAttribute('src'));
+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 });
+
+        // Prepare canvas using PDF page dimensions
+        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);
+});

selections/templates/review_app.html

@@ -24,7 +24,7 @@ <h3 class="card-title" style="text-align:left;">Application {{ application.id }}
                 <h6 class="card-subtitle mb-2 text-muted">RIT ID: {{ application.rit_id }}</h6>
                 <!--<h6 class="card-subtitle mb-2 text-muted">Gender: {{ application.gender }}</h6>-->
                 <h6 class="card-subtitle mb-2 text-muted">Team: {{ application.team }}</h6>
-                <embed src="{{pdf_url}}" type="application/pdf" width="100%" height="80%">
+                <canvas id="the-canvas" src="{{pdf_url}}" width="100%" height="80%"></canvas>
             </div>
         </div>
         {% for score in scores %}
@@ -47,5 +47,6 @@ <h6 class="card-subtitle mb-2 text-muted">Score: {{ score.score }}</h6>
             </div>
         {% endfor %}
     </div>
+    <script src="https://mozilla.github.io/pdf.js/build/pdf.mjs" type="module"></script>
 {% endblock %}