前端怎样在浏览器中自定义下载一些内容?
1. 在浏览器中自定义下载一些内容
同时适用于word,ppt等浏览器不会默认执行预览的文档,也可以用于下载后端接口返回的流数据,见3
//下载一个链接 function download(link, name) { if(!name){ name=link.slice(link.lastIndexOf('/') + 1) } let eleLink = document.createElement('a') eleLink.download = name eleLink.style.display = 'none' eleLink.href = link document.body.appendChild(eleLink) eleLink.click() document.body.removeChild(eleLink) } //下载excel download('http://111.229.14.189/file/1.xlsx') 复制代码复制代码
2. 下载一个excel文档
场景:我想下载一些DOM内容,我想下载一个JSON文件
/** * 浏览器下载静态文件 * @param {String} name 文件名 * @param {String} content 文件内容 */ function downloadFile(name, content) { if (typeof name == 'undefined') { throw new Error('The first parameter name is a must') } if (typeof content == 'undefined') { throw new Error('The second parameter content is a must') } if (!(content instanceof Blob)) { content = new Blob([content]) } const link = URL.createObjectURL(content) download(link, name) } //下载一个链接 function download(link, name) { if (!name) {//如果没有提供名字,从给的Link中截取最后一坨 name = link.slice(link.lastIndexOf('/') + 1) } let eleLink = document.createElement('a') eleLink.download = name eleLink.style.display = 'none' eleLink.href = link document.body.appendChild(eleLink) eleLink.click() document.body.removeChild(eleLink) } 复制代码复制代码
使用方式:
downloadFile('1.txt','lalalallalalla') downloadFile('1.json',JSON.stringify({name:'hahahha'})) 复制代码复制代码
3. 下载后端返回的流
数据是后端以接口的形式返回的,调用1中的download方法进行下载
download('http://111.229.14.189/gk-api/util/download?file=1.jpg') download('http://111.229.14.189/gk-api/util/download?file=1.mp4') 复制代码复制代码
4. 提供一个图片链接,点击下载
图片、pdf等文件,浏览器会默认执行预览,不能调用download方法进行下载,需要先把图片、pdf等文件转成blob,再调用download方法进行下载,转换的方式是使用axios请求对应的链接
//可以用来下载浏览器会默认预览的文件类型,例如mp4,jpg等 import axios from 'axios' //提供一个link,完成文件下载,link可以是 http://xxx.com/xxx.xls function downloadByLink(link,fileName){ axios.request({ url: link, responseType: 'blob' //关键代码,让axios把响应改成blob }).then(res => { const link=URL.createObjectURL(res.data) download(link, fileName) }) } 复制代码复制代码
注意:会有同源策略的限制,需要配置转发
作者:扎瓦斯柯瑞迫
链接:https://juejin.cn/post/7032522676392591374