vue中的文件操作2
PDF在线预览
前面介绍过使用a标签实现pdf的预览,需要借助于浏览器,现在项目中需要在当前页的弹窗中预览PDF:
这个时候,a标签是不满足需求的,我们需要借助一个PDF插件:
PDF插件下载 提取码(y5yr)
使用:
1,将PDF插件放在项目里面,或者服务器中
2,获取PDF文件流
3,文件展示
文件下载(返回数据流)
1,无token验证的get方法:
2,带token验证的方法:
let headers = { token: sessionStorage.getItem('token'), operationLocation: '*****' }; axios({ method:'post', url:window.config.host +'****', data:params, responseType:'arraybuffer', headers:headers }).then((response) => { let blob = new Blob([response.data], { type: 'application/vnd.ms-excel;charset=utf-8' }); this.content = response.data; // 汉子解码 let filename = decodeURIComponent(response.headers['content-disposition']); if (window.navigator.msSaveOrOpenBlob) { navigator.msSaveBlob(blob, filename); } else { let aTag = document.createElement('a'); aTag.download = filename; aTag.href = window.URL.createObjectURL(blob); aTag.click(); URL.revokeObjectURL(aTag.href); } })
预览地址下载
图片、pdf等文件,浏览器会默认执行预览,不能调用download方法进行下载,需要先把图片、pdf等文件转成blob,再调用download方法进行下载,转换的方式是使用axios请求对应的链接
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) }, exportImg() { let link = "http:********r.png"; let fileName = '测试图片下载'; axios.request({ url: link, responseType: 'blob' //关键代码,让axios把响应改成blob }).then(res => { const link = URL.createObjectURL(res.data) this.download(link, fileName) }) },
自定义下载内容
获取页面中的文字进行自定义下载
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) this.download(link, name) }, 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) }, demo() { this.downloadFile('1.txt', 'lalalallalalla') this.downloadFile('1.json', JSON.stringify({ name: 'hahahha' })) },