vue + axios get下载文件功能

本文实例为大家分享了vue + axios 下载文件的具体代码，供大家参考，具体内容如下

这里是axios的get方法。post方法请点击这里=》here

注意点：

Herder 请求头需注意

  • content-disposition:”attachment;filename=total.xls”
  • content-type:”application/x-download;charset=utf-8”

axios请求的responseType为blob

  • responseType:'blob',

template

<button class="os_myProduct_td6Div5Btn2" @click.stop="downloadReport(item,index)">下载当天报表</button>

script

methods:{
 downloadReport(item,index){
 let date = item.plans[this.daysIndex[index]]
 let url = '/Ecp.Export.exportXls.jdn?entityId='+item.FId+'&date='+date.FDeparture_date+'&token=' + sessionStorage.getItem("token")
 this.axios({
 method:'get',
 url:url,
 responseType:'blob',
 })
 .then((data) => {
 if (!data) {
  return
 }
 debugger
 let url = window.URL.createObjectURL(data.data)
 let link = document.createElement('a')
 link.style.display = 'none'
 link.href = url
 link.setAttribute('download', 'excel.xls')
 document.body.appendChild(link)
 link.click()
 })
 },
 }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue element中axios下载文件（后端Python）

    •axios 接受文件流,需要设置 {responseType:'arraybuffer'} axios.post( apiUrl, formdata, {responseType:'arraybuffer'} ).then(res=> { if (res.status === 200) { let blob = new Blob([res.data], { type: res.headers['content-type'] }); const fileName = res.headers['c

  • Vue 中批量下载文件并打包的示例代码

    思路: 用 ajax 将文件下载, 然后用 jszip 压缩文件, 最后用 file-saver 生成文件 1. 准备工作 安装 3 个依赖: axios, jszip, file-saver yarn add axios yarn add jszip yarn add file-saver 2. 下载文件 import axios from 'axios' const getFile = url => { return new Promise((resolve, reject) => { a

  • vue + axios get下载文件功能

    vue + axios get下载文件功能

    本文实例为大家分享了vue + axios 下载文件的具体代码,供大家参考,具体内容如下 这里是axios的get方法.post方法请点击这里=>here 注意点: Herder 请求头需注意 content-disposition:"attachment;filename=total.xls" content-type:"application/x-download;charset=utf-8" axios请求的responseType为blob respo

  • vue实现点击按钮下载文件功能

    项目中需要用到文件下载功能,查了资料发现需要用到a标签的特性,但是这边需要用到点击按钮下载,懒得写样式,于是用了以下代码. <div class="btns"> <el-button size="mini" type="primary" @click="$router.push(`/portal/${item.id}/detail`)">查看软件</el-button> <el-lin

  • vue+axios+java实现文件上传功能

    vue+axios+java实现文件上传功能

    本文实例为大家分享了vue+axios+java实现文件上传的具体代码,供大家参考,具体内容如下 背景 vue.js + axios + element前端,Java后台实现的文件上传,简单例子 前端代码 document.vue <template>   <div>     <el-row class="action-row">       <el-col :span="9">         <el-butt

  • 前端vue a链接下载文件失败的问题(未发现文件)

    前端vue a链接下载文件失败的问题(未发现文件)

    目录 前端vue a链接下载文件失败(未发现文件) 错误案例 完整代码 vue点击下载的避坑指南 引入 避坑之路 blob对象 前端vue a链接下载文件失败(未发现文件) 错误案例 发现出现错误后,我们去下载内容里面看我们下载这个文件的地址 ps:ctrl + j  打开下载内容的快捷键   适用于 windows系统 可以发现这个文件夹路径不对  识别不了 我把路径写在根目录下面了 src/assets/...  ,应该把你需要下载的文件放在跟src同级的目录下或者放在publice目录里面

  • vue+django实现下载文件的示例

    vue+django实现下载文件的示例

    一.概述 在项目中,点击下载按钮,就可以下载文件. 传统的下载链接一般是get方式,这种链接是公开的,可以任意下载. 在实际项目,某些下载链接,是私密的.必须使用post方式,传递正确的参数,才能下载. 二.django项目 本环境使用django 3.1.5,新建项目download_demo 安装模块 pip3 install djangorestframework django-cors-headers 修改文件download_demo/settings.py INSTALLED_APP

  • JavaScript 用fetch 实现异步下载文件功能

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>sample</title> </head> <body> <button id='btn'>下载</button> <span id='status'></span> &

  • Android实现下载文件功能的方法

    本文所述为Android实现下载文件功能的完整示例代码,对于学习和研究android编程相信会有一定的帮助,尤其是对Android初学者有一定的借鉴价值. 完整功能代码如下: package com.test; import java.io.File; import java.io.FileOutputStream; import java.io.InputStream; import java.net.URL; import java.net.URLConnection; import and

  • PHP使用CURL实现下载文件功能示例

    本文实例讲述了PHP使用CURL实现下载文件功能.分享给大家供大家参考,具体如下: 如果使用CURL下载从微信手机端上传的图片?参考下面代码 /** * CURL下载文件 成功返回文件名,失败返回false * @param $url * @param string $savePath * @return bool|string * @author Zou Yiliang */ public function downFile($url, $savePath = './uploads') { /

  • shell脚本实现ftp上传下载文件功能

    前段时间工作中需要将经过我司平台某些信息核验数据提取后上传到客户的FTP服务器上,以便于他们进行相关的信息比对核验.由于包含这些信息的主机只有4台,采取的策略是将生成的4个文件汇集到一个主机上,然后在这台主机上将文件上传的目标ftp服务器. 1,建立主机A到其他三台主机之间的信任关系,以便于远程拷贝文件 #生成主机A的本地认证秘钥,可以选择生成rsa或者dsa类型的秘钥,这里选取rsa [root@A ~]#ssh-keygen -t rsa -P '' -f ~/.ssh/id_rsa >/d

  • php+js实现的无刷新下载文件功能示例

    本文实例讲述了php+js实现的无刷新下载文件功能.分享给大家供大家参考,具体如下: 服务器端页面 步骤就是,设置头文件参数,然后读入并输出文件.下面代码的file_get_contents可以使用fread,fclose代替. download.php <?php $filename = $_GET['filename']; $path = __DIR__."/file/".$filename; Header( "Content-type: application/o

随机推荐