diff --git a/src/components/RightSidebar/tabs/Actions.js b/src/components/RightSidebar/tabs/Actions.js index 83b70960..5fdb69ab 100644 --- a/src/components/RightSidebar/tabs/Actions.js +++ b/src/components/RightSidebar/tabs/Actions.js @@ -2,12 +2,10 @@ /* eslint-disable jsx-a11y/anchor-has-content */ /* eslint-disable jsx-a11y/anchor-is-valid */ import React, { useRef, useContext } from 'react'; -import { useTranslation, Trans } from 'react-i18next'; -import html2canvas from 'html2canvas'; -import * as jsPDF from 'jspdf'; +import { useTranslation } from 'react-i18next'; import PageContext from '../../../context/PageContext'; -import { importJson } from '../../../utils'; +import { importJson, saveAsPdf } from '../../../utils'; const ActionsTab = ({ data, theme, dispatch }) => { const pageContext = useContext(PageContext); @@ -24,39 +22,6 @@ const ActionsTab = ({ data, theme, dispatch }) => { dlAnchor.click(); }; - const printAsPdf = () => { - panZoomRef.current.autoCenter(1); - panZoomRef.current.reset(); - - setTimeout(() => { - html2canvas(pageRef.current, { - scale: 5, - useCORS: true, - allowTaint: true, - }).then(canvas => { - const image = canvas.toDataURL('image/jpeg', 1.0); - const doc = new jsPDF('p', 'mm', 'a4'); - const pageWidth = doc.internal.pageSize.getWidth(); - const pageHeight = doc.internal.pageSize.getHeight(); - - const widthRatio = pageWidth / canvas.width; - const heightRatio = pageHeight / canvas.height; - const ratio = widthRatio > heightRatio ? heightRatio : widthRatio; - - const canvasWidth = canvas.width * ratio; - const canvasHeight = canvas.height * ratio; - - const marginX = (pageWidth - canvasWidth) / 2; - const marginY = (pageHeight - canvasHeight) / 2; - - panZoomRef.current.autoCenter(0.7); - - doc.addImage(image, 'JPEG', marginX, marginY, canvasWidth, canvasHeight, null, 'SLOW'); - doc.save(`RxResume_${Date.now()}.pdf`); - }); - }, 250); - }; - const loadDemoData = () => { dispatch({ type: 'load_demo_data' }); dispatch({ type: 'save_data' }); @@ -114,39 +79,19 @@ const ActionsTab = ({ data, theme, dispatch }) => {
-
{t('actions.printResume.heading')}
+
{t('actions.downloadResume.heading')}
+
{t('actions.downloadResume.body')}
-
- - You can click on the button below to generate a PDF instantly. Alternatively, you can - also use 
Cmd/Ctrl + P
but it would have - different effects. - -
- -
- - - -
+
diff --git a/src/i18n/source/rightSidebar/actions.json b/src/i18n/source/rightSidebar/actions.json index b6818714..52482cdc 100644 --- a/src/i18n/source/rightSidebar/actions.json +++ b/src/i18n/source/rightSidebar/actions.json @@ -9,12 +9,11 @@ "export": "Export" } }, - "printResume": { - "heading": "Print Your Resume", - "body": "You can click on the button below to generate a PDF instantly. Alternatively, you can also use <1>Cmd/Ctrl + P but it would have different effects.", + "downloadResume": { + "heading": "Download Resume", + "body": "You can click on the button below to download a PDF version of your resume instantly. For best results, please use the latest version of Google Chrome.", "buttons": { - "export": "Export", - "print": "Print" + "saveAsPdf": "Save as PDF" } }, "loadDemoData": { diff --git a/src/shared/PageController.js b/src/shared/PageController.js index 0d81c9b2..1ed55afe 100644 --- a/src/shared/PageController.js +++ b/src/shared/PageController.js @@ -1,9 +1,10 @@ import React, { useContext } from 'react'; import PageContext from '../context/PageContext'; +import { saveAsPdf } from '../utils'; const PageController = () => { const pageContext = useContext(PageContext); - const { panZoomRef } = pageContext; + const { pageRef, panZoomRef } = pageContext; const zoomIn = () => panZoomRef.current.zoomIn(2); const zoomOut = () => panZoomRef.current.zoomOut(2); @@ -29,15 +30,23 @@ const PageController = () => {
|
-
+
saveAsPdf(pageRef, panZoomRef)} + > save
|
-
+ help_outline -
+
); diff --git a/src/templates/gengar/Gengar.js b/src/templates/gengar/Gengar.js index 59961330..dcd0bd1a 100644 --- a/src/templates/gengar/Gengar.js +++ b/src/templates/gengar/Gengar.js @@ -117,7 +117,7 @@ const Gengar = () => {
{x.title}

{x.subtitle}

- +
); diff --git a/src/utils/index.js b/src/utils/index.js index bbdb2e16..135ccd85 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -1,3 +1,7 @@ +/* eslint-disable new-cap */ +import html2canvas from 'html2canvas'; +import * as jsPDF from 'jspdf'; + const move = (array, element, delta) => { const index = array.indexOf(element); const newIndex = index + delta; @@ -94,13 +98,45 @@ const importJson = (event, dispatch) => { const fr = new FileReader(); fr.addEventListener('load', () => { const importedObject = JSON.parse(fr.result); - console.log(importedObject); dispatch({ type: 'import_data', payload: importedObject }); dispatch({ type: 'save_data' }); }); fr.readAsText(event.target.files[0]); }; +const saveAsPdf = (pageRef, panZoomRef) => { + panZoomRef.current.autoCenter(1); + panZoomRef.current.reset(); + + setTimeout(() => { + html2canvas(pageRef.current, { + scale: 5, + useCORS: true, + allowTaint: true, + }).then(canvas => { + const image = canvas.toDataURL('image/jpeg', 1.0); + const doc = new jsPDF('p', 'mm', 'a4'); + const pageWidth = doc.internal.pageSize.getWidth(); + const pageHeight = doc.internal.pageSize.getHeight(); + + const widthRatio = pageWidth / canvas.width; + const heightRatio = pageHeight / canvas.height; + const ratio = widthRatio > heightRatio ? heightRatio : widthRatio; + + const canvasWidth = canvas.width * ratio; + const canvasHeight = canvas.height * ratio; + + const marginX = (pageWidth - canvasWidth) / 2; + const marginY = (pageHeight - canvasHeight) / 2; + + panZoomRef.current.autoCenter(0.7); + + doc.addImage(image, 'JPEG', marginX, marginY, canvasWidth, canvasHeight, null, 'SLOW'); + doc.save(`RxResume_${Date.now()}.pdf`); + }); + }, 250); +}; + export { move, hexToRgb, @@ -111,4 +147,5 @@ export { moveItemUp, moveItemDown, importJson, + saveAsPdf, };