diff --git a/packages/common b/packages/common
index 639bad74bd..8b3ae39dc4 160000
--- a/packages/common
+++ b/packages/common
@@ -1 +1 @@
-Subproject commit 639bad74bddb81b0f3bb084bea790359684bfb84
+Subproject commit 8b3ae39dc4c676c52ac6e5f959b792e790bb55fe
diff --git a/packages/components/image-viewer/ImageViewer.tsx b/packages/components/image-viewer/ImageViewer.tsx
index c8abf53ffd..6fff05ed48 100644
--- a/packages/components/image-viewer/ImageViewer.tsx
+++ b/packages/components/image-viewer/ImageViewer.tsx
@@ -1,19 +1,21 @@
 import React, { useMemo, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { isFunction, isNumber } from 'lodash-es';
+
+import { formatImages } from '@tdesign/common-js/image-viewer/utils';
+import { canUseDocument } from '../_util/dom';
+import useAttach from '../hooks/useAttach';
+import useControlled from '../hooks/useControlled';
+import useDefaultProps from '../hooks/useDefaultProps';
 import { ImageModal } from './ImageViewerModal';
 import { imageViewerDefaultProps } from './defaultProps';
-import type { TdImageViewerProps } from './type';
-import type { ImageModalProps } from './ImageViewerModal';
-import type { StyledProps, TNode } from '../common';
 import useImageScale from './hooks/useImageScale';
-import useList from './hooks/useList';
-import useViewerScale from './hooks/useViewerScale';
-import useControlled from '../hooks/useControlled';
-import useDefaultProps from '../hooks/useDefaultProps';
-import { canUseDocument } from '../_util/dom';
-import useAttach from '../hooks/useAttach';
 import useIndex from './hooks/useIndex';
+import useViewerScale from './hooks/useViewerScale';
+
+import type { StyledProps, TNode } from '../common';
+import type { ImageModalProps } from './ImageViewerModal';
+import type { TdImageViewerProps } from './type';
 
 export interface ImageViewerProps extends TdImageViewerProps, StyledProps {}
 
@@ -27,7 +29,8 @@ const ImageViewer: React.FC<ImageViewerProps> = (originalProps) => {
   });
 
   const [visibled, setVisibled] = useState(false);
-  const list = useList(images);
+  const imageList = useMemo(() => formatImages(images), [images]);
+
   const { index, setIndex } = useIndex(props, images);
   const imageScale = useImageScale(imageScaleD);
   const viewerScale = useViewerScale(viewerScaleD);
@@ -70,7 +73,7 @@ const ImageViewer: React.FC<ImageViewerProps> = (originalProps) => {
           <ImageModal
             title={title}
             visible={visible}
-            images={list}
+            images={imageList}
             isMini={isMini}
             imageScale={imageScale}
             viewerScale={viewerScale}
diff --git a/packages/components/image-viewer/ImageViewerModal.tsx b/packages/components/image-viewer/ImageViewerModal.tsx
index 8e5424dff4..84f5ee2544 100644
--- a/packages/components/image-viewer/ImageViewerModal.tsx
+++ b/packages/components/image-viewer/ImageViewerModal.tsx
@@ -1,4 +1,4 @@
-import React, { KeyboardEvent, MouseEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { isArray, isFunction } from 'lodash-es';
 import {
@@ -7,15 +7,15 @@ import {
   MirrorIcon as TdMirrorIcon,
   RotationIcon as TdRotationIcon,
 } from 'tdesign-icons-react';
+
+import { downloadImage } from '@tdesign/common-js/image-viewer/utils';
 import { largeNumberToFixed } from '@tdesign/common-js/input-number/large-number';
-import type { TNode } from '../common';
 import useConfig from '../hooks/useConfig';
 import useGlobalIcon from '../hooks/useGlobalIcon';
 import useImagePreviewUrl from '../hooks/useImagePreviewUrl';
 import Image from '../image';
 import { useLocaleReceiver } from '../locale/LocalReceiver';
 import { TooltipLite } from '../tooltip';
-import type { ImageViewerProps } from './ImageViewer';
 import { ImageModalMini } from './ImageViewerMini';
 import useIconMap from './hooks/useIconMap';
 import useIndex from './hooks/useIndex';
@@ -23,8 +23,10 @@ import useMirror from './hooks/useMirror';
 import usePosition from './hooks/usePosition';
 import useRotate from './hooks/useRotate';
 import useScale from './hooks/useScale';
+
+import type { TNode } from '../common';
+import type { ImageViewerProps } from './ImageViewer';
 import type { ImageInfo, ImageScale, ImageViewerScale, TdImageViewerProps } from './type';
-import { downloadFile } from './utils';
 
 const ImageError = ({ errorText }: { errorText: string }) => {
   const { classPrefix } = useConfig();
@@ -196,7 +198,7 @@ interface ImageModalIconProps {
   className?: string;
   disabled?: boolean;
   isRange?: boolean;
-  onClick?: (e: MouseEvent<HTMLElement>) => void;
+  onClick?: (e: React.MouseEvent<HTMLElement>) => void;
 }
 
 const ImageModalIcon = ({ onClick, className, disabled, isRange, name, label, size = '16px' }: ImageModalIconProps) => {
@@ -304,7 +306,7 @@ export const ImageViewerUtils: React.FC<ImageViewerUtilsProps> = ({
                 onDownload(currentImage.mainImage);
                 return;
               }
-              downloadFile(currentImage.mainImage);
+              downloadImage(currentImage.mainImage);
             }}
           />
         )}
@@ -396,7 +398,10 @@ export interface ImageModalProps {
   closeBtn: boolean | TNode;
   closeOnEscKeydown?: boolean;
   imageReferrerpolicy?: ImageViewerProps['imageReferrerpolicy'];
-  onClose: (context: { trigger: 'close-btn' | 'overlay' | 'esc'; e: MouseEvent<HTMLElement> | KeyboardEvent }) => void;
+  onClose: (context: {
+    trigger: 'close-btn' | 'overlay' | 'esc';
+    e: React.MouseEvent<HTMLElement> | React.KeyboardEvent;
+  }) => void;
   onOpen: () => void;
   onDownload?: TdImageViewerProps['onDownload'];
   onIndexChange?: (index: number, context: { trigger: 'prev' | 'next' | 'current' }) => void;
@@ -514,7 +519,7 @@ export const ImageModal: React.FC<ImageModalProps> = (props) => {
         name="close"
         size="24px"
         className={`${classPrefix}-image-viewer__modal-close-bt `}
-        onClick={(e: MouseEvent<HTMLElement>) => onClose && onClose({ trigger: 'close-btn', e })}
+        onClick={(e: React.MouseEvent<HTMLElement>) => onClose && onClose({ trigger: 'close-btn', e })}
       />
     );
   } else if (isFunction(closeBtn)) closeNode = closeBtn({ onClose, onOpen });
@@ -529,7 +534,7 @@ export const ImageModal: React.FC<ImageModalProps> = (props) => {
       {!!showOverlay && (
         <div
           className={`${classPrefix}-image-viewer__modal-mask`}
-          onClick={(e: MouseEvent<HTMLElement>) => closeOnOverlay && onClose?.({ trigger: 'overlay', e })}
+          onClick={(e: React.MouseEvent<HTMLElement>) => closeOnOverlay && onClose?.({ trigger: 'overlay', e })}
         />
       )}
       {images.length > 1 && (
diff --git a/packages/components/image-viewer/hooks/useList.ts b/packages/components/image-viewer/hooks/useList.ts
deleted file mode 100644
index f0bf31877f..0000000000
--- a/packages/components/image-viewer/hooks/useList.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { useMemo } from 'react';
-import { isString, isArray } from 'lodash-es';
-import type { ImageInfo, TdImageViewerProps } from '../type';
-
-const isImageInfo = (image: string | File | ImageInfo): image is ImageInfo =>
-  !!image && !isString(image) && !(image instanceof File);
-
-const checkImages = (images: TdImageViewerProps['images']) => {
-  if (!isArray(images)) return [];
-  return images.map((item) => {
-    if (isImageInfo(item)) {
-      return {
-        download: true,
-        thumbnail: item.mainImage,
-        ...item,
-      };
-    }
-    return {
-      mainImage: item,
-      thumbnail: item,
-      download: true,
-    };
-  });
-};
-
-const useList = (images: TdImageViewerProps['images']) => useMemo(() => checkImages(images), [images]);
-
-export default useList;
diff --git a/packages/components/image-viewer/utils.ts b/packages/components/image-viewer/utils.ts
deleted file mode 100644
index bc1db2eb0a..0000000000
--- a/packages/components/image-viewer/utils.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-export const downloadFile = function (imgSrc) {
-  const image = new Image();
-  const name = imgSrc?.split?.('/').pop() || Math.random().toString(32).slice(2);
-
-  image.setAttribute('crossOrigin', 'anonymous');
-
-  image.onload = () => {
-    const canvas = document.createElement('canvas');
-    canvas.width = image.width;
-    canvas.height = image.height;
-
-    const context = canvas.getContext('2d');
-    context.drawImage(image, 0, 0, image.width, image.height);
-    canvas.toBlob((blob) => {
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.download = name;
-      a.href = url;
-      a.click();
-      a.remove();
-      URL.revokeObjectURL(url);
-    });
-  };
-  image.src = imgSrc;
-};