From 44a4c419edf886673e7aadacef2a357ca1aff7a5 Mon Sep 17 00:00:00 2001 From: Shuffled720 Date: Sat, 4 Nov 2023 17:20:38 +0530 Subject: [PATCH] csv import export parser added --- package-lock.json | 167 +++++++++++++- package.json | 7 +- src/components/common/CSVParser.tsx | 51 +++++ src/components/common/FileConverter.tsx | 286 ++++++++++++++++++++++++ 4 files changed, 508 insertions(+), 3 deletions(-) create mode 100644 src/components/common/CSVParser.tsx create mode 100644 src/components/common/FileConverter.tsx diff --git a/package-lock.json b/package-lock.json index 27a32570..8497c613 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,15 +8,20 @@ "name": "my-app", "version": "0.1.0", "dependencies": { + "csv-parser": "^3.0.0", "framer-motion": "^10.16.4", "next": "latest", "next-auth": "^4.23.2", + "papaparse": "^5.4.1", + "pdf-lib": "^1.17.1", "react": "latest", "react-dom": "latest", - "react-google-button": "^0.7.2" + "react-google-button": "^0.7.2", + "xlsx": "^0.18.5" }, "devDependencies": { "@types/node": "latest", + "@types/papaparse": "^5.3.10", "@types/react": "latest", "@types/react-dom": "latest", "autoprefixer": "latest", @@ -403,6 +408,22 @@ "url": "https://github.com/sponsors/panva" } }, + "node_modules/@pdf-lib/standard-fonts": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@pdf-lib/standard-fonts/-/standard-fonts-1.0.0.tgz", + "integrity": "sha512-hU30BK9IUN/su0Mn9VdlVKsWBS6GyhVfqjwl1FjZN4TxP6cCw0jP2w7V3Hf5uX7M0AZJ16vey9yE0ny7Sa59ZA==", + "dependencies": { + "pako": "^1.0.6" + } + }, + "node_modules/@pdf-lib/upng": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@pdf-lib/upng/-/upng-1.0.1.tgz", + "integrity": "sha512-dQK2FUMQtowVP00mtIksrlZhdFXQZPC+taih1q4CvPZ5vqdxR/LKBaFg0oAfzd1GlHZXXSPdQfzQnt+ViGvEIQ==", + "dependencies": { + "pako": "^1.0.10" + } + }, "node_modules/@rushstack/eslint-patch": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.5.0.tgz", @@ -429,6 +450,15 @@ "integrity": "sha512-LT+OIXpp2kj4E2S/p91BMe+VgGX2+lfO+XTpfXhh+bCk2LkQtHZSub8ewFBMGP5ClysPjTDFa4sMI8Q3n4T0wg==", "dev": true }, + "node_modules/@types/papaparse": { + "version": "5.3.10", + "resolved": "https://registry.npmjs.org/@types/papaparse/-/papaparse-5.3.10.tgz", + "integrity": "sha512-mS1Fta/xJ9EDYmAvpeWzcV9Gr0cOl1ClpW7di9+wSUNDIDO55tBtyXg97O7K+Syrd9rDEmuejM2iqmJIJ1SO5g==", + "dev": true, + "dependencies": { + "@types/node": "*" + } + }, "node_modules/@types/prop-types": { "version": "15.7.7", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.7.tgz", @@ -584,6 +614,14 @@ "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0" } }, + "node_modules/adler-32": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz", + "integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==", + "engines": { + "node": ">=0.8" + } + }, "node_modules/ajv": { "version": "6.12.6", "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", @@ -1006,6 +1044,18 @@ } ] }, + "node_modules/cfb": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz", + "integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==", + "dependencies": { + "adler-32": "~1.3.0", + "crc-32": "~1.2.0" + }, + "engines": { + "node": ">=0.8" + } + }, "node_modules/chalk": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", @@ -1066,6 +1116,14 @@ "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz", "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==" }, + "node_modules/codepage": { + "version": "1.15.0", + "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz", + "integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==", + "engines": { + "node": ">=0.8" + } + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -1107,6 +1165,17 @@ "node": ">= 0.6" } }, + "node_modules/crc-32": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz", + "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==", + "bin": { + "crc32": "bin/crc32.njs" + }, + "engines": { + "node": ">=0.8" + } + }, "node_modules/cross-spawn": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", @@ -1139,6 +1208,20 @@ "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==", "dev": true }, + "node_modules/csv-parser": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/csv-parser/-/csv-parser-3.0.0.tgz", + "integrity": "sha512-s6OYSXAK3IdKqYO33y09jhypG/bSDHPuyCme/IdEHfWpLf/jKcpitVFyOC6UemgGk8v7Q5u2XE0vvwmanxhGlQ==", + "dependencies": { + "minimist": "^1.2.0" + }, + "bin": { + "csv-parser": "bin/csv-parser" + }, + "engines": { + "node": ">= 10" + } + }, "node_modules/damerau-levenshtein": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz", @@ -1947,6 +2030,14 @@ "is-callable": "^1.1.3" } }, + "node_modules/frac": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz", + "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==", + "engines": { + "node": ">=0.8" + } + }, "node_modules/fraction.js": { "version": "4.3.6", "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.6.tgz", @@ -2897,7 +2988,6 @@ "version": "1.2.8", "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz", "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==", - "dev": true, "funding": { "url": "https://github.com/sponsors/ljharb" } @@ -3255,6 +3345,16 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/pako": { + "version": "1.0.11", + "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz", + "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==" + }, + "node_modules/papaparse": { + "version": "5.4.1", + "resolved": "https://registry.npmjs.org/papaparse/-/papaparse-5.4.1.tgz", + "integrity": "sha512-HipMsgJkZu8br23pW15uvo6sib6wne/4woLZPlFf3rpDyMe9ywEXUsuD7+6K9PRkJlVT51j/sCOYDKGGS3ZJrw==" + }, "node_modules/parent-module": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", @@ -3309,6 +3409,22 @@ "node": ">=8" } }, + "node_modules/pdf-lib": { + "version": "1.17.1", + "resolved": "https://registry.npmjs.org/pdf-lib/-/pdf-lib-1.17.1.tgz", + "integrity": "sha512-V/mpyJAoTsN4cnP31vc0wfNA1+p20evqqnap0KLoRUN0Yk/p3wN52DOEsL4oBFcLdb76hlpKPtzJIgo67j/XLw==", + "dependencies": { + "@pdf-lib/standard-fonts": "^1.0.0", + "@pdf-lib/upng": "^1.0.1", + "pako": "^1.0.11", + "tslib": "^1.11.1" + } + }, + "node_modules/pdf-lib/node_modules/tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" + }, "node_modules/picocolors": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", @@ -3853,6 +3969,17 @@ "node": ">=0.10.0" } }, + "node_modules/ssf": { + "version": "0.11.2", + "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz", + "integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==", + "dependencies": { + "frac": "~1.1.2" + }, + "engines": { + "node": ">=0.8" + } + }, "node_modules/streamsearch": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz", @@ -4440,12 +4567,48 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/wmf": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz", + "integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==", + "engines": { + "node": ">=0.8" + } + }, + "node_modules/word": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz", + "integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==", + "engines": { + "node": ">=0.8" + } + }, "node_modules/wrappy": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==", "dev": true }, + "node_modules/xlsx": { + "version": "0.18.5", + "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.18.5.tgz", + "integrity": "sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==", + "dependencies": { + "adler-32": "~1.3.0", + "cfb": "~1.2.1", + "codepage": "~1.15.0", + "crc-32": "~1.2.1", + "ssf": "~0.11.2", + "wmf": "~1.0.1", + "word": "~0.3.0" + }, + "bin": { + "xlsx": "bin/xlsx.njs" + }, + "engines": { + "node": ">=0.8" + } + }, "node_modules/yallist": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", diff --git a/package.json b/package.json index 3e0d5604..7900a8fa 100644 --- a/package.json +++ b/package.json @@ -9,15 +9,20 @@ "lint": "next lint" }, "dependencies": { + "csv-parser": "^3.0.0", "framer-motion": "^10.16.4", "next": "latest", "next-auth": "^4.23.2", + "papaparse": "^5.4.1", + "pdf-lib": "^1.17.1", "react": "latest", "react-dom": "latest", - "react-google-button": "^0.7.2" + "react-google-button": "^0.7.2", + "xlsx": "^0.18.5" }, "devDependencies": { "@types/node": "latest", + "@types/papaparse": "^5.3.10", "@types/react": "latest", "@types/react-dom": "latest", "autoprefixer": "latest", diff --git a/src/components/common/CSVParser.tsx b/src/components/common/CSVParser.tsx new file mode 100644 index 00000000..3201ebb7 --- /dev/null +++ b/src/components/common/CSVParser.tsx @@ -0,0 +1,51 @@ +// CSVParser.tsx +"use client" +import React, { useState } from 'react'; +import csvParser from 'csv-parser'; + +function CSVParser() { + + const [jsonData, setJsonData] = useState(null); + + const handleCSVUpload = async (event: React.ChangeEvent) => { + const file = event.target.files?.[0]; + + if (file) { + const data = await parseCSV(file); + setJsonData(data); + } + }; + + + const parseCSV = async (file: File) => { + const results: any[] = []; + const reader = new FileReader(); + reader.readAsText(file); + await new Promise(resolve => reader.onload = resolve); + const data = reader.result as string; + const parser = csvParser(); + + const records = data.split('\n'); + const headers = records[0].split(','); + + for (let i = 1; i < records.length; i++) { + const record = records[i].split(','); + const obj: any = {}; + for (let j = 0; j < headers.length; j++) { + obj[headers[j]] = record[j]; + } + results.push(obj); + } + + return results; + }; + + return ( +
+ + {jsonData && 
{JSON.stringify(jsonData, null, 2)}
} +
+ ); +} + +export default CSVParser; diff --git a/src/components/common/FileConverter.tsx b/src/components/common/FileConverter.tsx new file mode 100644 index 00000000..aa1692de --- /dev/null +++ b/src/components/common/FileConverter.tsx @@ -0,0 +1,286 @@ +// components/FileConverter.tsx +"use client" +import React, { useState } from 'react'; +import Papa from 'papaparse'; +import { utils, WorkBook, write } from 'xlsx'; +import { PDFDocument, rgb } from 'pdf-lib'; + +interface FileConverterProps { + jsonData: string; +} + + +const FileConverter: React.FC = () => { + const [csvData, setCSVData] = useState(''); + const [xlsxData, setXLSXData] = useState(null); + const jsonData = `[ + { + "A": "11", + "B": "11", + "C": "11", + "D ": "11", + "E": "11", + "F": "11", + "G": "11", + "H": "11", + "I\r": "11\r" + }, + { + "A": "11", + "B": "22", + "C": "33", + "D ": "44", + "E": "55", + "F": "66", + "G": "77", + "H": "88", + "I\r": "99\r" + }, + { + "A": "11", + "B": "22", + "C": "33", + "D ": "44", + "E": "55", + "F": "66", + "G": "77", + "H": "88", + "I\r": "99\r" + }, + { + "A": "11", + "B": "22", + "C": "33", + "D ": "44", + "E": "55", + "F": "66", + "G": "77", + "H": "88", + "I\r": "99\r" + }, + { + "A": "11", + "B": "22", + "C": "33", + "D ": "44", + "E": "55", + "F": "66", + "G": "77", + "H": "88", + "I\r": "99\r" + }, + { + "A": "11", + "B": "22", + "C": "33", + "D ": "44", + "E": "55", + "F": "66", + "G": "77", + "H": "88", + "I\r": "99\r" + }, + { + "A": "11", + "B": "22", + "C": "33", + "D ": "44", + "E": "55", + "F": "66", + "G": "77", + "H": "88", + "I\r": "99\r" + }, + { + "A": "11", + "B": "22", + "C": "33", + "D ": "44", + "E": "55", + "F": "66", + "G": "77", + "H": "88", + "I\r": "99\r" + }, + { + "A": "11", + "B": "22", + "C": "33", + "D ": "44", + "E": "55", + "F": "66", + "G": "77", + "H": "88", + "I\r": "99\r" + }, + { + "A": "11", + "B": "22", + "C": "33", + "D ": "44", + "E": "55", + "F": "66", + "G": "77", + "H": "88", + "I\r": "99\r" + }, + { + "A": "11", + "B": "22", + "C": "33", + "D ": "44", + "E": "55", + "F": "66", + "G": "77", + "H": "88", + "I\r": "99\r" + }, + { + "A": "11", + "B": "22", + "C": "33", + "D ": "44", + "E": "55", + "F": "66", + "G": "77", + "H": "88", + "I\r": "99\r" + }, + { + "A": "11", + "B": "22", + "C": "33", + "D ": "44", + "E": "55", + "F": "66", + "G": "77", + "H": "88", + "I\r": "99\r" + }, + { + "A": "11", + "B": "22", + "C": "33", + "D ": "44", + "E": "55", + "F": "66", + "G": "77", + "H": "88", + "I\r": "99\r" + }, + { + "A": "11", + "B": "22", + "C": "33", + "D ": "44", + "E": "55", + "F": "66", + "G": "77", + "H": "88", + "I\r": "99\r" + }, + { + "A": "11", + "B": "22", + "C": "33", + "D ": "44", + "E": "55", + "F": "66", + "G": "77", + "H": "88", + "I\r": "99\r" + }, + { + "A": "11", + "B": "22", + "C": "33", + "D ": "44", + "E": "55", + "F": "66", + "G": "77", + "H": "88", + "I\r": "99\r" + }, + { + "A": "11", + "B": "22", + "C": "33", + "D ": "44", + "E": "55", + "F": "66", + "G": "77", + "H": "88", + "I\r": "99\r" + }, + ]`; + + //to csv + const convertToCSV = () => { + const results = Papa.parse(jsonData, { header: true, skipEmptyLines: true }); + const csv = Papa.unparse(results.data); + setCSVData(csv); + }; + //download csv + const downloadCSV = () => { + const blob = new Blob([csvData], { type: 'text/csv' }); + const url = URL.createObjectURL(blob); + const a = document.createElement('a'); + a.href = url; + a.download = 'generated-csv.csv'; + a.click(); + }; + //to excel + const convertToXLSX = () => { + const results = Papa.parse(jsonData, { header: true, skipEmptyLines: true }); + const worksheet = utils.json_to_sheet(results.data); + const newWorkbook: WorkBook = { Sheets: { 'Sheet 1': worksheet }, SheetNames: ['Sheet 1'] }; + setXLSXData(newWorkbook); + }; + //download excel + const downloadXLSX = () => { + if (xlsxData) { + const arrayBuffer = write(xlsxData, { bookType: 'xlsx', type: 'array' }); + const blob = new Blob([arrayBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }); + + const url = URL.createObjectURL(blob); + const a = document.createElement('a'); + a.href = url; + a.download = 'generated-xlsx.xlsx'; + a.click(); + } + }; + //to pdf + const convertToPDF = async () => { + const pdfDoc = await PDFDocument.create(); + const page = pdfDoc.addPage([400, 300]); + const { width, height } = page.getSize(); + + // page.drawText(jsonData, { + // x: 50, + // y: height - 50, + // size: 12, + // color: rgb(0, 0, 0), + // }); + + const pdfBytes = await pdfDoc.save(); + const blob = new Blob([pdfBytes], { type: 'application/pdf' }); + const url = URL.createObjectURL(blob); + + const a = document.createElement('a'); + a.href = url; + a.download = 'generated-pdf.pdf'; + a.click(); + }; + + return ( +
+ + + + + +
+ ); +}; + +export default FileConverter;