图片的放大缩小选择全屏下载和复制到粘贴板

 参考文档Image 图片 | Element Plus 自定义工具栏2.9.4

<el-image-viewer show-progress v-if="viewerVisible" :url-list="currentImageUrl" @close="viewerVisible = false"
        fit="cover">
        <template #toolbar="{ actions, prev, next, reset, activeIndex }">
            <!-- 自定义对比 -->
            <el-icon v-if="dataStr.type == 1" @click="contrast(activeIndex)">
                <CopyDocument />
            </el-icon>
            <el-icon @click="actions('zoomOut')">
                <ZoomOut />
            </el-icon>
            <el-icon @click="actions('zoomIn')">
                <ZoomIn />
            </el-icon>
            <el-icon @click="
                actions('clockwise', { rotateDeg: 90 })
                ">
                <RefreshRight />
            </el-icon>
            <el-icon @click="actions('anticlockwise')">
                <RefreshLeft />
            </el-icon>
            <!-- 自定义全屏按钮 -->
            <el-icon @click="toggleFullScreen">
                <FullScreen />
            </el-icon>
            <!-- 自定义下载按钮 -->
            <el-icon @click="download(activeIndex)">
                <Download />
            </el-icon>
        </template>
    </el-image-viewer>

// 自定义全屏方法
const toggleFullScreen = () => {
    const viewerWrapper = document.querySelector('.el-image-viewer__wrapper');
    if (viewerWrapper) {
        if (!document.fullscreenElement) {
            viewerWrapper.requestFullscreen().catch(err => {
                console.error(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
            });
        } else {
            document.exitFullscreen();
        }
    }
};

// 复制到剪贴板
const copyToClipboard = (text: string) => {
    const tempInput = document.createElement('input');
    tempInput.value = text;
    document.body.appendChild(tempInput);
    tempInput.select();
    document.execCommand('copy');
    document.body.removeChild(tempInput);
    ElMessage.success('文本已复制到剪贴板');
};

// 一次下载多张图片
import JSZip from 'jszip';
const downloadImage = async (urls: any) => {
    try {
        const zip = new JSZip();
        const downloadSingleImage = async (url: string) => {
            const response = await fetch(url);
            const blob = await response.blob();
            return { blob, fileName: url.split('/').pop() || `image_${Date.now()}.png` };
        };

        if (urls.length > 1) {
            await Promise.all(urls.map(async (url: any) => {
                const { blob, fileName } = await downloadSingleImage(url.pictureUrl);
                zip.file(fileName, blob);
            }));
            const zipContent = await zip.generateAsync({ type: 'blob' });
            const zipUrl = window.URL.createObjectURL(zipContent);
            const link = document.createElement('a');
            link.href = zipUrl;
            link.download = `images_${Date.now()}.zip`;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            window.URL.revokeObjectURL(zipUrl);
        } else if (urls.length === 1) {
            const { blob, fileName } = await downloadSingleImage(urls[0].pictureUrl);
            const url = window.URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.download = fileName;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            window.URL.revokeObjectURL(url);
        }
        ElMessage.success('下载成功');
    } catch (error) {
        console.error('下载失败:', error);
        ElMessage.error('下载失败，请重试');
    }
};