vue中a标签实现带header的下载

简单介绍一下，这个是想用a标签请求接口下载文件，请求接口动态添加header请求头

1、在按钮上添加点击事件

<el-button type="backinfo" size="mini" @click="handleDownLoad">资源导出</el-button>

2、在methods中写以下两个方法

handleDownLoad() {fetch('xxxx', {method: 'GET',headers: new Headers({//自己加的头信息全都要转成stringid: xxxx.toString(),'ACCESS-TOKEN': window.localStorage.getItem('ACCESS-TOKEN') as string,}),}).then(res => res.blob()).then(data => {const blobUrl = window.URL.createObjectURL(data);download(blobUrl);});},download(blobUrl) {const a = document.createElement('a');a.download = '下载后文件名' + '.csv';a.href = blobUrl;a.click();},

vue中a标签实现带header的下载相关推荐

模拟a标签实现带header的下载
function handleDownLoad() {fetch('xxxx', {method: 'GET',headers: new Headers({//自己加的头信息全都要转成stringid ...
vue中img标签onerror事件
vue中img标签onerror事件使用:onerror去绑定事件该方法能正确处理onerror事件,并防止闪图 <img type="image/x-icon" :sr ...
Vue中自定义标签及其使用
Vue中自定义标签及其使用问题需求自定义创建组件的vue文件编辑组件使用导入申明使用使用整个代码效果问题我们在使用Vue开发移动端应用程序时,常常使用Vant Weapp中的 ...
vue中img标签404错误处理事件onerror
以下为图片链接失效的情况若服务上的图片直接在浏览器上可以打开,但是在img上报404错误处理方法在index.html中添加代码如下 <meta name="referrer&qu ...
vue中img标签引用图片地址变量不显示，引入失败问题
vue中img标签,src的地址赋值给vue属性不显示 ,如图修改后写法,加上require即可原文 https://blog.csdn.net/Chris__wang/article/detai ...
vue中input标签的使用
vue中input标签的使用普通input标签 <input type="text" value="" placeholder="placeh ...
在vue中input标签手机号码进行正则验证
今天遇到一个问题就是在vue中给input进行正则手机号码的验证下面是今天的代码,用js进行书写,没有用elementUI,代码如下: <div cla ...
vue中a标签的href属性的写法
问题:vue.js a标签href里有变量,函数拼接问题 2017年05月31日 19:19:03 阅读数:19486 正确格式: <a :href ="'http://search. ...
vue中transition标签的使用（二）
transition初始渲染的过程首次过渡(appear) 首次过渡动画结束后,样式还是会回到初始的class或id设置的css样式等于只是一个开场动画注: apear只会在初始时执行一次多元 ...

vue中a标签实现带header的下载

vue中a标签实现带header的下载相关推荐

最新文章

热门文章