From 63ff305d0aac94a048b032dba62721d7382cec15 Mon Sep 17 00:00:00 2001 From: "Begerad, Stefan" Date: Wed, 24 Apr 2024 14:20:25 +0200 Subject: [PATCH] feat(jszip-dev): download 2 files as zip archive --- jszip-dev/src/components/btn-dload.jsx | 24 ++++++++ jszip-dev/src/components/use-download.jsx | 62 ++++++++++++------- jszip-dev/src/config.js | 3 + jszip-dev/src/main.jsx | 7 +++ jszip-dev/src/pages/zipping.jsx | 23 ++++++- jszip-dev/src/utils/download.js | 73 +++++++++++++++++++++++ 6 files changed, 171 insertions(+), 21 deletions(-) create mode 100644 jszip-dev/src/components/btn-dload.jsx create mode 100644 jszip-dev/src/config.js create mode 100644 jszip-dev/src/utils/download.js diff --git a/jszip-dev/src/components/btn-dload.jsx b/jszip-dev/src/components/btn-dload.jsx new file mode 100644 index 0000000..81a36d2 --- /dev/null +++ b/jszip-dev/src/components/btn-dload.jsx @@ -0,0 +1,24 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import {createDloadLinkByUrl} from '../utils/download'; + +/*destructure props object*/ +export default function BtnDLoad({url,file,name}) { + + const handleOnClick = () => { + createDloadLinkByUrl(url,file); + }; + + return ( + + ); +}; + +BtnDLoad.propTypes = { + url: PropTypes.string, + file: PropTypes.string, + name: PropTypes.string +}; diff --git a/jszip-dev/src/components/use-download.jsx b/jszip-dev/src/components/use-download.jsx index f593a93..1525267 100644 --- a/jszip-dev/src/components/use-download.jsx +++ b/jszip-dev/src/components/use-download.jsx @@ -1,30 +1,52 @@ import JSZip from "jszip"; +import {getBlob, getBlobAsync} from '../utils/download'; +import config from '../config'; + const useDownload = () => { - async function handleZip(images) { - const zip = new JSZip(); + async function handleZip(images) { + const zip = new JSZip(); - // Add Images to the zip file - for (let i = 0; i < images.length; i++) { - const response = await fetch(images[i]); - const blob = await response.blob(); - zip.file(images[i].split("/").pop(), blob); - } + //TODO Cleanup! + /* + let url = `${config.API}csv-fare-zones`; + let file = 'fare-zones.csv'; + const blobVersions = await getBlobAsync(url,file); + //file(name, data) + zip.file(file, blobVersions); - // Generate the zip file - const zipData = await zip.generateAsync({ - type: "blob", - streamFiles: true, - }); + url = `${config.API}csv-price-levels`; + file = 'price-levels.csv'; + const blobPriceLevels = await getBlobAsync(url,file); + //file(name, data) + zip.file(file, blobPriceLevels); + */ - // Create a download link for the zip file - const link = document.createElement("a"); - link.href = window.URL.createObjectURL(zipData); - link.download = "name-zip-folder.zip"; - link.click(); - } + //TODO Cleanup! + // Add Images to the zip file + for (let i = 0; i < images.length; i++) { + const url = images[i].url; + console.log('handleZip() url: ', url); + const file = images[i].file; + console.log('handleZip() file: ', file); + const response = await fetch(url); + const blob = await response.blob(); + zip.file(file, blob); + } + // Generate the zip file + const zipData = await zip.generateAsync({ + type: "blob", + streamFiles: true, + }); - return { handleZip }; + // Create a download link for the zip file + const link = document.createElement("a"); + link.href = window.URL.createObjectURL(zipData); + link.download = "name-zip-folder.zip"; + link.click(); + }; + + return { handleZip }; }; export { useDownload }; diff --git a/jszip-dev/src/config.js b/jszip-dev/src/config.js new file mode 100644 index 0000000..b6180c1 --- /dev/null +++ b/jszip-dev/src/config.js @@ -0,0 +1,3 @@ +export default { + API: 'https://test-api-data.vbn.de/data/', +}; diff --git a/jszip-dev/src/main.jsx b/jszip-dev/src/main.jsx index daa8c61..5eb1c62 100644 --- a/jszip-dev/src/main.jsx +++ b/jszip-dev/src/main.jsx @@ -2,12 +2,19 @@ import React from 'react'; import Home from './pages/home'; import Zipping from './pages/zipping'; +import BtnDLoad from './components/btn-dload'; +import config from './config'; export default function App() { return (

React.js

+
) diff --git a/jszip-dev/src/pages/zipping.jsx b/jszip-dev/src/pages/zipping.jsx index 13dbd42..9c2d0b8 100644 --- a/jszip-dev/src/pages/zipping.jsx +++ b/jszip-dev/src/pages/zipping.jsx @@ -6,6 +6,27 @@ export default function Zipping() { const { handleZip } = useDownload(); + const images = [ + { + 'url':'https://test-api-data.vbn.de/data/csv-fare-zones', + 'file':'fare-zones.csv', + }, + { + 'url':'https://test-api-data.vbn.de/data/csv-price-levels', + 'file':'price-levels.csv', + } + ]; + + //TODO Cleanup! + /* + let url = 'https://test-api-data.vbn.de/data/csv-fare-zones'; + let file = 'fare-zones.csv'; + url = 'https://test-api-data.vbn.de/data/csv-price-levels'; + file = 'price-levels.csv'; + */ + + //TODO Cleanup! + /* const images = [ "image1.jpg", "image2.jpg", @@ -13,7 +34,7 @@ export default function Zipping() { "image4.jpg", "image5.jpg", ] - + */ return (
diff --git a/jszip-dev/src/utils/download.js b/jszip-dev/src/utils/download.js new file mode 100644 index 0000000..49556e7 --- /dev/null +++ b/jszip-dev/src/utils/download.js @@ -0,0 +1,73 @@ +export function getBlob(url,fileName) { + console.log('getBlob() url: ', url); + console.log('getBlob() fileName: ', fileName); + fetch(url, { + method: 'GET', + headers: { + 'Content-Type': "text/csv", + }, + }) + .then((response) => response.blob()) + .then((blob) => { + return blob; + //TODO Cleanup! createDloadLink(new Blob([blob], { type: "text/csv" }),fileName); + }); +}; + +export async function getBlobAsync(url,fileName) { + console.log('getBlob() url: ', url); + console.log('getBlob() fileName: ', fileName); + const rsp = await fetch(url, { + method: 'GET', + headers: { + 'Content-Type': "text/csv", + }, + }); + console.log('getBlob() done'); + return rsp; + //TODO Cleanup! createDloadLink(new Blob([blob], { type: "text/csv" }),fileName); +}; + +/* + * download file + * @param url address used to fetch source + * @param fileName name of file to be downloaded as string + */ +export function createDloadLinkByUrl(url,fileName) { + ////console.log('download:createDloadLInkByUrl start...'); + ////console.log('download:createDloadLInkByUrl url: '+url); + ////console.log('download:createDloadLInkByUrl fileName: '+fileName); + fetch(url, { + method: 'GET', + headers: { + 'Content-Type': "text/csv", + }, + }) + .then((response) => response.blob()) + .then((blob) => { + createDloadLink(new Blob([blob], { type: "text/csv" }),fileName); + }); + ////console.log('download:createDloadLInkByUrl done.'); +}; +/* + * download file + * @param blob to be downloaded + * @param fileName name of file to be downloaded as string + */ +export function createDloadLink(blob,fileName) { + ////console.log('download:createDloadLink() start...'); + ////console.log('download:createDloadLink() fileName: '+fileName); + // Create blob link to download + const url = window.URL.createObjectURL(blob); + const link = document.createElement('a'); + link.href = url; + link.target = "_blank"; + link.download = fileName; + // Append to html link element page + document.body.appendChild(link); + // Start download + link.click(); + // Clean up and remove the link + link.parentNode.removeChild(link); + ////console.log('download:createDloadLink() done.'); +};