dancingCycle
/
sandbox-react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(jszip-dev): download 2 files as zip archive

This commit is contained in:
dancingCycle 2024-04-24 14:20:25 +02:00
parent 73a6c22ffe
commit 63ff305d0a
6 changed files with 171 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
jszip-dev/src/components/btn-dload.jsx Normal file
View File

@ -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 (
<button onClick={handleOnClick}>
{name}
</button>
);
};
BtnDLoad.propTypes = {
url: PropTypes.string,
file: PropTypes.string,
name: PropTypes.string
};

62
jszip-dev/src/components/use-download.jsx
View File

@ -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 };

3
jszip-dev/src/config.js Normal file
View File

@ -0,0 +1,3 @@
export default {
API: 'https://test-api-data.vbn.de/data/',
};

7
jszip-dev/src/main.jsx
View File

@ -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 (
<div>
<h1>React.js</h1>
<Zipping />
<BtnDLoad
url={`${config.API}csv-fare-zones`}
file={'fare-zones.csv'}
name={'fare-zones'}
/>
<Home />
</div>
)

23
jszip-dev/src/pages/zipping.jsx
View File

@ -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 (
<div>
<button onClick={() => handleZip(images)}>Download</button>

73
jszip-dev/src/utils/download.js Normal file
View File

@ -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.');
};