diff --git a/src/utils/download.ts b/src/utils/download.ts index b551651..d70f539 100644 --- a/src/utils/download.ts +++ b/src/utils/download.ts @@ -1,10 +1,9 @@ /** - * 下载图片(本地地址) + * 下载本地图片 href为 127.0.0.1/xxxx * @param href 图片地址 * @param name 图片名称 */ function downloadImg(href: string, name: string) { - console.log(href, 'href') const eleLink = document.createElement('a') eleLink.download = name eleLink.href = href @@ -14,13 +13,111 @@ /** * 下载文件 + * @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 file = ['doc', 'excel', 'pdf'] const fileType = url.split('.')[url.split('.').length - 1] console.log(fileType, 'fileType') if (photo.includes(fileType)) { @@ -43,7 +140,10 @@ } } else { - // 文件 - window.open(url) + // 预览一般都是用的a标签,文件下载用的window.open + // 1.pdf文件路径放到window.open里面,点击是进行在线预览 + // 2.word文件和excel文件通过a标签打开时,是直接下载了 + // 将网络地址转化为 blob地址 并下载 + urlToBlob(url, name) } }