import { ElLoading, ElMessage } from 'element-plus' import { getPhotoUrl } from '@/api/file' declare const window: Window & { createObjectURL: any; webkitURL: any; URL: any } /** * 下载本地图片 href为 127.0.0.1/xxxx * @param href 图片地址 * @param name 图片名称 */ export function downloadImg(href: string, name: string) { const eleLink = document.createElement('a') eleLink.download = name eleLink.href = href eleLink.click() eleLink.remove() } /** * 下载文件 * @param file 文件对象 * @param name 图片名称 */ export function downloadFile(file: File, name: string) { console.log(new Blob([file]), 'new Blob([file])') const objectUrl = URL.createObjectURL(new Blob([file])) const link = document.createElement('a') link.download = name link.href = objectUrl link.click() link.remove() window.URL.revokeObjectURL(link.href) } // 各种文件类型的type export const fileType: { [key: string]: string } = { pdf: 'application/pdf', doc: 'application/doc', docx: 'application/docx', excel: 'application/excel', ppt: 'application/vnd.ms-powerpoint', dir: 'application/x-director', js: 'application/x-javascript', swf: 'application/x-shockwave-flash', xhtml: 'application/xhtml+xml', xht: 'application/xhtml+xml', zip: 'application/zip', mid: 'audio/midi', midi: 'audio/midi', mp3: 'audio/mpeg', rm: 'audio/x-pn-realaudio', rpm: 'audio/x-pn-realaudio-plugin', wav: 'audio/x-wav', bmp: 'image/bmp', gif: 'image/gif', jpeg: 'image/jpeg', jpg: 'image/jpeg', png: 'image/png', css: 'text/css', html: 'text/html', htm: 'text/html', txt: 'text/plain', xsl: 'text/xml', xml: 'text/xml', mpeg: 'video/mpeg', mpg: 'video/mpeg', avi: 'video/x-msvideo', movie: 'video/x-sgi-movie', } /** * 将网络文件地址转化为文件对象 * @param url 文件地址 * @param fileName 文件名称 */ export function getFileFromUrl(url: string, fileName: string) { return new Promise((resolve, reject) => { var blob = null var xhr = new XMLHttpRequest() xhr.open('GET', url) const urlFileType = url.split('.')[url.split('.').length - 1] xhr.setRequestHeader('Accept', fileType[urlFileType]) xhr.responseType = 'blob' // 加载时处理 xhr.onload = () => { // 获取返回结果 blob = xhr.response const file = new File([blob], fileName, { type: fileType[urlFileType] }) // 返回结果 resolve(file) } xhr.onerror = (e) => { reject(e) } // 发送 xhr.send() }) } /** * 将网络地址转化为 blob地址 并下载 * @param url 文件地址 * @param fileName 文件名称 */ export function urlToBlob(url: string, name: string) { const xhr = new XMLHttpRequest() xhr.open('get', url) xhr.responseType = 'blob' // ""|"text"-字符串 "blob"-Blob对象 "arraybuffer"-ArrayBuffer对象 xhr.onload = function () { const path = URL.createObjectURL(xhr.response) const link = document.createElement('a') link.download = name link.href = path link.click() link.remove() window.URL.revokeObjectURL(link.href) } xhr.send() } /** * 下载文件 各种文件 * @param url 网络文件地址 * @param name 文件名 */ export function download(url: string, name: string) { // 下载图片 const photo = ['jpg', 'jpeg', 'png'] const fileType = url.split('.')[url.split('.').length - 1] console.log(fileType, 'fileType') if (photo.includes(fileType)) { // 图片 将服务器图片地址转化成本地地址 const image = new Image() image.setAttribute('crossOrigin', 'anonymous') image.src = url image.onload = () => { const canvas = document.createElement('canvas') canvas.width = image.width canvas.height = image.height const ctx = canvas.getContext('2d'); (ctx as CanvasRenderingContext2D).drawImage(image, 0, 0, image.width, image.height) canvas.toBlob((blob) => { const url = URL.createObjectURL(blob as Blob) downloadImg(url, name) // 用完释放URL对象 URL.revokeObjectURL(url) }) } } else { // 预览一般都是用的a标签,文件下载用的window.open // 1.pdf文件路径放到window.open里面,点击是进行在线预览 // 2.word文件和excel文件通过a标签打开时,是直接下载了 // 将网络地址转化为 blob地址 并下载 urlToBlob(url, name) } } // 将blob转为url export function getObjectURL(data: any) { var url = null if (window.createObjectURL !== undefined) { // basic url = window.createObjectURL(data) } else if (window.webkitURL !== undefined) { // webkit or chrome try { url = window.webkitURL.createObjectURL(data) } catch (error) { console.log(error) } } else if (window.URL !== undefined) { // mozilla(firefox) try { url = window.URL.createObjectURL(data) } catch (error) { console.log(error) } } return url } // 二进制流转blob export function getFiles(res: any, type: any) { // 创建blob对象,解析流数据 const blob = new Blob([res], { // 如何后端没返回下载文件类型,则需要手动设置:type: 'application/pdf;chartset=UTF-8' 表示下载文档为pdf,如果是word则设置为 msword,excel为excel type, }) return blob } // 将二进制流转为base64 export function getBase64(data: any) { const blob = new Blob([data], { type: 'image/jpg' }) return new Promise((resolve, reject) => { const reader = new FileReader() reader.readAsDataURL(blob) reader.onload = () => resolve(reader.result) reader.onerror = error => reject(error) }) } // 文件名下载 export function downloadFileName(fileName: string) { const loading = ElLoading.service({ lock: true, text: '下载中,请稍后', background: 'rgba(255, 255, 255, 0.6)', }) if (fileName) { getPhotoUrl(fileName).then((res) => { download(res.data, fileName) loading.close() }).catch(() => { loading.close() ElMessage.error('下载失败') }) } else { loading.close() ElMessage('无可下载内容') } }