From 45b107a013d9c3cd34bf8d74503bb39a4a877028 Mon Sep 17 00:00:00 2001 From: ShareVB Date: Sun, 14 Jul 2024 22:42:58 +0200 Subject: [PATCH] fix: update downloadbase64 --- pnpm-lock.yaml | 25 ++++++--------- src/composable/downloadBase64.ts | 52 ++++++-------------------------- 2 files changed, 19 insertions(+), 58 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ee5f41ef..e93c2cbf 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -3367,7 +3367,7 @@ packages: dependencies: '@unhead/dom': 0.5.1 '@unhead/schema': 0.5.1 - '@vueuse/shared': 10.9.0(vue@3.3.4) + '@vueuse/shared': 10.11.0(vue@3.3.4) unhead: 0.5.1 vue: 3.3.4 transitivePeerDependencies: @@ -4000,20 +4000,19 @@ packages: - vue dev: false - /@vueuse/shared@10.3.0(vue@3.3.4): - resolution: {integrity: sha512-kGqCTEuFPMK4+fNWy6dUOiYmxGcUbtznMwBZLC1PubidF4VZY05B+Oht7Jh7/6x4VOWGpvu3R37WHi81cKpiqg==} + /@vueuse/shared@10.11.0(vue@3.3.4): + resolution: {integrity: sha512-fyNoIXEq3PfX1L3NkNhtVQUSRtqYwJtJg+Bp9rIzculIZWHTkKSysujrOk2J+NrRulLTQH9+3gGSfYLWSEWU1A==} dependencies: - vue-demi: 0.14.5(vue@3.3.4) + vue-demi: 0.14.8(vue@3.3.4) transitivePeerDependencies: - '@vue/composition-api' - vue dev: false - /@vueuse/shared@10.9.0(vue@3.3.4): - resolution: {integrity: sha512-Uud2IWncmAfJvRaFYzv5OHDli+FbOzxiVEQdLCKQKLyhz94PIyFC3CHcH7EDMwIn8NPtD06+PNbC/PiO0LGLtw==} + /@vueuse/shared@10.3.0(vue@3.3.4): + resolution: {integrity: sha512-kGqCTEuFPMK4+fNWy6dUOiYmxGcUbtznMwBZLC1PubidF4VZY05B+Oht7Jh7/6x4VOWGpvu3R37WHi81cKpiqg==} dependencies: - vue-demi: 0.14.7(vue@3.3.4) - vue-demi: 0.14.7(vue@3.3.4) + vue-demi: 0.14.5(vue@3.3.4) transitivePeerDependencies: - '@vue/composition-api' - vue @@ -6493,10 +6492,6 @@ packages: resolution: {integrity: sha512-7rCnleh0z2CkXhH67J8K1Ytz0b2Y+yxTPL+/KOJoa20hfnVQ/3/T6W/KflYI4bRHRagNeXeU2bkNGI3v1oS/lw==} dev: false - /js-base64@3.7.7: - resolution: {integrity: sha512-7rCnleh0z2CkXhH67J8K1Ytz0b2Y+yxTPL+/KOJoa20hfnVQ/3/T6W/KflYI4bRHRagNeXeU2bkNGI3v1oS/lw==} - dev: false - /js-beautify@1.14.6: resolution: {integrity: sha512-GfofQY5zDp+cuHc+gsEXKPpNw2KbPddreEo35O6jT6i0RVK6LhsoYBhq5TvK4/n74wnA0QbK8gGd+jUZwTMKJw==} engines: {node: '>=10'} @@ -9182,10 +9177,8 @@ packages: vue: 3.3.4 dev: false - /vue-demi@0.14.7(vue@3.3.4): - resolution: {integrity: sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==} - /vue-demi@0.14.7(vue@3.3.4): - resolution: {integrity: sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==} + /vue-demi@0.14.8(vue@3.3.4): + resolution: {integrity: sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==} engines: {node: '>=12'} hasBin: true requiresBuild: true diff --git a/src/composable/downloadBase64.ts b/src/composable/downloadBase64.ts index ff2e86fc..773541e2 100644 --- a/src/composable/downloadBase64.ts +++ b/src/composable/downloadBase64.ts @@ -1,12 +1,12 @@ import { extension as getExtensionFromMimeType, extension as getMimeTypeFromExtension } from 'mime-types'; -import type { MaybeRef } from 'vue'; +import type { MaybeRef, Ref } from 'vue'; import _ from 'lodash'; import { get } from '@vueuse/core'; export { getMimeTypeFromBase64, getMimeTypeFromExtension, getExtensionFromMimeType, - useDownloadFileFromBase64, + useDownloadFileFromBase64, useDownloadFileFromBase64Refs, previewImageFromBase64, }; @@ -43,30 +43,17 @@ function getFileExtensionFromMimeType({ }) { if (mimeType) { return getExtensionFromMimeType(mimeType) ?? defaultExtension; - return getExtensionFromMimeType(mimeType) ?? defaultExtension; } return defaultExtension; } -function downloadFromBase64({ sourceValue, filename, extension, fileMimeType }: -{ sourceValue: string; filename?: string; extension?: string; fileMimeType?: string }) { - if (sourceValue === '') { - throw new Error('Base64 string is empty'); - } function downloadFromBase64({ sourceValue, filename, extension, fileMimeType }: { sourceValue: string; filename?: string; extension?: string; fileMimeType?: string }) { if (sourceValue === '') { throw new Error('Base64 string is empty'); } - const defaultExtension = extension ?? 'txt'; - const { mimeType } = getMimeTypeFromBase64({ base64String: sourceValue }); - let base64String = sourceValue; - if (!mimeType) { - const targetMimeType = fileMimeType ?? getMimeTypeFromExtension(defaultExtension); - base64String = `data:${targetMimeType};base64,${sourceValue}`; - } const defaultExtension = extension ?? 'txt'; const { mimeType } = getMimeTypeFromBase64({ base64String: sourceValue }); let base64String = sourceValue; @@ -75,12 +62,6 @@ function downloadFromBase64({ sourceValue, filename, extension, fileMimeType }: base64String = `data:${targetMimeType};base64,${sourceValue}`; } - const cleanExtension = extension ?? getFileExtensionFromMimeType( - { mimeType, defaultExtension }); - let cleanFileName = filename ?? `file.${cleanExtension}`; - if (extension && !cleanFileName.endsWith(`.${extension}`)) { - cleanFileName = `${cleanFileName}.${cleanExtension}`; - } const cleanExtension = extension ?? getFileExtensionFromMimeType( { mimeType, defaultExtension }); let cleanFileName = filename ?? `file.${cleanExtension}`; @@ -127,25 +108,12 @@ function previewImageFromBase64(base64String: string): HTMLImageElement { return img; } -function previewImageFromBase64(base64String: string): HTMLImageElement { - if (base64String === '') { - throw new Error('Base64 string is empty'); - } - - const img = document.createElement('img'); - img.src = base64String; - - const container = document.createElement('div'); - container.appendChild(img); - - const previewContainer = document.getElementById('previewContainer'); - if (previewContainer) { - previewContainer.innerHTML = ''; - previewContainer.appendChild(container); - } - else { - throw new Error('Preview container element not found'); - } - - return img; +function useDownloadFileFromBase64Refs( + { source, filename, extension }: + { source: Ref; filename?: Ref; extension?: Ref }) { + return { + download() { + downloadFromBase64({ sourceValue: source.value, filename: filename?.value, extension: extension?.value }); + }, + }; }