Merge pull request #83 from the-commons-project/save-as-PDF

Save-as-PDF

Author: edwardjcruz

package-lock.json

@@ -12,6 +12,7 @@
     "fhirclient": "^2.5.2",
     "html2canvas": "^1.4.1",
     "jose": "^4.13.1",
+    "jspdf": "^2.5.1",
     "pdfjs-dist": "^3.3.122",
     "qr-scanner": "^1.4.2",
     "react": "^18.2.0",

package.json

@@ -3,7 +3,7 @@ import { Button, TextField, Select, MenuItem } from '@mui/material';
 import CircularProgress from '@mui/material/CircularProgress';
 import { useOptionalFhir } from './OptionalFhir';
 import { verifySHX, SHX_STATUS_NEED_PASSCODE, SHX_STATUS_OK  } from './lib/SHX.js';
-import { saveDivToFile, saveDivToFHIR, downloadBundleToJSON } from './lib/saveDiv.js';
+import { saveDivToPdfFile, saveDivToFHIR, downloadBundleToJSON } from './lib/saveDiv.js';
 import { getDeferringCodeRenderer } from './lib/codes.js';
 import * as res from './lib/resources.js';
 import ValidationInfo from './ValidationInfo.js';
@@ -128,7 +128,7 @@ export default function Data({ shx }) {
 		  { elt }
 		</div>
         <div>
-          { elt && <Button onClick={ () => onSaveClick(true) }>save to file</Button> }
+          { elt && <Button onClick={ () => onSaveClick(true) }>save to PDF</Button> }
           { elt && fhir && <Button onClick={ () => onSaveClick(false) }>save to ehr</Button> }
           { elt && <Button onClick={ () => downloadBundleToJSON(bundle.fhir, "fhir-bundle-data") }>Save as FHIR</Button> }
           <Button onClick={ () => setShowSource(!showSource) }>source</Button>
@@ -154,7 +154,7 @@ export default function Data({ shx }) {
 	const div = document.getElementById("bundle-contents");
 
 	if (toFile) {
-	  saveDivToFile(div, baseName);
+	  saveDivToPdfFile(div, baseName);
 	}
 	else {
 	  saveDivToFHIR(fhir, div, baseName);

src/Data.js

@@ -1,21 +1,33 @@
-
 import html2canvas from 'html2canvas';
+import { jsPDF } from 'jspdf';
 
-// +---------------+
-// | saveDivToFile |
-// +---------------+
-
-export async function saveDivToFile(div, baseName) {
+// +-------------------+
+// | saveDivToPdfFile  |
+// +-------------------+
 
+export async function saveDivToPdfFile(div, baseName) {
+  // Use the divToImage helper function to convert the div to image data
   const imageInfo = await divToImage(div);
-  
-  const link = document.createElement("a");
-  link.href = imageInfo.url;
-  link.download = getFilename(baseName, imageInfo.extension);
 
-  link.click();
+  // Calculate the number of pages using the width and height from imageInfo
+  const pdfWidth = imageInfo.width * 0.264583; // Width in mm (1px = 0.264583mm based on 96dpi)
+  const pdfHeight = imageInfo.height * 0.264583; // Height in mm
+
+  // Create a new jsPDF instance
+  const pdf = new jsPDF({
+    orientation: pdfWidth > pdfHeight ? 'l' : 'p',
+    unit: 'mm',
+    format: [pdfWidth, pdfHeight]
+  });
+
+  // Add the image to the PDF using the data URL
+  pdf.addImage(imageInfo.url, 'PNG', 0, 0, pdfWidth, pdfHeight);
+
+  // Save the PDF
+  pdf.save(`${baseName}.pdf`);
 }
 
+
 // +---------------+
 // | saveDivToFHIR |
 // +---------------+