vue3下载图片,pdf,excle,word通用函数

接口返回的是数据格式tmplFileUrl:"http://--------/images/cf0a72b3b6ba4c9cb79d3b063bbbed4b.docx"

javascript 复制代码
// 下载图片,pdf,word,exlce文件
const handleDownload = (record: RecordType) => {
  const fileUrl = record.tmplFileUrl
  if (fileUrl) {
    const downloadUrl = getPreviewUrlHandler(fileUrl) || ''
    if (downloadUrl) {
      // 从 tmplFileUrl 中提取文件名和类型
      const fileName = fileUrl.split('/').pop() || record.tmplName || 'download'
      const fileExtension = fileName.split('.').pop()?.toLowerCase() || ''

      // 根据文件扩展名判断文件类型
      const isImageFile = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].includes(fileExtension)
      const isPdfFile = fileExtension === 'pdf'
      const isWordFile = ['doc', 'docx'].includes(fileExtension)
      const isExcelFile = ['xls', 'xlsx'].includes(fileExtension)
      if (isImageFile) {
        // 图片文件:使用当前下载逻辑,直接下载到本地
        const link = document.createElement('a')
        link.href = downloadUrl
        link.download = fileName
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      } else {
        // 附件文件:强制下载,不打开预览
        const link = document.createElement('a')
        link.href = downloadUrl
        link.download = fileName
        // 强制下载,防止浏览器打开预览
        link.style.display = 'none'

        if (isPdfFile) {
          // 对于 PDF 文件,添加额外的强制下载处理
          fetch(downloadUrl)
            .then((response) => response.blob())
            .then((blob) => {
              const url = window.URL.createObjectURL(blob)
              link.href = url
              link.download = fileName
              document.body.appendChild(link)
              link.click()
              document.body.removeChild(link)
              // 清理 blob URL
              window.URL.revokeObjectURL(url)
            })
            .catch((error) => {
              console.error('PDF 下载失败:', error)
              // 如果 fetch 失败,回退到普通下载方式
              document.body.appendChild(link)
              link.click()
              document.body.removeChild(link)
            })
        } else if (isWordFile || isExcelFile) {
          // 对于 Word 和 Excel 文件,使用 fetch 方式下载以提升性能
          fetch(downloadUrl)
            .then((response) => {
              if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`)
              }
              return response.blob()
            })
            .then((blob) => {
              const url = window.URL.createObjectURL(blob)
              link.href = url
              link.download = fileName
              document.body.appendChild(link)
              link.click()
              document.body.removeChild(link)
              // 清理 blob URL
              window.URL.revokeObjectURL(url)
            })
            .catch((error) => {
              console.error('文件下载失败:', error)
              // 如果 fetch 失败,回退到普通下载方式
              document.body.appendChild(link)
              link.click()
              document.body.removeChild(link)
            })
        } else {
          // 其他文件使用普通下载方式
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link)
        }
      }
    }
  }
}

简单记录下下载通用函数哈!

相关推荐
yuhulkjv3357 小时前
Claude表格复制到word不再崩溃,AI导出鸭批量导出+格式无损一键搞定
人工智能·ai·c#·word·ai导出鸭
DS随心转小程序10 小时前
ChatGPT 文字怎么转为 word?解析各类转换方案,AI 导出鸭成为高效文档转换新选择
人工智能·chatgpt·word·豆包·deepseek·ai导出鸭
TELL52117 小时前
vue前端架构
vue
DS随心转小程序18 小时前
借助 AI 导出鸭简化各类办公场景下文心输出 word 文档全流程操作
人工智能·aigc·word·豆包·deepseek·ai导出鸭
AI刀刀18 小时前
腾讯元宝粘贴到 word 格式混乱,AI 导出鸭一键规整排版
人工智能·c#·word·ai导出鸭
glustful18 小时前
Word在线编辑技术体系全景深度分析
word·在线文档·docx
DS随心转APP19 小时前
Claude的表格怎么导到word?AI 导出鸭一键高保真还原,批量导出告别格式噩梦
人工智能·chatgpt·word·ai导出鸭
DS随心转APP19 小时前
Grok的表格怎么导到word?AI 导出鸭一键高保真还原,批量导出告别格式噩梦
人工智能·chatgpt·word·ai导出鸭
yuhulkjv33519 小时前
Kimi表格复制到word不再崩坏,AI导出鸭批量导出完美保留公式与边框
人工智能·ai·word·ai导出鸭
DS随心转小程序21 小时前
巧用 AI 导出鸭攻克各类难题完善 ChatGPT 输出 word 文档转化工作
人工智能·chatgpt·aigc·word·豆包·deepseek·ai导出鸭