PreviewFile 文件预览 ​

<template>
  <el-preview-file :file-list="fileList" />
</template>

<script lang="ts" setup>
import type { UploadUserFile } from 'element-plus'

const fileList: UploadUserFile[] = [
  {
    name: 'excel-file.xlsx',
  },
  {
    name: 'word-file.docx',
    size: 222222,
  },
  {
    name: 'image-file.png',
    size: 333333,
  },
  {
    name: 'pdf-file.pdf',
    size: 444444,
  },
  {
    name: 'ppt-file.pptx',
    size: 555555,
  },
  {
    name: 'video-file.mp4',
    size: 666666,
  },
  {
    name: 'audio-file.mp3',
    size: 777777,
  },
  {
    name: 'zip-file.zip',
    size: 888888,
  },
  {
    name: 'markdown-file.md',
    size: 999999,
  },
  {
    name: 'yarn.lock',
    size: 999999,
  },
]
</script>

<template>
  <el-preview-file :file-list="fileList">
    <template #default="{ meta }">
      <el-flex style="margin-bottom: 12px">
        <el-icon :size="meta.iconSize" :color="meta.iconColor">
          <component :is="meta.icon" />
        </el-icon>
        <el-text>{{ meta.type }}</el-text>
      </el-flex>
    </template>
  </el-preview-file>
</template>

<script lang="ts" setup>
import type { UploadUserFile } from 'element-plus'

const fileList: UploadUserFile[] = [
  {
    name: 'excel-file.xlsx',
  },
  {
    name: 'word-file.docx',
    size: 222222,
  },
  {
    name: 'image-file.png',
    size: 333333,
  },
  {
    name: 'pdf-file.pdf',
    size: 444444,
  },
  {
    name: 'ppt-file.pptx',
    size: 555555,
  },
  {
    name: 'video-file.mp4',
    size: 666666,
  },
  {
    name: 'audio-file.mp3',
    size: 777777,
  },
  {
    name: 'zip-file.zip',
    size: 888888,
  },
  {
    name: 'markdown-file.md',
    size: 999999,
  },
  {
    name: 'yarn.lock',
    size: 999999,
  },
]
</script>

<template>
  <el-button @click="handleClick">图片预览</el-button>
</template>

<script lang="ts" setup>
import { previewImage } from 'element-plus-x'
import type { ImageViewerProps } from 'element-plus'

const handleClick = () => {
  previewImage({
    urlList: [
      'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
      'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
      'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
      'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
      'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
      'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
      'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
    ],
    initialIndex: 1,
  } as Partial<ImageViewerProps>)
}
</script>

<template>
  <el-button @click="handleClick">文本下载</el-button>
</template>

<script lang="ts" setup>
import { ElMessage } from 'element-plus'
import { download } from 'element-plus-x'
import type { DownloadOptions } from 'element-plus-x'

const handleClick = () => {
  download({
    url: 'https://jsonplaceholder.typicode.com/todos/1',
    fileName: 'text.txt',
  } as DownloadOptions).catch((err) => {
    console.log(err)
    ElMessage.error('下载异常')
  })
}
</script>