对于想在浏览器中点击间接下载,而非在浏览器中预览的场景,实用的 JS 函数;
比方网页txt文件点击不预览间接下载
思路:创立 <a>
Element
,获取 blob
数据,利用 window.URL.createObjectURL()
读取并指定给 a.href
,插入 <body>
手动触发下载;
// 动态资源服务器地址const staticServer = 'http://xx.xxx.xxx.xxx:xxxxx';// 点击已上传的文件function onPreview(file) { if (file && file.path) { let url = `${staticServer}${file.path}` let isTxt = isFileType(file.path, 'txt'); // txt间接下载,防止新窗口关上 if (isTxt) { let name = file.name || file.path.split('/').slice(-1)[0] || '' exportFile(url, name) } else { window.open(url) } }},// 判断文件类型function isFileType(url, fileTypeList = '') { const type = url.split('.').at(-1); if(Array.isArray(fileTypeList)){ return fileTypeList.includes(type) } else { return type === fileTypeList }},// 导出文件function exportFile(url, fileName) { function createObjectURL(object) { return window.URL ? window.URL.createObjectURL(object) : window.webkitURL.createObjectURL(object) } let xhr = new XMLHttpRequest(); let formData = new FormData(); xhr.open('get', url); xhr.setRequestHeader('Auth-User-Token', localStorage.getItem('token')); xhr.responseType = 'blob'; xhr.onload = function (e) { if (this.status === 200) { let blob = this.response; let newFileName = `${fileName}`; if (window.navigator.msSaveOrOpenBlob) { navigator.msSaveBlob(blob, newFileName) } else { let a = document.createElement('a'); let url = createObjectURL(blob); a.href = url; a.download = newFileName; document.body.append(a); a.click(); window.URL.revokeObjectURL(url); } } }; xhr.send(formData)};// 导出文件,不做兼容const exportFile2 = (file) => { let link = document.createElement('a') let url = staticServer + file.path fetch(url).then(res => res.blob()).then(blob => { let urlObj = URL.createObjectURL(blob); link.href = urlObj; link.download = '' document.body.appendChild(link) link.click() URL.revokeObjectURL(urlObj); })};