extract DownloadImageButton.vue

components.d.ts

@@ -20,6 +20,8 @@ declare module 'vue' {
     CreateReadySection: typeof import('./src/components/create/CreateReadySection.vue')['default']
     CreateSection: typeof import('./src/components/create/CreateSection.vue')['default']
     CreateSummarySection: typeof import('./src/components/create/CreateSummarySection.vue')['default']
+    DownloadImageButton: typeof import('./src/components/manage/DownloadImageButton.vue')['default']
+    DownloadPng: typeof import('./src/components/manage/DownloadImageButton.vue')['default']
     Dropdown: typeof import('primevue/dropdown')['default']
     ExamplesSection: typeof import('./src/components/TheWelcome/ExamplesSection.vue')['default']
     HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']

src/components/manage/DownloadImageButton.vue

@@ -0,0 +1,54 @@
+<template>
+  <Button
+    :label
+    icon="pi pi-download"
+    class="p-button-sm p-button-outlined"
+    :disabled="!svgUrl"
+    @click="downloadPng"
+  />
+</template>
+
+<script setup lang="ts">
+import { downloadImage } from '@/utils/images/downloadImage'
+
+const props = defineProps({
+  svgUrl: {
+    type: String,
+    required: true,
+  },
+  filename: {
+    type: String,
+    required: true,
+  },
+  width: {
+    type: Number,
+    required: true,
+  },
+  label: {
+    type: String, // Название кнопки, которое будет отображаться пользователю
+    required: true,
+  },
+  type: {
+    type: String,
+    required: true,
+  },
+})
+
+async function downloadPng() {
+  if (!props.svgUrl) {
+    console.error('SVG URL не предоставлен')
+    return
+  }
+
+  try {
+    await downloadImage({
+      type: props.type,
+      filename: `${props.filename}.png`,
+      width: props.width,
+      url: props.svgUrl,
+    })
+  } catch (err) {
+    console.error('Ошибка скачивания PNG:', err)
+  }
+}
+</script>

src/views/ManageQRCodeReadyView.vue

@@ -32,11 +32,13 @@
             :download="`${sanitizedFileName}.svg`"
             as="a"
           />
-          <Button
+
+          <DownloadImageButton
+            :svgUrl="svgQueryData"
+            :filename="`${sanitizedFileName}.png`"
             label="Скачать PNG"
-            icon="pi pi-download"
+            type="image/png"
-            class="p-button-sm p-button-outlined"
+            :width="width"
-            @click="downloadPng"
           />
         </div>
 
@@ -70,7 +72,6 @@ import { optimizeSvg } from '@/utils/images/svg/optimizeSvg'
 import { replaceFillInSvg } from '@/utils/images/svg/replaceFillInSvg'
 import { getQrCodeDocument } from '@/api/qrCode'
 import { type QRCodeDocument } from '@/types/DBDocumentTypes'
-import { downloadImage } from '@/utils/images/downloadImage'
 import { addLabelToSvg } from '@/utils/images/svg/addLabelToSvg'
 import logo from '@/assets/logo.svg?raw'
 
@@ -161,21 +162,4 @@ const {
     }
   },
 })
-
-// Скачивание PNG
-async function downloadPng() {
-  try {
-    if (!svgQueryData.value) {
-      throw new Error('SVG не загружен')
-    }
-    await downloadImage({
-      type: 'image/png',
-      filename: `${sanitizedFileName.value}.png`,
-      width: width.value,
-      url: svgQueryData.value,
-    })
-  } catch (err) {
-    console.error('Ошибка скачивания PNG:', err)
-  }
-}
 </script>