vue 使用post/get 下载导出文件

最新推荐文章于 2024-06-06 10:02:08 发布
最新推荐文章于 2024-06-06 10:02:08 发布
阅读量1.1w 收藏 21
点赞数 7
分类专栏： 前端_js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011301203/article/details/102629952
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>前端项目下载导出文件</title>
	</head>
	<body>
		<script>
			
		/**
		 * post 方式 
		 * 返回：文件流
		 * 好处：可以自己修改文件名称 方便调试
		 */
	    let params ={           
			ListData : this.ListData         
		}
      	_this.$http.post(url,params,{responseType:"arraybuffer"} //必须添加项
        ).then(function(res) {
            console.log(res)
            var blob = new Blob([res.data], {type: 'application/msword;charset=utf-8'});
            var filename = "download.doc";
            var a = document.createElement('a');
            var url = window.URL.createObjectURL(blob);
            a.href = url;
            a.download = filename;
            var body = document.getElementsByTagName('body')[0];
            body.appendChild(a);
            a.click();
            body.removeChild(a);
            window.URL.revokeObjectURL(url);
		}
		
		/**
		 * get 方式
		 * 返回：文件流
		 * 好处：前台什么都不需要处理 完全后台处理
		 * 缺点：不变调试（需要确保后台接口稳定）
		 */
		let exportURL = `api/sysLog/export?content=${content}&ip=${ip}`;
      	window.open(exportURL, "_blank")
		
		</script>
	</body>
</html>

 

心郎
关注
  • 7
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue实现导出二进制流(blob)文件（get请求）
前端-尔嵘
01-21 4827
说明：该导出主要是基于后端做的，前端拿到二进制blob文件流。方法三: 兼容IE和谷歌、火狐浏览器。方法二：导出后需要用execl打开。方法一：导出后直接打开的是表格。
vue 使用post/get 下载导出文件操作
10-14
主要介绍了vue 使用post/get 下载导出文件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
前端 Vue 操作文件方法（导出下载、图片压缩、文件上传和转换）
最新发布
无解的菜鸟晖 的博客
06-06 1645
本文对前端 Vue 项目开发过程中，经常遇到要对文件做一些相关操作，比如：文件导出下载、文件上传、图片压缩、文件转换等一些处理方法进行归纳整理，方便后续查阅和复用。1、后端的文件导出接口，返回数据是文件流 blob，转成 url 链接下载；2、后端接口返回数据是文件下载的 url 链接；3、文件 file 或文件流 blob 转成 base64；4、base64 转成文件 file 或文件流 blob；5、压缩图片文件的方法封装；6、通过第三方库image-conversion 压缩图片；7、前端上传图片
vue中post和get方式导出文件
weixin_40305713的博客
07-29 2491
execl表格导出在后台管理系统中非常常见，记录一下vue项目中通过get和post调用后端接口导出文件 一、get方式请求接口 1、window.location.href = host + '/api/XXX/XXX' 2、window.open( host + '/api/XXX/XXX') 3、 let link = document.createElement('a') link.href = host + '/api/XXX/XXX' link.downloa
vue post/get请求下载文件
我的个人博客
07-21 1783
vue axios post/get 请求下载文件 $http({ method: 'post', url: 'url地址', data: "参数", responseType: 'blob',//服务器返回的数据类型 }).then(res=>{ let url = window.URL.createObjectURL(res.data); let a = document.createElement("a"); a.href = ur.
Vue 导出功能
热门推荐
尹小姐的博客
12-01 1万+
vue 导出excel表功能1.需要安装三个依赖：npm install -S file-saver xlsx npm install -D script-loader2.项目中新建一个文件夹：（vendor—名字任取） 里面放置两个文件Blob.js和 Export2Excel.js。 下载点击Blob.js和 Export2Excel.js文件3.HTML部分：增加导出按钮<el-butto
vue+axios实现post文件下载
12-13
本文实例为大家分享了vue+axios实现post文件下载的具体代码，供大家参考，具体内容如下 功能：点击导出按钮，提交请求，下载excel文件； 这里是axios的post方法。get方法请点击这里=》here  第一步：跟后端童鞋确认...
vue，html转pdf,下载导出及打印
08-09
在本文中，我们将介绍如何使用 Vue.js 实现 HTML 转 PDF 下载导出及打印。这个功能可以在项目中实现报表下载、打印等功能。本文将从插件安装、图片转换、HTML 转换为 PDF、PDF 下载和打印等方面进行详细介绍。 一、...
Vue+axios+WebApi+NPOI导出Excel文件实例方法
10-16
2. **导出Excel按钮事件**：点击导出时，使用axios发起GET请求，设置`responseType: 'blob'`，并在IE兼容性处理中将blob转换为文件： ```javascript exportExcel() { let params = {}; let p = this....
VUE实现下载并导出excel文件（下载后台返回的文件流）
weixin_57246557的博客
09-01 875
VUE实现下载并导出excel文件（下载后台返回的文件流）
axios POST方式下载文件乱码解决以及浏览器兼容
南乡人的博客
12-05 1881
get方式获取 获取到data后，直接置于a标签的hreft属性中即可 POST方式 先设置responseType为blob，对象随后对返回的数据进行Blob处理，再创建a标签模拟点击下载。 值得注意的是，如果你的项目中使用了mock数据，那么会覆盖你的responseType的设置，因此，你需要密切关注返回的数据是个Blob对象还是Json格式 具体代码如下 axios({ ...
vue3 全局下载文件方法
qq_42962459的博客
03-05 1175
code : ''page : ''
vue get和post方式导出文件 兼容ie9
WaiKam_Lau的博客
09-08 435
将方法封装成公用的方法，自己放在自己的公用方法文件里，然后直接调用即可 // post 方法导出文件 const postExport = (data, name) => { // data要导出的内容，name是文件名，固定可以自己在这里定义好 const csvData = new Blob([data], { type: 'application/x-xlsx' }) const file_name = name + '.xlsx' // ie浏览器 if (window.navig
angular2/angular4 如何通过$http的post方法请求下载二进制的Excel文件
weixin_30797199的博客
06-15 300
时间有限,废话就不多说了,直接上干货! 下面给大家介绍一下我遇到的一个坑,如果你也遇到了,那恭喜你,你一定能找到答案:angular2/angular4 如何通过$http的post方法请求下载二进制的Excel文件? (angular1自行百度) 问题描述: 后台返回的是一个二进制的Excel流,请求头如下: Access-Control-Allow-Origin:* C...
post 下载文件
guoying_nice的博客
03-18 133
download(params,filename){ showdownLoading() let tooldata = {'toolsID': params, 'token': this.token, 'sname': this.$getCode(this.sname)} this.$http.post('http://127.0.0.1:5000/down_tools', tooldata,{responseType: 'blob'}).then((respon...
vue如何通过$http的post方法请求下载二进制的Excel文件
xiuxialala的博客
01-15 925
使用此function。
java http 下载_java通过http方式下载文件
weixin_33904522的博客
02-12 605
packagecom.qiyi;importjava.io.BufferedReader;importjava.io.IOException;importjava.io.InputStreamReader;importjava.io.PrintWriter;importjava.net.URL;importjava.net.URLConnection;importjava.util.List;im...
HTTP中通过get方法下载文件
weixin_38299404的博客
07-08 4208
http下载文件的本质就是在响应体中拿到响应数据并写入到文件的操作，第二种方式是实现了一个实时显示下载进度的功能 package main import ( "fmt" "io" "net/http" "os" ) func downloadFile(url, fileName string) { resp, err := http.Get(url) if err != nil { panic(err) } defer func() {_ =
springboot+vue 导出excel
10-12
可以使用Apache POI库来实现在Spring Boot和Vue中导出Excel。具体步骤如下： 1. 在后端使用POI库创建Excel文件并填充数据。 2. 将Excel文件转换为字节数组。 3. 在前端使用axios发送POST请求，将字节数组作为响应体返回。 4. 在前端使用file-saver库将响应体保存为Excel文件。 以下是一个简单的示例代码： 后端代码： ```java @GetMapping("/export") public ResponseEntity<byte[]> exportExcel() throws IOException { // 创建Excel文件并填充数据 Workbook workbook = new XSSFWorkbook(); Sheet sheet = workbook.createSheet("Sheet1"); Row row = sheet.createRow(0); Cell cell = row.createCell(0); cell.setCellValue("Hello World!"); // 将Excel文件转换为字节数组 ByteArrayOutputStream outputStream = new ByteArrayOutputStream(); workbook.write(outputStream); byte[] bytes = outputStream.toByteArray(); // 设置响应头 HttpHeaders headers = new HttpHeaders(); headers.setContentDispositionFormData("attachment", "example.xlsx"); headers.setContentType(MediaType.APPLICATION_OCTET_STREAM); return new ResponseEntity<>(bytes, headers, HttpStatus.OK); } ``` 前端代码： ```javascript import axios from 'axios'; import { saveAs } from 'file-saver'; export function exportExcel() { axios({ url: '/api/export', method: 'GET', responseType: 'arraybuffer' }).then(response => { const blob = new Blob([response.data], { type: 'application/vnd.ms-excel' }); saveAs(blob, 'example.xlsx'); }); } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值