/** * 下载本地图片 href为 127.0.0.1/xxxx * @param href 图片地址 * @param name 图片名称 */ 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) } }