still working on html to pdf

Author: Jon Garcia

api/templates/print.html

@@ -1,6 +1,8 @@
 {% extends "header.html" %}
 {% block style %}
-{{ extra_css }}
+{% for css in extra_css %}
+    <link rel="stylesheet" href="{{ css }}">
+{% endfor %}
 {{ styles }}
 {% endblock %}
 

api/tests/test_html_to_pdf.py

@@ -7,13 +7,24 @@
 
 def test_api_get_project_report(client: FlaskClient, admin_login: dict):
     from urllib.parse import quote
+
+    resp = client.post(endpoint('/to-pdf'))
+    assert resp.status_code == 401
+    assert resp.json['error'] == 'Token is missing!'
+
+    resp = client.post(endpoint('/to-pdf'), headers=admin_login)
+    assert resp.status_code == 400
+    assert resp.json['error'] == 'Missing necessary arguments'
+
     data = {
-        'html': b64encode(quote('<div></div>').encode()).decode(),
-        'style': b64encode(quote('style></style>').encode()).decode(),
-        'extra_css': b64encode(quote('http://file.com/extrashee.css').encode()).decode(),
+        'html': b64encode(quote('<div><h1>Hello</h1></div>').encode()).decode(),
+        'style': b64encode(quote('<style>h1 {color: red;}</style>').encode()).decode(),
+        'extra_css': [b64encode(
+            quote('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css').encode()
+        ).decode()],
         'uid': 'filename'
     }
 
     resp = client.post(endpoint('/to-pdf'), json=data, headers=admin_login)
     assert resp.status_code == 200
-    assert resp.headers['Content-Disposition'] == "download;filename='filename.pdf'"
+    #assert resp.headers['Content-Disposition'] == "download;filename='filename.pdf'"

api/views/shared.py

@@ -2,12 +2,13 @@
 import re
 from datetime import datetime
 from io import BytesIO
+from urllib.parse import unquote
 
 import pdfkit
 import pytz
 
 from PIL import Image
-from flask import request, current_app, render_template
+from flask import request, current_app, render_template, send_file
 from flask_mail import Message
 from markupsafe import Markup
 
@@ -89,20 +90,27 @@ def email_html(email: str, body, template, title=''):
 
 class HtmlToPdf(API):
 
+    @token_required
     def post(self):
-        extra_css = ''
+        extra_css = []
         styles = ''
         data = request.get_json()
-        html = base64.b64decode(data['html']).decode()
-        filename = data['uid'] = '.pdf'
+        if data is None or 'html' not in data or 'uid' not in data:
+            raise HttpException('Missing necessary arguments')
+        html = unquote(base64.b64decode(data['html']).decode())
+        filename = data['uid'] + '.pdf'
         if 'extra_css' in data:
-            extra_css = base64.b64decode(data['extra_css']).decode()
+            extra_css = [unquote(base64.b64decode(link).decode()) for link in data['extra_css']]
 
         if 'style' in data:
-            styles = base64.b64decode(data['style']).decode()
+            styles = unquote(base64.b64decode(data['style']).decode())
+
+        template = render_template('print.html', body=Markup(html), styles=Markup(styles), extra_css=extra_css)
 
-        template = render_template('print.html', body=html, extra_styles=styles, extra_css=extra_css)
+        with open('file.html', 'w') as pdf:
+            pdf.write(template)
 
-        pdfkit.from_string(template, filename)
+        fp = BytesIO()
+        pdfkit.from_file('file.html', 'out.pdf')
 
-        return template
+        return send_file('out.pdf', attachment_filename=filename)

service.sh

@@ -35,7 +35,7 @@ run_tests() {
       FLAGS="$FLAGS $3"
       APPEND="${@:4}"
     fi
-    COMMAND="pytest $FLAGS tests/$APPEND"
+    COMMAND="pytest $FLAGS $APPEND"
     printf "%s\n" "$COMMAND"
 
     docker exec -ti "$CONTAINER_ID" bash -c \

static/js/actions/projectActions.js

@@ -19,6 +19,9 @@ export const REPORT_FETCHED = 'REPORT_FETCHED';
 export const REPORTS_FETCHED = 'REPORTS_FETCHED';
 export const REPORTS_FETCH_FAILED = 'REPORTS_FETCH_FAILED';
 export const REPORT_CLEAR = 'REPORT_CLEAR';
+export const REPORT_DOWNLOADED = 'REPORT_CLEAR';
+export const REPORT_DOWNLOADING = 'REPORT_DOWNLOADING';
+export const REPORT_DOWNLOAD_FAILED = 'REPORT_CLEAR';
 
 export const fetchProjects = (fail) =>
     (dispatch) => {
@@ -116,7 +119,7 @@ export const fetchReportByUid = (uid) =>
     };
 
 export const fetchReports = (project_id, uid) =>
-    (dispatch) => {
+    dispatch => {
         dispatch({ type: REPORT_FETCHING });
         const q = { project_id };
         if (uid) {
@@ -127,7 +130,7 @@ export const fetchReports = (project_id, uid) =>
                 url: `/reports?${urlEncode.stringify(q)}`,
                 method: 'GET',
                 headers: header
-            }).then((resp) => {
+            }).then(resp => {
                 dispatch({ type: REPORTS_FETCHED, payload: resp.data });
             }, err => {
                 dispatch({ type: REPORTS_FETCH_FAILED, payload: err });
@@ -140,3 +143,19 @@ export const setCurrentReport = (report) =>
 
 export const currentReportClear = () =>
     dispatch => dispatch({ type: REPORT_CLEAR });
+
+export const download_report = (filename, html, styles, extra_css = []) =>
+    dispatch => {
+        dispatch({ type: REPORT_DOWNLOADING });
+        token.through().then(header =>
+            api({
+                url: '/to-pdf',
+                method: 'POST',
+                headers: header
+            }, { filename, html, styles, extra_css }).then(resp => {
+                dispatch({ type: REPORT_DOWNLOADED, payload: resp.data });
+            }, err => {
+                dispatch({ type: REPORT_DOWNLOAD_FAILED, payload: err });
+            })
+        );
+    };

static/js/components/projects/reports/Report.jsx

@@ -5,7 +5,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Breadcrumbs from '../../../utils/Breadcrumbs';
-import { currentReportClear, fetchReportByUid } from '../../../actions/projectActions';
+import { currentReportClear, download_report, fetchReportByUid } from '../../../actions/projectActions';
 import Spinner from '../../../utils/Spinner';
 import Table from '../../../utils/Table';
 import { formatDateEs, numberWithCommas } from '../../../utils/helpers';
@@ -18,6 +18,7 @@ export default class Report extends React.Component {
         if (props.projects.currentReport.project_id === '') {
             props.dispatch(fetchReportByUid(props.match.params.report_uid));
         }
+        this.download = this.download.bind(this);
     }
 
     render() {
@@ -56,8 +57,7 @@ export default class Report extends React.Component {
         let html = '<div class="monthly-report"><div class="report-body">';
         html += document.querySelector('.report-body').innerHTML;
         html += '</div></div>';
-        console.log(styles);
-        console.log(html);
+        this.props.dispatch(download_report(this.props.match.params.report_uid, html, styles));
     }
 
     getRender({ projects: { currentReport }}) {