feat(image-viewer): Add download name for better recognition

src/descriptions/descriptions.en-US.md

@@ -9,7 +9,7 @@ name | type | default | description | required
 bordered | Boolean | false | set description list with grey border | N
 colon | Boolean | - | set label with ":" on the right | N
 column | Number | 2 | count of DescriptionItem in one row | N
-contentStyle | Object | - | style of description cotent。Typescript：`Styles`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+contentStyle | Object | - | style of description content。Typescript：`Styles`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 itemLayout | String | horizontal | layout direction of description item。options: horizontal/vertical | N
 items | Array | - | list of descriptions items。Typescript：`Array<TdDescriptionItemProps>` | N
 labelStyle | Object | - | style of description item。Typescript：`Styles`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N

src/image-viewer/_example-ts/block.vue

@@ -40,6 +40,7 @@ const images: ImageInfo[] = [
   {
     mainImage: 'https://tdesign.gtimg.com/demo/demo-image-2.png',
     thumbnail: 'https://tdesign.gtimg.com/demo/demo-image-1.png',
+    name: '测试下载图片名称',
   },
 ];
 </script>

src/image-viewer/_example/block.vue

@@ -41,6 +41,7 @@ const images = [
   {
     mainImage: 'https://tdesign.gtimg.com/demo/demo-image-2.png',
     thumbnail: 'https://tdesign.gtimg.com/demo/demo-image-1.png',
+    name: '测试下载图片名称',
   },
 ];
 </script>

src/image-viewer/base/ImageViewerUtils.tsx

@@ -27,6 +27,7 @@ export default defineComponent({
   setup(props) {
     const classPrefix = usePrefixClass();
     const imageUrl = computed(() => props.currentImage.mainImage);
+    const imageName = computed(() => props.currentImage?.name);
 
     const { previewUrl } = useImagePreviewUrl(imageUrl);
     const { globalConfig } = useConfig('imageViewer');
@@ -78,7 +79,7 @@ export default defineComponent({
             <TImageViewerIcon
               icon={() => <DownloadIcon size="medium" />}
               onClick={() => {
-                downloadFile(previewUrl.value);
+                downloadFile(previewUrl.value, imageName.value);
               }}
             />
           )}

src/image-viewer/image-viewer.en-US.md

@@ -12,7 +12,7 @@ closeOnEscKeydown | Boolean | true | trigger image viewer close event on `ESC` k
 closeOnOverlay | Boolean | - | \- | N
 draggable | Boolean | undefined | \- | N
 imageScale | Object | - | Typescript：`ImageScale` `interface ImageScale { max: number; min: number; step: number; defaultScale?: number; }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/image-viewer/type.ts) | N
-images | Array | [] | Typescript：`Array<string \| File \| ImageInfo>` `interface ImageInfo { mainImage: string \| File; thumbnail?: string \| File; download?: boolean; isSvg?: boolean }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/image-viewer/type.ts) | N
+images | Array | [] | Typescript：`Array<string \| File \| ImageInfo>` `interface ImageInfo { mainImage: string \| File; thumbnail?: string \| File; download?: boolean; isSvg?: boolean; name?: string }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/image-viewer/type.ts) | N
 index | Number | 0 | `v-model:index` is supported | N
 defaultIndex | Number | 0 | uncontrolled property | N
 mode | String | modal | options: modal/modeless | N

src/image-viewer/image-viewer.md

@@ -12,7 +12,7 @@ closeOnEscKeydown | Boolean | true | 按下 ESC 时是否触发图片预览器
 closeOnOverlay | Boolean | - | 是否在点击遮罩层时，触发预览关闭 | N
 draggable | Boolean | undefined | 是否允许拖拽调整位置。`mode=modal` 时，默认不允许拖拽；`mode=modeless` 时，默认允许拖拽 | N
 imageScale | Object | - |  图片缩放相关配置。`imageScale.max` 缩放的最大比例；`imageScale.min` 缩放的最小比例；`imageScale.step` 缩放的步长速度; `imageScale.defaultScale` 默认的缩放比例。TS 类型：`ImageScale` `interface ImageScale { max: number; min: number; step: number; defaultScale?: number; }`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/image-viewer/type.ts) | N
-images | Array | [] | 图片数组。`mainImage` 表示主图，必传；`thumbnail` 表示缩略图，如果不存在，则使用主图显示；`download` 是否允许下载图片，默认允许下载。示例: `['img_url_1', 'img_url_2']`，`[{ thumbnail: 'small_image_url', mainImage: 'big_image_url', download: false }]`。TS 类型：`Array<string \| File \| ImageInfo>` `interface ImageInfo { mainImage: string \| File; thumbnail?: string \| File; download?: boolean; isSvg?: boolean }`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/image-viewer/type.ts) | N
+images | Array | [] | 图片数组。`mainImage` 表示主图，必传；`thumbnail` 表示缩略图，如果不存在，则使用主图显示；`download` 是否允许下载图片，默认允许下载。示例: `['img_url_1', 'img_url_2']`，`[{ thumbnail: 'small_image_url', mainImage: 'big_image_url', download: false }]`。TS 类型：`Array<string \| File \| ImageInfo>` `interface ImageInfo { mainImage: string \| File; thumbnail?: string \| File; download?: boolean; isSvg?: boolean; name?: string }`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/image-viewer/type.ts) | N
 index | Number | 0 | 当前预览图片所在的下标。支持语法糖 `v-model:index` | N
 defaultIndex | Number | 0 | 当前预览图片所在的下标。非受控属性 | N
 mode | String | modal | 模态预览（modal）和非模态预览（modeless)。可选项：modal/modeless | N

src/image-viewer/type.ts

@@ -116,6 +116,11 @@ export interface ImageInfo {
   thumbnail?: string | File;
   download?: boolean;
   isSvg?: boolean;
+  /**
+   * 预览下载时的文件名
+   * @default 从URL中获取文件名
+   */
+  name?: string;
 }
 
 export interface ImageViewerScale {

src/image-viewer/utils.ts

@@ -3,12 +3,13 @@ import isArray from 'lodash/isArray';
 
 import { TdImageViewerProps, ImageInfo } from './type';
 
-export const downloadFile = function (imgSrc: string) {
+export const downloadFile = function (imgSrc: string, imgName?: string) {
   const image = new Image();
   // fix #2935
   // 当链接携带了参数时，需处理掉参数再取图片名称，否则扩展名会与参数链接导致原扩展名失效
   // 例如：img.png?sign=xxx 不处理参数会被转成 img.png_sign=xxx
-  const name = imgSrc?.split?.('?')?.[0]?.split?.('#')?.[0]?.split?.('/').pop() || Math.random().toString(32).slice(2);
+  const name =
+    imgName || imgSrc?.split?.('?')?.[0]?.split?.('#')?.[0]?.split?.('/').pop() || Math.random().toString(32).slice(2);
 
   image.setAttribute('crossOrigin', 'anonymous');