From c6a710aacd2ec38fc3aae3fc21ce2c47cd0ee9de Mon Sep 17 00:00:00 2001 From: Leonardo Campos Date: Tue, 24 Jan 2017 05:59:22 -0200 Subject: [PATCH] LT-55: measurements report (jsPDF, html2canvas) --- .../ohif-measurements/client/lib/exportPdf.js | 144 ++++++++++-------- .../ohif-measurements/client/reports/index.js | 4 +- .../reports/measurements/measurements.html | 15 ++ .../reports/measurements/measurements.js | 15 ++ .../reports/measurements/measurements.styl | 25 +++ .../client/reports/templates/index.js | 1 - .../reports/templates/measurements.html | 7 - Packages/ohif-measurements/package.js | 3 +- 8 files changed, 143 insertions(+), 71 deletions(-) create mode 100644 Packages/ohif-measurements/client/reports/measurements/measurements.html create mode 100644 Packages/ohif-measurements/client/reports/measurements/measurements.js create mode 100644 Packages/ohif-measurements/client/reports/measurements/measurements.styl delete mode 100644 Packages/ohif-measurements/client/reports/templates/index.js delete mode 100644 Packages/ohif-measurements/client/reports/templates/measurements.html diff --git a/Packages/ohif-measurements/client/lib/exportPdf.js b/Packages/ohif-measurements/client/lib/exportPdf.js index bf6b6b9c2..26bc7ad2e 100644 --- a/Packages/ohif-measurements/client/lib/exportPdf.js +++ b/Packages/ohif-measurements/client/lib/exportPdf.js @@ -1,93 +1,115 @@ import { OHIF } from 'meteor/ohif:core'; -// import * as jsPDF from 'jspdf'; +// import { $ } from 'meteor/jquery'; import jsPDF from 'jspdf'; -import * as pdfDebug from 'jspdf'; -// import html2canvas from 'html2canvas'; +import html2canvas from 'html2canvas'; window.jsPDF = jsPDF; -window.pdfDebug = pdfDebug; -// window.html2canvas = html2canvas; +window.html2canvas = html2canvas; -// console.log('>>>>>>>>>>> html2canvas: ', html2canvas); +// window.exportCanvasToPdf = canvas => { +// // only jpeg is supported by jsPDF +// const imgData = canvas.toDataURL('image/jpeg', 1.0); +// const pdf = new jsPDF(); -window.exportCanvasToPdf = canvas => { - // only jpeg is supported by jsPDF - const imgData = canvas.toDataURL('image/jpeg', 1.0); - const pdf = new jsPDF(); +// pdf.addImage(imgData, 'JPEG', 0, 0); +// pdf.save('download.pdf'); +// }; - pdf.addImage(imgData, 'JPEG', 0, 0); - pdf.save('download.pdf'); -}; +// window.exportActiveViewportToPdf = () => { +// const activeViewportElement = getActiveViewportElement(); +// if (!activeViewportElement) { +// console.log('>>>>> No active viewport element'); +// return; +// } -window.exportActiveViewportToPdf = () => { - const activeViewportElement = getActiveViewportElement(); - if (!activeViewportElement) { - console.log('>>>>> No active viewport element'); - return; - } +// console.log('>>>>> activeViewportElement: ', activeViewportElement); +// const canvas = $(activeViewportElement).find('canvas').get(0); - console.log('>>>>> activeViewportElement: ', activeViewportElement); - const canvas = $(activeViewportElement).find('canvas').get(0); +// if (!canvas) { +// console.log('>>>>> canvas is not available'); +// return; +// } - if (!canvas) { - console.log('>>>>> canvas is not available'); - return; - } +// exportCanvasToPdf(canvas); +// }; - exportCanvasToPdf(canvas); +// Split the data into pages +// To make it easier we're going to work with a fixed grid (4R x 2C) +const getReportData = data => { + const patient = data.patient; + const pages = []; + let page; + + // Working with ITEMS until we get real data (measurements) + const itemsPerPage = 3; + data.items.forEach(item => { + if (!page || (page.items.length === itemsPerPage)) { + page = { + width: 595, // points + height: 841, // points + patient, + items: [] + }; + + pages.push(page); + } + + page.items.push(item); + }); + + return pages; }; window.exportPdf = (options) => { - const parentElement = document.createElement('div'); - const template = Template[options.templateName]; - const data = options.data; - const pdf = new jsPDF(); - const page = options.page; - const width = page.width - page.margins.left - page.margins.right; // A4 = 210 × 297; - - // const html = Blaze.toHTMLWithData(Template['measurementsReport'], data); - // console.log('>>>>> html: ', html); + const pages = getReportData(options.data); + const template = Template.measurementsReport; + const pdf = new jsPDF('portrait', 'pt', 'a4'); + let renderedView; const parentNode = document.createElement('div'); - document.body.appendChild(parentNode); - parentNode.style.position = 'absolute'; - parentNode.style.top = 0; - parentNode.style.right = 0; - parentNode.style.bottom = 0; - parentNode.style.left = 0; - parentNode.style.backgroundColor = '#F00'; - // parentNode.style.transform = 'translate(-100%, -100%)'; + const onRendered = (template) => { + const printableElement = template.find('.print'); + const renderOptions = { + pagesplit: true + }; - Blaze.renderWithData(Template['measurementsReport'], data, parentNode); - console.log('>>>>> parentNode: ', parentNode); + document.body.appendChild(parentNode); + pdf.addHTML(printableElement, 0, 0, renderOptions, () => { + // Blaze.remove(renderedView); + // document.body.removeChild(parentNode); + pdf.save('html2pdf.pdf'); + console.log('Done!'); + }); + }; - pdf.fromHTML(parentNode, page.margins.left, page.margins.right, { width }, () => { - pdf.save('pdfFromHtml.pdf'); - }); + const viewModel = { + pages, + onRendered + }; - window.parentNode = parentNode; - window.pdf = pdf; + renderedView = Blaze.renderWithData(Template['measurementsReport'], viewModel, parentNode); + // const html = Blaze.toHTMLWithData(Template['measurementsReport'], pages); }; window.testExportPdf = () => { const options = { - templateName: 'measurementsReport', - page: { - format: 'a4', - orientation: 'portrait', - width: 595.28, - margins: { - left: 10, - right: 10 - } - }, data: { + patient: { + name: 'Patient name' + }, + // study: { + // foo: 'bar' + // }, + // timepoint: { + // date: '1/1/1900' + // }, + // measurements: [ ], items: [] } }; - for (let i = 0; i < 30; i++) { + for (let i = 0; i < 8; i++) { options.data.items.push('Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium possimus sit alias. Repellendus minus placeat mollitia voluptas quod repellat vero quasi similique dolores minima excepturi, adipisci iusto optio, omnis accusamus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum repudiandae alias praesentium possimus minima sunt velit voluptates maxime labore sequi, quasi cum eos perferendis tempora dolorem obcaecati ut commodi qui.'); } diff --git a/Packages/ohif-measurements/client/reports/index.js b/Packages/ohif-measurements/client/reports/index.js index cdbd72559..961db15c8 100644 --- a/Packages/ohif-measurements/client/reports/index.js +++ b/Packages/ohif-measurements/client/reports/index.js @@ -1 +1,3 @@ -import './templates'; \ No newline at end of file +import './measurements/measurements.html'; +import './measurements/measurements.styl'; +import './measurements/measurements.js'; diff --git a/Packages/ohif-measurements/client/reports/measurements/measurements.html b/Packages/ohif-measurements/client/reports/measurements/measurements.html new file mode 100644 index 000000000..721683c1e --- /dev/null +++ b/Packages/ohif-measurements/client/reports/measurements/measurements.html @@ -0,0 +1,15 @@ + \ No newline at end of file diff --git a/Packages/ohif-measurements/client/reports/measurements/measurements.js b/Packages/ohif-measurements/client/reports/measurements/measurements.js new file mode 100644 index 000000000..7182d5293 --- /dev/null +++ b/Packages/ohif-measurements/client/reports/measurements/measurements.js @@ -0,0 +1,15 @@ +Template.measurementsReport.onRendered(() => { + const instance = Template.instance(); + const data = Template.currentData(); + const onRendered = data.onRendered; + + if (onRendered) { + onRendered(instance); + } +}); + +Template.measurementsReport.helpers({ + getCanvasData(canvas) { + + } +}); diff --git a/Packages/ohif-measurements/client/reports/measurements/measurements.styl b/Packages/ohif-measurements/client/reports/measurements/measurements.styl new file mode 100644 index 000000000..bcc6f970a --- /dev/null +++ b/Packages/ohif-measurements/client/reports/measurements/measurements.styl @@ -0,0 +1,25 @@ +#measurementsReport + background-color: #FFF; + color: #000; + font-size: 12pt; + left: 0; + min-width: 300pt; + min-height: 150pt; + position: absolute; + top: 0; + z-index: 10000; + // transform: translate(-100%, -100%); + + .page + border: solid 1pt #F00; + padding: 6pt; + + .pageNumber + float: right; + + .item + background-color: #EEE; + color: #666; + margin: 10pt 0; + padding: 10pt; + // page-break-before: auto; \ No newline at end of file diff --git a/Packages/ohif-measurements/client/reports/templates/index.js b/Packages/ohif-measurements/client/reports/templates/index.js deleted file mode 100644 index 9cefa1812..000000000 --- a/Packages/ohif-measurements/client/reports/templates/index.js +++ /dev/null @@ -1 +0,0 @@ -import './measurements.html'; \ No newline at end of file diff --git a/Packages/ohif-measurements/client/reports/templates/measurements.html b/Packages/ohif-measurements/client/reports/templates/measurements.html deleted file mode 100644 index 796185a60..000000000 --- a/Packages/ohif-measurements/client/reports/templates/measurements.html +++ /dev/null @@ -1,7 +0,0 @@ - \ No newline at end of file diff --git a/Packages/ohif-measurements/package.js b/Packages/ohif-measurements/package.js index f80bf7c9b..122152451 100644 --- a/Packages/ohif-measurements/package.js +++ b/Packages/ohif-measurements/package.js @@ -1,6 +1,7 @@ Npm.depends({ ajv: '4.10.4', - jspdf: '1.3.2' + jspdf: '1.3.2', + html2canvas: '0.5.0-beta4' }); Package.describe({