利用a标签来完成文件下载的两种方式

最新推荐文章于 2023-04-10 17:14:48 发布

weixin_44738624

最新推荐文章于 2023-04-10 17:14:48 发布

阅读量333

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_44738624/article/details/122490023

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 第一种：直接写文件的路径download=“文件的名称”-->
    <a href="/uploads/logo1641519953867.jpg" download="文件名称">文件名称</a>
    <!-- 第二种：用到ajax  原理是请求过来一个地址 -->
    <button>download</button>
</body>
</html>
<script src="./jquery-3.3.1.js"></script>
<script>
    $('button').click(function () {
        $.ajax({
            url: '/download',
            success: function (res) {
                console.log(res);
                let oA = document.createElement('a');
                oA.href = res.msg;
                oA.download = '文件名称';
                document.body.appendChild(oA);
                oA.click();
                document.body.removeChild(oA);
            }
        })
    })
</script>