vue处理后端返回文件流实现下载(代码片段)

龖龖龖 龖龖龖     2022-11-28     420

关键词:

//在项目src目录utils下编写一个download.js文件

export default 
		//下载Excel
	excel(data,fileName) 
		this.download0(data,fileName,"application/vnd.ms-excel");
	,
		//下载docx
	docx(data,fileName) 
		this.download0(data,fileName,"application/msexcel");
	,
		//下载Word
	excel(data,fileName) 
		this.download0(data,fileName,"application/msword");
	,
		//下载Zip
	excel(data,fileName) 
		this.download0(data,fileName,"application/zip");
	,
		//下载Html
	excel(data,fileName) 
		this.download0(data,fileName,"application/html");
	,
		//下载Markdown
	excel(data,fileName) 
		this.download0(data,fileName,"application/markdown");
	,
	download0(data,fileName,mineType) 
		//创建blob
		let blob = new Blob([data],type:mineType);
		//创建href超链接,点击下载
		window.URL = window.URL || window.WebkitURL;
		let href = URL.createElement("a");
		downA.href = href;
		downA.download= fileName;
		downA.click();
		//销毁超链接
		window.URL.revokeObjectURL(href);
	

//在main.js文件全局引入

import download from "@/utils/download"
Vue.prototype.$download= download

//请求设置responseType

export function exportType() 
	return request(
		url:'',
		method:'',
		//请求时浏览器将返回数据的文件流转为blob格式
		responseType:'blob'
	)

//项目应用

	handleExport()
		this.$confirm("是否确认下载","系统提示",type:"warning")
		.then(()=>
			return exportType();//接口请求
	).then((response)=>
		this.$download.excel(response,"下载后文件的命名");
	)

开发者涨薪指南 48位大咖的思考法则、工作方式、逻辑体系

javascript下载后端返回的文件流(代码片段)

JavaScript下载后端返回的文件流JavaScript下载后端返回的文件流(方法一)JavaScript下载后端返回的文件流(方法二)JavaScript下载后端返回的文件流(方法一)后端返回的结果/*创建一个js写以下代码*/importaxiosfrom'axios';/*先安装:npm... 查看详情

vue前端接受后台返回流数据,并实现文件正常下载(代码片段)

一,问题:后台返回二进制文件流,前端实现下载excel文件;二,新建一个js文件用来配置exportfunctionexportExcel(data,filename)constblob=newBlob([data],type:'application/vnd.ms-excel')constlink 查看详情

vue前端接受后台返回流数据,并实现文件正常下载(代码片段)

一,问题:后台返回二进制文件流,前端实现下载excel文件;二,新建一个js文件用来配置exportfunctionexportExcel(data,filename)constblob=newBlob([data],type:'application/vnd.ms-excel')constlink 查看详情

vue采用blob下载后端返回的excel流文件乱码问题

没有文件服务器,前后端采用文件流方式下载,后端返回二进制乱码时,前端使用blob对象进行处理2.采用的是axios请求方式this.$http.post("download",fileName:file.filename).then(function(response)letblob=newBlob([response.data],type:‘application/vnd.openxml 查看详情

ajax方式实现文件下载失败(代码片段)

...形式进行的,ajax无法解析后台返回的文件流,所以无法处理二进制流response输出来下载文件ajax请求只是个“字符型&rdqu 查看详情

利用blob处理node层返回的二进制文件流字符串并下载文件(代码片段)

...释|背景看到标题有点懵逼,哈哈,实际上是后端将文件处理成二进制流,返回到前端,前端处理这个二进制字符串,输出文件或下载最近公司有个需求是用户在点击下载文件(==pdf==)的时候,下载地址不能暴露在接口的返回值... 查看详情

vue前端接受后台返回流数据,并实现文件正常下载(代码片段)

一,问题:后台返回二进制文件流,前端实现下载excel文件;二,新建一个js文件用来配置exportfunctionexportExcel(data,filename)constblob=newBlob([data],type:'application/vnd.ms-excel')constlink=document.createElement('a'... 查看详情

谈谈关于文件下载(代码片段)

昨天跟后端小哥调了调关于文件下载的接口,还是有一些坑的,这里总结一下。我们分为后端返回二进制流或者返回url的形式进行讲述。一、后端返回二进制流总的来说关于文件下载前端有以下两种方法去拉取数据:... 查看详情

谈谈关于文件下载(代码片段)

昨天跟后端小哥调了调关于文件下载的接口,还是有一些坑的,这里总结一下。我们分为后端返回二进制流或者返回url的形式进行讲述。一、后端返回二进制流总的来说关于文件下载前端有以下两种方法去拉取数据:... 查看详情

javascript下载后端返回的文件流

JavaScript下载后端返回的文件流JavaScript下载后端返回的文件流JavaScript下载后端返回的文件流后端返回的结果/*创建一个js写以下代码*/importaxiosfrom'axios';/*先安装:npminstalljs-file-downloadmain.js引入importfileDownloadfrom'js-file-do... 查看详情

前端如何下载文件流(代码片段)

...是如果后台返回的是文件流,那么前端就需要做一些处理;其实前端处理的核心:就是将文件流转为文件,然后再模拟点击,实现前者的效果。步骤1.封装一个下载工具这个工具的作用就是&# 查看详情

前端如何下载文件流(代码片段)

...是如果后台返回的是文件流,那么前端就需要做一些处理;其实前端处理的核心:就是将文件流转为文件,然后再模拟点击,实现前者的效果。步骤1.封装一个下载工具这个工具的作用就是&# 查看详情

前端如何下载文件流(代码片段)

...是如果后台返回的是文件流,那么前端就需要做一些处理;其实前端处理的核心:就是将文件流转为文件,然后再模拟点击,实现前者的效果。步骤1.封装一个下载工具这个工具的作用就是&# 查看详情

前端接收后端返回的文件流导出excel(代码片段)

需求:接收后端返回的文件流导出Excel自己项目中遇到过,亲测有效情况二使用过程中解决的问题:1.直接接受的文件流下载格式为txt且乱码。需要通过下面这句代码来转成Excel:leturl=newBlob([xmlHttp.response],type:‘application/vnd.ms-excel... 查看详情

js将后端返回的文件流导出为excel,并自定义下载文件名(代码片段)

...常会出现导出excel表格功能;点击导出按钮,请求后端接口,需要将接口返回的文件流导出为excel,实现前端下载excel文件。但是,返回的数据获取response时出现乱码,如图:二.实现思路调用后端下载接... 查看详情

js将后端返回的文件流导出为excel,并自定义下载文件名(代码片段)

...常会出现导出excel表格功能;点击导出按钮,请求后端接口,需要将接口返回的文件流导出为excel,实现前端下载excel文件。但是,返回的数据获取response时出现乱码,如图:二.实现思路调用后端下载接... 查看详情

前端如何下载文件流(代码片段)

...是如果后台返回的是文件流,那么前端就需要做一些处理;其实前端处理的核心:就是将文件流转为文件,然后再模拟点击,实现前者的效果。步骤1.封装一个下载工具这个工具的作用就是,将获取的文件... 查看详情

后端返回pdf文件流,前端处理展示及打印(补:pdf多页不显示问题)(代码片段)

国庆突如其来的加班q.q,上午接到的需求,只能起床啦自己也是第一次接触这种业务需求,进行了一顿cv大法,网上有很多版本,个人学习借鉴(cv)了一下,在这里做个学习记录,欢迎各位指... 查看详情