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

最新推荐文章于 2024-08-20 18:30:57 发布

再希

最新推荐文章于 2024-08-20 18:30:57 发布

阅读量7.6k

点赞数 2

分类专栏： vue 文章标签： Vue.js fetch HTTP header 文件下载本地存储

本文链接：https://blog.csdn.net/liuzaixi/article/details/116062071

版权

vue 专栏收录该内容

27 篇文章 4 订阅

订阅专栏

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

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

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

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

handleDownLoad() {
      fetch('xxxx', {
          method: 'GET',
          headers: new Headers({
            //自己加的头信息全都要转成string
            id: 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();
    },