New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

#205 Export pdf functionality. #225

Merged
merged 2 commits into from Nov 18, 2017

Conversation

Projects
None yet
4 participants
@musale
Copy link
Contributor

musale commented Nov 14, 2017

Clicking on the Report and Export section, you have an Export button that downloads the page as a .pdf file.

Description

Create a pdf file of the section of the site in the Report and Export section

Reference to official issue

Addresses issue #205

Motivation and Context

This feature allows downloading of the page information in .pdf format.

How Has This Been Tested?

  • Load http://localhost:8080/
  • Click on the Report and Export menu section
  • Click on the Export button
  • It should download the page information in pdf format

Output samples

PDF file with eye candy
PDF file without eye candy

CLA

  • I have signed the CLA; if other committers are in the commit history, they have signed the CLA as well
#205 Export pdf functionality.
Clicking on the report and export section, you have an export functionality that downloads the page as a pdf file.
@vessemer
Copy link
Contributor

vessemer left a comment

I'm not sure that the issue #205 was about front-end implementation.
Still, @Serhiy-Shekhovtsov's question remained unanswered

@@ -197,6 +197,9 @@ import RSNAStandardTemplateFancy from './RSNAStandardTemplateFancy'
import OneLineParagraph from './OneLineParagraph'
import Nodule from '../annotate-and-segment/Nodule'
import html2canvas from 'html2canvas'
import JSPDF from 'jspdf'
import $ from 'jquery-slim'

This comment has been minimized.

@vessemer

vessemer Nov 15, 2017

Contributor

I guess due to the #215 we have to avoid usage of jquery, even slim version.
From the code below, I see that jquery was only used to get the desired DOM.
This can easily be done through $refs method from Vue API.

This comment has been minimized.

@musale

musale Nov 15, 2017

Contributor

uhh had missed this one. Let me fix in a few 👍 I am quite new Vue

This comment has been minimized.

@Serhiy-Shekhovtsov

Serhiy-Shekhovtsov Nov 15, 2017

Contributor

I am not sure html2canvas is a good idea since it will basically make a photo of selected element. So if you make the windows small, the result resolution will be really low. And second thing - it doesn't leave the text as text. Everything inside specified element will be taken as an image.

// specified the column with all the 3 components in the view
const pdfSection = $('#pdf-section')
html2canvas(pdfSection).then(canvas => {
var imgData = canvas.toDataURL('image/png')

This comment has been minimized.

@vessemer

vessemer Nov 15, 2017

Contributor

Not sure, but think it'll be better to follow the @louisgv suggestion to use let and const in lue of var

@lamby

This comment has been minimized.

Copy link
Contributor

lamby commented Nov 15, 2017

(Updated to match!)

@lamby

This comment has been minimized.

Copy link
Contributor

lamby commented Nov 15, 2017

I'd love to see an example output? Can you upload something somewhere? :)

@musale

This comment has been minimized.

Copy link
Contributor

musale commented Nov 16, 2017

@lamby updated the PR description with some sample files

@lamby lamby merged commit 4cba706 into drivendataorg:master Nov 18, 2017

2 checks passed

concept-to-clinic/cla @musale has signed the CLA.
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment