图片预览 - ${fileName}

/** * 文件预览工具类 * 支持图片、视频、音频、PDF、TXT、Excel、Word、PPT等格式的预览 */ import XLSX from 'xlsx' // 文件类型分类 const FILE_TYPES = { image: ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg', 'ico'], video: ['mp4', 'avi', 'mov', 'wmv', 'flv', 'webm', 'mkv', 'ogg'], audio: ['mp3', 'wav', 'ogg', 'flac', 'aac', 'm4a', 'wma'], pdf: ['pdf'], txt: ['txt', 'log', 'json', 'xml', 'csv', 'html', 'htm', 'css', 'js'], excel: ['xls', 'xlsx'], word: ['doc', 'docx'], ppt: ['ppt', 'pptx'] } /** * 获取文件后缀 */ export function getFileSuffix(fileName) { if (!fileName || !fileName.includes('.')) return '' return fileName.substring(fileName.lastIndexOf('.') + 1).toLowerCase() } /** * 获取文件类型 */ export function getFileType(fileName) { const suffix = getFileSuffix(fileName) for (const [type, extensions] of Object.entries(FILE_TYPES)) { if (extensions.includes(suffix)) return type } return 'unknown' } /** * 获取MIME类型 */ export function getMimeType(suffix) { const mimeMap = { // 图片 jpg: 'image/jpeg', jpeg: 'image/jpeg', png: 'image/png', gif: 'image/gif', bmp: 'image/bmp', webp: 'image/webp', svg: 'image/svg+xml', ico: 'image/x-icon', // 视频 mp4: 'video/mp4', avi: 'video/x-msvideo', mov: 'video/quicktime', wmv: 'video/x-ms-wmv', flv: 'video/x-flv', webm: 'video/webm', mkv: 'video/x-matroska', ogg: 'video/ogg', // 音频 mp3: 'audio/mpeg', wav: 'audio/wav', flac: 'audio/flac', aac: 'audio/aac', m4a: 'audio/mp4', wma: 'audio/x-ms-wma', // 文档 pdf: 'application/pdf', txt: 'text/plain', log: 'text/plain', json: 'application/json', xml: 'application/xml', csv: 'text/csv', html: 'text/html', htm: 'text/html', css: 'text/css', js: 'application/javascript', // Office xls: 'application/vnd.ms-excel', xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', doc: 'application/msword', docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', ppt: 'application/vnd.ms-powerpoint', pptx: 'application/vnd.openxmlformats-officedocument.presentationml.presentation' } return mimeMap[suffix] || 'application/octet-stream' } /** * 将Blob转换为ArrayBuffer * @param {Blob} blob - Blob对象 * @returns {Promise} */ export function blobToArrayBuffer(blob) { return new Promise((resolve, reject) => { const reader = new FileReader() reader.onload = () => resolve(reader.result) reader.onerror = () => reject(new Error('Blob转换失败')) reader.readAsArrayBuffer(blob) }) } /** * 预览图片文件 * @param {Blob} blobData - 文件数据 * @param {String} fileName - 文件名 */ export function previewImage(blobData, fileName) { try { const fileURL = URL.createObjectURL(blobData) const previewWindow = window.open('', '_blank') if (!previewWindow) { // 如果弹窗被阻止，尝试直接打开 window.open(fileURL, '_blank') return true } previewWindow.document.write(` 图片预览 - ${fileName}

${fileName}