Download-Button ergänzt

resources/js/Pages/Home.vue

@@ -25,6 +25,7 @@
       :image="selectedImage"
       @close="currentOverlayComponent = null; selectedImage = null"
       @print="printImage"
+      @download="downloadImage"
       @changeStyle="showStyleSelector"
       @styleSelected="applyStyle"
     />
@@ -144,6 +145,42 @@ const printImage = () => {
   currentOverlayComponent.value = 'printQuantityModal';
 };
 
+const downloadImage = (image) => {
+  console.log('Starting download for image:', image);
+  
+  // Show loading message
+  showError('Download wird vorbereitet...');
+  
+  // Use axios to make a POST request to trigger backend download
+  axios.post('/api/download-image', {
+    image_path: image.path,
+  }, {
+    responseType: 'blob' // Important for file downloads
+  })
+  .then(response => {
+    // Create blob URL from response
+    const blob = new Blob([response.data]);
+    const url = window.URL.createObjectURL(blob);
+    
+    // Create temporary link and trigger download
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = image.name || 'image';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    
+    // Clean up blob URL
+    window.URL.revokeObjectURL(url);
+    
+    showError('Download gestartet!');
+  })
+  .catch(error => {
+    console.error('Error downloading image:', error);
+    showError(error.response?.data?.error || 'Download fehlgeschlagen.');
+  });
+};
+
 const handlePrintConfirmed = (quantity) => {
   console.log(`Printing ${quantity} copies of image:`, selectedImage.value);
   currentOverlayComponent.value = null; // Close the modal