前端下载

2022-05-13 119

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 这个只是前端下载的一些总结具体的下载，可以看node章节，有详细介绍

1.前言

这个只是前端下载的一些总结具体的下载，可以看node章节，有详细介绍

2. a标签

a标签是最简单的下载方式 png txt jpg

<a href="01.doc" download="02.doc">下载doc</a>
    <a href="1.rar">下载压缩包文件</a>
    <a href="01.txt" >下载txt</a>
    <!-- 如果是图片  在此开启了 本地服务  download 属性如果是本地则无法实现更名  需要开启服务端  -->
    <a href="result.png" download="1.png">下载图片</a>
    <a href="https://codeload.github.com/douban/douban-client/legacy.zip/master">下载远程的文件,注意跨域问题</a>

3.location 下载

btn1.onclick = function () {
            window.location.href = "https://codeload.github.com/douban/douban-client/legacy.zip/master";
            // 两种都可以实现下载
            // window.open("https://codeload.github.com/douban/douban-client/legacy.zip/master");
        }

4.form下载

btn2.onclick = function () {
            let form = document.createElement("form");
            // 设置action属性
          form.setAttribute("action","https://codeload.github.com/douban/douban-client/legacy.zip/master");
            document.body.appendChild(form);
            // 记得提交
            form.submit();
            document.body.removeChild(form);
        }

5.下载数据

<img src="./result.png" alt="" id="img">

// 参数为: 内容 文件名
        function download1(content,fileName) {
            let el = document.createElement("a");
            // 指定文件名
            el.download = fileName;
            // 生成二进制数据的对象
            let blob = new Blob([content]);
            // 生成url
            let url = URL.createObjectURL(blob);
            el.href = url;
            el.click(); 
        }
        btn1.onclick  = function () {
            download1("这是我想下载的内容 。。。。","1.txt");
        }

6.canvas 图片下载

function download2(img,fileName) {
            let el = document.createElement("a");
             // 指定文件名
             el.download = fileName;
             let canvas = document.createElement("canvas");
             let ctx = canvas.getContext("2d");
             ctx.drawImage(img,0,0);
            //获得 base64 编码后的文件内容
            //  会出现跨域的问题 ! 记得该文件需要启动本地服务器
             let url = canvas.toDataURL();
             el.href = url;
            el.click();
        }
        btn2.onclick = function () {
            download2(img,"1.png");
        }