-
2021-03-15 13:33:08
下载模板
//当后端返回的是文件的时候,我们怎么在各大浏览器实现下载功能
//后端定义的是传0的时候,我们下载模板
templateDownLoad() {
getTemplateUrl('0')
.then(res => {
const d = `${BASE_HOST}${BASE_PARJECT_NAME}/下载接口/0`
const url = d.replace(/\"/g, '')
const alink = document.createElement('a')
document.body.appendChild(alink)
alink.style.display = 'none'
alink.href = url
var explorer = window.navigator.userAgent
if (explorer.indexOf('Firefox') >= 0) {
alink.download = getTemplateUrl
const clickEvent = new MouseEvent('click')
alink.dispatchEvent(clickEvent)
} else if (explorer.indexOf('Safari') >= 0) {
alink.target = '_blank'
alink.addEventListener('click', event => {}, false)
const clickEvent = new MouseEvent('click', {
altKey: true
})
alink.dispatchEvent(clickEvent)
} else {
alink.download = getTemplateUrl
alink.target = '_blank'
alink.addEventListener('click', event => {}, false)
const clickEvent = new MouseEvent('click', {
altKey: true
})
alink.dispatchEvent(clickEvent)
}
})
.catch(error => {
console.log('error', error)
})
},
在ie浏览器上出现了兼容性的问题,ie浏览器不支持MouseEvent事件,这个时候,只需要做ie对事件的兼容性即可
beforeCreate() {
(function(window) {
try {
new MouseEvent('test')
return false // No need to polyfill
} catch (e) {
// Need to polyfill - fall through
}
var MouseEvent = function(eventType, params) {
params = params || { bubbles: false, cancelable: false }
var mouseEvent = document.createEvent('MouseEvent')
mouseEvent.initMouseEvent(eventType, params.bubbles, params.cancelable, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
return mouseEvent
}
MouseEvent.prototype = Event.prototype
window.MouseEvent = MouseEvent
})(window)
},
更多相关内容 -
vue中axios实现下载excel表格功能(下载后端返回的文件流)
2020-08-03 16:26:12之前遇到一个问题:就是做下载excel表格功能时,不知道怎么把后端返回的文件流转化成表格数据,上网看了很多方法,可能自己没有找对吧,确实可以实现下载,但是下载的表格内容是乱码,个人感觉应该是实现下载函数...之前遇到一个问题:就是做下载excel表格功能时,不知道怎么把后端返回的文件流转化成表格,上网看了很多方法,可能自己没有找对吧,确实可以实现下载,但是下载的表格内容是乱码,个人感觉应该是实现下载函数方法写错了,现在实现了,先记录一下,为了方便日后自己的学习。
上图就是调取后端接口成功后返回的文件流;接下来我们就一步一步实现下载excel表格的功能,写这个主要是为了自己的学习和记录,如果对你有帮助,我也会很开心,如果有什么不对的,也可以帮我指出错误。
第一步:先写接口函数(以我的代码为例)
responseType
表示服务器响应的数据类型,可以是 ‘arraybuffer’, ‘blob’, ‘document’, ‘json’, ‘text’, ‘stream’,默认是‘json’export function exportAudit(data) { return axios({ url: '/dataassets/asset/audit/export', method: 'get', params: data, responseType: 'blob', }) }
第二步:写个下载文件的函数方法
// 下载文件 downloadFile(res, fileName) { let blob = new Blob([res.data]); //res为从后台返回的数据 if (!fileName) { fileName = res.headers['content-disposition'].split('filename=').pop(); } if ('msSaveOrOpenBlob' in navigator) { window.navigator.msSaveOrOpenBlob(blob, fileName); } else { const elink = document.createElement('a'); elink.download = fileName; elink.style.display = 'none'; elink.href = URL.createObjectURL(blob); document.body.appendChild(elink); elink.click(); URL.revokeObjectURL(elink.href); document.body.removeChild(elink); } }
第三步:组件中调用接口实现下载
//导出 export() { var info={ //需要传入的参数 pageNum: this.pageConfig.currentPage, pageSize: this.pageConfig.pageSize, verifyId: this.form.verifyId, keyWord: this.form.name } exportAudit(info).then((res) => { //日期转换成字符串 let date = dateToStr(new Date()); // downloadFile是实现表格的下载函数方法 downloadFile(res, 'XX报表-' + date + '.xls'); }).catch(() => {}) },
这样做就可以实现文件的下载,如果你还没有解决,可以试试!
-
前端实现文件下载功能(后端返回的流)
2020-07-07 14:50:01前端实现下载功能时,记录使用接口返回文件流得形式进行下载 1,可以通过后端返回的链接a标签直接下载 2,有时候是后端接口返回得文件流进行下载 3,前端生成表格文件下载 第一步我们写一个获取 blob 得方法 /** *...前端实现下载功能时,记录使用接口返回文件流得形式进行下载
1,可以通过后端返回的链接a标签直接下载
2,有时候是后端接口返回得文件流进行下载
3,前端生成表格文件下载第一步我们写一个获取 blob 得方法
/** * 获取 blob * @param {String} url 目标文件地址 * @return {Promise} */ function getBlob (url) { return new Promise(resolve => { const xhr = new XMLHttpRequest() xhr.open('get', url, true) xhr.responseType = 'blob' xhr.onload = () => { if (xhr.status === 200) { resolve(xhr.response) } } xhr.send() }) }
第二步
/** * 保存 * @param {Blob} blob * @param {String} filename 想要保存的文件名称 */ function saveAs (blob, filename) { if (window.navigator.msSaveOrOpenBlob) { navigator.msSaveBlob(blob, filename) } else { const link = document.createElement('a') const body = document.querySelector('body') link.href = window.URL.createObjectURL(blob) link.download = filename // fix Firefox link.style.display = 'none' body.appendChild(link) link.click() body.removeChild(link) window.URL.revokeObjectURL(link.href) } }
第三步 实现下载文件
/** * 下载 * @param {String} url 目标文件地址 * @param {String} filename 想要保存的文件名称 */ export function download (url, filename) { getBlob(url).then(blob => { saveAs(blob, filename) }) }
这样我们就实现了下载文件功能
完整js代码
/** * 获取 blob * @param {String} url 目标文件地址 * @return {Promise} */ function getBlob (url) { return new Promise(resolve => { const xhr = new XMLHttpRequest() xhr.open('get', url, true) xhr.responseType = 'blob' xhr.onload = () => { if (xhr.status === 200) { resolve(xhr.response) } } xhr.send() }) } /** * 保存 * @param {Blob} blob * @param {String} filename 想要保存的文件名称 */ function saveAs (blob, filename) { if (window.navigator.msSaveOrOpenBlob) { navigator.msSaveBlob(blob, filename) } else { const link = document.createElement('a') const body = document.querySelector('body') link.href = window.URL.createObjectURL(blob) link.download = filename // fix Firefox link.style.display = 'none' body.appendChild(link) link.click() body.removeChild(link) window.URL.revokeObjectURL(link.href) } } /** * 下载 * @param {String} url 目标文件地址 * @param {String} filename 想要保存的文件名称 */ export function download (url, filename) { getBlob(url).then(blob => { saveAs(blob, filename) }) }
接下来我们就实际页面中去调用下载功能
- 引入js文件到目标组件
- 调用方法传参,实现下载文件
import { download } from '@/components/downLoadFile'; export default { methods: { dlf(url,name){ download(url, name); } } }
参考文档
-
根据后端返回的url实现下载功能
2020-01-20 17:44:09需求描述: 根据后端返回的url实现下载功能 /** download All*/ const downMethod = data => { axios({ method: data.method, url: apiUrl + data.url, params: data.params, responseType: "blob" }).then...需求描述: 根据后端返回的url实现下载功能
/** download All*/ const downMethod = data => { axios({ method: data.method, url: apiUrl + data.url, params: data.params, responseType: "blob" }).then(res => { let timestamp = new Date().getTime(); const link = document.createElement("a"); let blob = new Blob([res.data], { type: getFileType(data.params.fileType) }); link.style.display = "none"; link.href = URL.createObjectURL(blob); link.download = data.fileName + moment(timestamp).format("YYYY-MM-DD"); //下载的文件名 document.body.appendChild(link); link.click(); document.body.removeChild(link); // Message({ // type: "success", // message: "下载成功", // center: true // }); }); };
<div style="margin-top:22px;margin-bottom:22px;" v-if="basicInfos.produceAppendix.length>0"> <div class="download" v-for="(item,index) in basicInfos.produceAppendix" :key="index"> <span>{{item.appendixName}}</span> <span style="cursor:pointer;color:#169BD5;padding-left:15px;" @click="download(item)">下载</span> </div> </div> <div v-else style="margin-left:20px;margin-bottom: 16px;">暂无附件</div> </div>
关键操作:调用utils.js里面的方法,处理文件名称。
//method里面的方法 // 下载 download(item) { utils.downMethod({ method: "get", url: "/download", fileName: item.appendixName.split(".")[0], //截取文件名 params: { fileType: item.appendixName.split(".")[1], //截取文件名后缀 filePath: item.appendixAddress } }); },
-
前端处理后台接口返回的文件流,实现文件下载功能
2020-10-09 09:42:14//创建下载的链接 downloadElement.href = href; downloadElement.download = name; //下载后文件名 document.body.appendChild(downloadElement); downloadElement.click(); //点击下载 document.body.removeChild... -
Excel文档导出-后端返回文件流,前端实现下载功能
2020-05-26 11:36:28最近在做项目的时候遇到Excel导出功能,后端返回的是文件流,前端如何实现下载功能,以下是项目用的源码,有需要可直接复制使用: // 导出 exporttable() { this.axios({ method: "get", url: this.baseUrls + ... -
Flask接收请求,将指定字符串作为文件返回,浏览器端实现下载功能 Flask文件下载功能
2020-04-10 12:14:55最近项目中有这样的需求,用户上传一个xml的文件,服务端对它进行处理,返回一个TXT文件 需要将用户上传的文件保存后,再进行处理,生成TXT文件,返回给用户, 但这样会产生文件冗余的情况,用户上传的文件可以... -
VUE根据后端返回url链接下载文件
2021-11-22 13:31:11甲方提出了一个需求 在前端页面上选择了开始时间和结束时间 实现导出功能 导出功能由后端人员写好接口 前端请求接口拿到返回的url地址进行下载 1. 页面实现思路 页面上有点击按钮 点击后弹出模态框 选择时间 发起... -
在 Spring Boot 项目中实现文件下载功能
2019-09-16 17:24:18所以,您需要为用户提供可以下载文件的 API ,将用户希望获取的文件作为下载资源返回给前端。 代码 maven 依赖 请您创建好一个 springboot 项目,一定要引入 web 依赖: <dependency> <grou... -
react前端下载后端返回文件流(文件流下载excel、csv)
2021-03-08 16:32:35下载excel 文件流下载 -
前端通过后端返回文件url下载文件
2020-11-09 17:27:52一般使用windows.open() 也可以实现但是 体验差,windows.open()会打开新的窗口下载, 以下方法体验较好,直接在当前窗口下载 // 界面代码 <a @click="downFile()">{{文件名}}</a> // 文件下载 ... -
springmvc 文件下载功能 不能下载时 如何返回一段话 用的是form不是ajax
2017-07-16 02:00:01用的form实现的一个文件下载功能 到后台处理 因为springmvc返回到原来页面并且跳出下载失败的弹出框 -
使用postman调接口返回response文件流下载
2021-12-23 14:43:16用postman连接本地调试接口的时候,如果是下载功能返回一个response的文件流,可以使用postman自带功能 保存文件之后 重命名后缀就可以打开 -
flask接收客户端的get请求,读取本地文件并将文件返回给客户端 ,可用于文件下载功能
2019-07-16 19:59:53#file_name是客户端传来的需要下载的文件名 @app.route('/get_file/<file_name>', methods=['GET']) def get_file(file_name): directory = config.APP_PATH try: response = make_response( send_from_... -
前端如何实现文件下载功能
2019-08-04 16:20:17文章目录前端如何实现文件下载功能结合后端实现两种实现方式第一种、直接下载服务器的静态资源第二种、前端传参,后端生成文件实现思路:优缺点优点缺点纯前端实现数据来源实现思路第一步、将数据生成对应得`data:... -
SpringBoot + Vue 前后端分离项目实现文件上传至本地以及文件下载功能
2020-07-28 23:58:16SpringBoot + Vue 实现文件上传功能,文件下载功能 -
vue 两种文档下载方法的实现(后台传递文件流,后台返回文件下载地址)
2019-08-05 17:27:481.因为是文件流下载,所以在取后台数据的时候,要多传递一个【responseType: ‘blob’】这个参数,是为了最后数据返回时response的data为【blob】文件格式(data: Blob {size: 22528, type: “application/vnd.ms-... -
前端调用后端接口(返回文件流)-文件下载
2022-03-22 17:22:50后端返回的文件是一个blob格式的流文件,前端需要进行转码,得到一个url,实现下载文件的功能。 使用window.location.href=url,window.open(url)也可以实现文件下载,但下载需要传请求头时,就不适用这种方法了。 ... -
vue中后端做Excel导出功能返回数据流前端如何做处理
2019-07-03 17:01:54因为需求对导出表格的数据格式和样式有要求,所以这个导出功能放到后端来做,而且后端返回的是数据流,所以需要处理成想要的表格并导出来。 先看下效果图: 页面效果: 点击 导出Excel 调用导出接口成功了: ... -
element-ui下载文件功能
2021-10-20 14:34:37点击“下载”按钮下载文件...2.download方法,将后端需要传的参数id,uuid传过去,将后端返回的token和url连接,用浏览器自带window.open打开地址下载。 3.调用后台的接口 4.最后就可以成功下载文件啦 ... -
JS结合layui实现文件预览、下载功能
2020-10-23 17:18:53JS结合layui实现文件预览、下载功能 这俩天做项目,需要做一个下载pdf的功能,但是需要实现客户点击文件先进行预览,然后预览界面得有下载按钮,提供下载。之前已经写过一篇直接下载的文章了,这篇主要记录一下预览... -
前端实现文件下载功能的三种方式
2020-04-23 11:35:22一些管理系统常常会有导出文件的功能,这里介绍三种文件下载的尝试 1. 通过文件地址下载文件 此方式最为简易,只需要知道文件在服务器上的地址,就可以通过a标签实现下载 <a href=... -
java图片上传保存至服务器并返回可下载的URL
2019-11-26 19:02:46java图片上传保存至服务器并返回可下载的URL1.需求来源2.解决思路3.开始干活(直接上代码)4.总结 1.需求来源 上周要做一个功能,需求是: 微信小程序开发的程序会传一张图片到后台java接口,后台接收到图片保存在... -
微信小程序实现下载功能(以下载视频为例)
2021-04-23 21:05:24一、 wx.downloadFile()方法:访问视频对应的Url,回调函数返回一个该视频文件的临时路径。 wx.downloadFile({ url: app.serverUrl + me.data.videoInfo.videoPath, success: function (res) { // 只要服务器... -
Java后台实现文件下载功能
2017-03-13 14:46:26并提供下载功能。 该“Excel下载” 功能的业务逻辑是当点击该按钮。则需要把报表页面上显示的数据进行生成一个csv 格式的文件。然后并进行下载如何生成CSV(详见开发中。。。。。。) 为此。 我实现文件下载功能... -
blob下载--返回数据乱码问题
2020-08-27 14:41:36blob下载返回数据乱码问题 之前介绍过下载,在使用blob方式进行下载的时候,遇到返回的数据为乱码 服务端需要设置为response.setContentType(“application/octet-stream”),但是这个值不一定非设置成"application/... -
Springboot中如何将本地文件以流的形式返回给前端下载
2021-01-30 09:10:26***Springboot中如何将本地文件以流的形式返回给前端下载***代码展示:package gaea.ImportService.utils;import org.apache.poi.hssf.usermodel.HSSFWorkbook;import org.slf4j.Logger;import org.slf4j.... -
后端返回一个url前端怎么把音视频文件下载下来
2020-10-26 10:31:37最近做的项目有一个用腾讯云上传音视频的功能,在后台管理里面需要将音视频下载下来,后端是直接返回腾讯云视频url地址的, // 点击下载文件 downloadFile(file) { // 音视频下载 if (file.url.indexOf('... -
【Java文件下载】如何让浏览器直接下载后端返回的图片,而不是直接打开
2020-01-19 21:55:24默认情况下,浏览器设定是inline形式,对于服务器返回的文件,能打开就打开,不能打开就自动下载...但是有些时候,实现下载功能,后端返回的是图片,浏览器却直接把图片打开了?怎么回事? 这就是Content-Dispositio... -
在antd-pro中实现下载功能
2018-10-08 17:47:27antd中实现下载和以前用jquery没什么太大的区别,就是用Blob对象进行处理 downloadFile=(e)=>{ const fileName=rowData.activeDepotName;//说白了就是给文件个名字 this.props.dispatch({//发送请求 ...