修改文件预览

This commit is contained in:
guanj
2025-12-25 13:19:24 +08:00
parent 454d612a32
commit 17589e30da
4 changed files with 121 additions and 93 deletions

View File

@@ -1,38 +1,48 @@
import { downloadFile } from '@/api/system-boot/file'
// 下载文件
export const download = (urls: any) => {
console.log('下载',urls)
downloadFile({ filePath: urls }).then((res: any) => {
let blob = new Blob([res], {
type: urls.includes('.pdf')
? 'application/pdf'
: urls.includes('.zip')
? 'application/zip'
: urls.includes('.doc')
? 'application/msword'
: urls.includes('.docx')
? 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
: urls.includes('.xls')
? 'application/vnd.ms-excel'
: urls.includes('.xlsx')
? 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
: urls.includes('.png')
? 'image/png'
: urls.includes('.jpeg')
? 'image/jpeg'
: urls.includes('.jpg')
? 'image/jpg'
: ''
export const download = (urls: string) => {
console.log('下载', urls)
downloadFile({ filePath: urls })
.then((res: any) => {
// 1. 确定文件MIME类型优化用更简洁的方式
const getFileType = (url: string) => {
const ext = url.split('.').pop()?.toLowerCase() || ''
const mimeMap: Record<string, string> = {
pdf: 'application/pdf',
zip: 'application/zip',
doc: 'application/msword',
docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
xls: 'application/vnd.ms-excel',
xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
png: 'image/png',
jpeg: 'image/jpeg',
jpg: 'image/jpg'
}
return mimeMap[ext] || ''
}
const blob = new Blob([res], { type: getFileType(urls) })
// 2. 提取文件名并保留原生后缀(核心修复点)
const fileName = urls.split('/').at(-1) || '下载文件' // 先提取URL最后一段文件名
// 3. 创建下载链接
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a')
link.href = url
link.download = fileName // 直接使用原文件名(保留后缀)
document.body.appendChild(link)
link.click()
// 4. 清理资源(优化)
link.remove()
window.URL.revokeObjectURL(url) // 释放blob URL
})
.catch(err => {
console.error('下载失败:', err)
// 可添加错误提示如Toast
})
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a')
let name = removeLastDotSuffix(urls.split('/')[2])
link.href = url
link.download = name
document.body.appendChild(link)
link.click()
link.remove()
})
}
function removeLastDotSuffix(str: string) {
// 找到最后一个 . 的位置
@@ -41,35 +51,40 @@ function removeLastDotSuffix(str: string) {
return lastDotIndex !== -1 ? str.slice(0, lastDotIndex) : str
}
// 预览文件
export const previewFile = async (urls: any) => {
console.log('预览',urls)
console.log('预览', urls)
let url = ''
await downloadFile({ filePath: urls }).then((res: any) => {
let blob = new Blob([res], {
type: urls.includes('.pdf')
? 'application/pdf'
: urls.includes('.zip')
? 'application/zip'
: urls.includes('.doc')
? 'application/msword'
: urls.includes('.docx')
? 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
: urls.includes('.xls')
? 'application/vnd.ms-excel'
: urls.includes('.xlsx')
? 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
: urls.includes('.png')
? 'image/png'
: urls.includes('.jpeg')
? 'image/jpeg'
: urls.includes('.jpg')
? 'image/jpg'
: ''
await downloadFile({ filePath: decodeURI(urls) })
.then((res: any) => {
// 1. 确定文件MIME类型优化用更简洁的方式
const getFileType = (url: string) => {
const ext = url.split('.').pop()?.toLowerCase() || ''
const mimeMap: Record<string, string> = {
pdf: 'application/pdf',
zip: 'application/zip',
doc: 'application/msword',
docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
xls: 'application/vnd.ms-excel',
xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
png: 'image/png',
jpeg: 'image/jpeg',
jpg: 'image/jpg'
}
return mimeMap[ext] || ''
}
const blob = new Blob([res], { type: getFileType(decodeURI(urls)) })
// 3. 创建下载链接
url = window.URL.createObjectURL(blob)
})
url = window.URL.createObjectURL(blob)
})
console.log('url',url)
.catch(err => {
console.error('下载失败:', err)
// 可添加错误提示如Toast
})
console.log('url', url)
return url
}