javascript以post方式实现文件的导出或下载

当用GET方式来实现文件(excel、pdf、doc)导出或下载的时候,传参比较简单直接放到url里面,常用的导出方法有:

1>window.open(url参数),来实现文件的导出。

2>动态添加a标签,<a target="_blank" href="url参数"></a>来实现文件的导出。

当使用post来实现文件导出或下载的时候传参是一个问题,要知道不管是window.open还是a标签只能get方式请求,在网上查找了关于用post实现传参来导出文件或下载,然而并没有合适的解决办法。查了javascript权威指南结合自己的项目,找到了一种非常非常非常好的方法来实现文件以GET方式导出。长话短说,下面是解决方案:

所有浏览器都支持XMLHttpRequest对象(不了解的童鞋查看javascript权威指南),它定义了用脚本操作HTTP的API。这个API包含实现POST请求的能力。XHR2还定义了一种将URL指定的内容以Blob(二进制)的形式下载下来。

例子:使用XMLHttpRequest下载Blob

function(){

var xhr = new XMLHttpRequest();//创建新的XHR对象
xhr . open ( 'post' , url );//指定获取数据的方式和url地址
xhr. setRequestHeader( 'Content-Type', 'application/json; charset=UTF-8')
xhr. responseType = 'blob';//以blob的形式接收数据,一般文件内容比较大
xhr. onload = function( e) {
var blob = this. response;//Blob数据
if ( this. status == 200) {
if ( blob && blob. size > 0) {
saveAs( blob, fileName);//处理二进制数据,让浏览器认识它
}
}

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js是一个流行的前端框架,可以轻松地进行数据交互和网络请求。对于导出文件post方式,主要涉及到发送POST请求和处理导出文件的响应。 首先,我们需要使用Vue的axios库或者其他网络请求库发送POST请求。可以使用axios的post方法发送POST请求,并传递相应的参数和数据。比如: ```javascript import axios from 'axios'; export default { methods: { exportData() { // 设置请求头信息 const config = { responseType: 'blob', // 指定响应的数据类型为二进制流 }; // 向服务器发送POST请求 axios.post('/export', { data: '需要导出的数据' }, config) .then(response => { // 处理导出文件的响应 this.downloadFile(response.data); }) .catch(error => { console.error(error); }); }, downloadFile(data) { // 创建一个a标签,将二进制流设置为其href属性 const blob = new Blob([data]); const url = window.URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; // 设置导出文件的名称 link.download = '导出文件名称.xlsx'; // 模拟点击a标签进行下载 link.click(); // 释放URL对象 window.URL.revokeObjectURL(url); }, }, }; ``` 上述代码中,我们使用了axios的post方法向服务器发送POST请求。在请求的配置中,通过设置responseType属性为'blob',告诉服务器返回的数据是一个二进制流。然后,在请求成功的回调函数中,调用downloadFile方法处理导出文件的响应。 downloadFile方法中,我们首先创建一个Blob对象,并将服务器返回的二进制流数据传入其中。然后,使用URL.createObjectURL方法创建一个临时URL,将a标签的href属性设置为该URL,进而生成下载链接。最后,使用模拟点击a标签的方式进行文件下载,并通过URL.revokeObjectURL方法释放URL对象。 这样,使用Vue的post方式就可以导出文件了。具体的导出文件格式和文件名称可以根据实际需求进行设置。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值