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({
            //自己加的头信息全都要转成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();
    },