下载功能下载链接

R_如鲸向海

于 2024-07-30 15:14:43 发布

阅读量86

点赞数 4

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_47806588/article/details/140797642

版权

在网页上动态地创建一个链接(<a>标签)，并将这个链接的href属性设置为某个URL（在这个例子中是res.data），然后模拟点击这个链接以导航到该URL，最后将这个链接从文档中移除。

获取URL：
javascript复制代码

let url = res.data;
这行代码假设res是一个对象，它包含了一个属性data，这个data属性包含了你想要导航到的URL的字符串。这个URL被赋值给了变量url。
创建<a>元素：
javascript复制代码

const link = document.createElement('a');
使用document.createElement方法创建一个新的<a>元素（即HTML中的链接标签），并将这个新创建的元素引用赋值给变量link。
设置<a>元素的href属性：
javascript复制代码

link.href = url;
这行代码将前面获取的URL（存储在变量url中）设置为这个<a>元素的href属性。href属性定义了链接的目标URL，即点击链接后浏览器会导航到的地址。
将<a>元素添加到文档的<body>中：
javascript复制代码

document.body.appendChild(link);
使用appendChild方法将<a>元素添加到文档的<body>元素中。这是必要的步骤之一，因为一些浏览器（尤其是现代浏览器）出于安全考虑，可能不会执行未添加到DOM中的链接的点击操作。
模拟点击链接：
javascript复制代码

link.click();
通过调用<a>元素的click方法，模拟用户点击这个链接。这会导致浏览器导航到链接的href属性所指定的URL。
从文档中移除<a>元素：
javascript复制代码

document.body.removeChild(link);
一旦链接被点击（并且页面开始导航或导航完成），使用removeChild方法将这个<a>元素从文档的<body>中移除。这一步是可选的，但在很多情况下，移除不再需要的元素是一个好习惯，特别是如果这些元素是动态创建的。

/** 下载按钮操作 */
    handleDown(row) {
      downloadReport({ orderId: 128 }).then((res) => {
        let url = res.data;
        const link = document.createElement('a');
        link.href = url;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      }).catch(err => {
        console.error('下载失败:', err);
      });
    },

R_如鲸向海

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
下载功能下载链接

这是必要的步骤之一，因为一些浏览器（尤其是现代浏览器）出于安全考虑，可能不会执行未添加到DOM中的链接的点击操作。这一步是可选的，但在很多情况下，移除不再需要的元素是一个好习惯，特别是如果这些元素是动态创建的。），然后模拟点击这个链接以导航到该URL，最后将这个链接从文档中移除。元素（即HTML中的链接标签），并将这个新创建的元素引用赋值给变量。属性包含了你想要导航到的URL的字符串。属性定义了链接的目标URL，即点击链接后浏览器会导航到的地址。这会导致浏览器导航到链接的。标签)，并将这个链接的。
复制链接

扫一扫

下载功能 下载链接

下载功能下载链接