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

最新推荐文章于 2024-10-16 10:07:25 发布

原创最新推荐文章于 2024-10-16 10:07:25 发布 · 2.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue下载excel

JAVA 专栏收录该内容

317 篇文章

订阅专栏

这篇博客展示了如何在前端利用fetch API和js-cookie库，结合后端接口，实现点击按钮导出Excel文件（xlsx格式）。通过获取Authorization cookie，设置请求头并处理响应为blob，最终创建并触发下载链接完成文件下载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import Cookie from 'js-cookie'

界面：

       <a-button
          slot="extra"
          type="primary"
          @click="exportFile"
          ><a-icon type="download" />导出</a-button>

js方法

      exportFile() {
          fetch('http://127.0.0.1:8765/course/exportCourse/33', {
              method: 'GET',
              headers: new Headers({
                  'Authorization': Cookie.get('Authorization') 
              }),
          })
         .then(res => res.blob())
         .then(data => {
              const blobUrl = window.URL.createObjectURL(data);
              const a = document.createElement('a');
              a.download = this.fileName+'.xlsx';
              a.href = blobUrl;
              a.click();
      });
      },

关注博主即可阅读全文