模拟a标签实现带header的下载

最新推荐文章于 2024-01-10 10:20:02 发布

骑鱼的猫咪

最新推荐文章于 2024-01-10 10:20:02 发布

阅读量1.2w

点赞数 7

CC 4.0 BY-SA版权

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/qq_39820860/article/details/104296763

前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用JavaScript Fetch API结合Blob URL实现从Web应用中下载Excel文件的方法。通过模拟a标签点击行为，实现了文件的自动下载，适用于前端开发场景。

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

function 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);
        setShareVisible(false);
      });
  }
  //模拟a标签实现下载excel文件
  function download(blobUrl: string) {
    const a = document.createElement('a');
    a.download = new Date().getTime().toString() + '.xlsx';
    a.href = blobUrl;
    a.click();
  }