前端下载

1.前言

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

---

2. a标签

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

    下载doc
    下载压缩包文件
    下载txt
    
    下载图片

    下载远程的文件,注意跨域问题

---

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.下载数据

       // 参数为: 内容 文件名
        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");
        }

---

7.下载插件

文件下载
文件下载2
文件下载插件-1
文件下载插件-2
上传accept类型
文件上传
文件上传
FileReader对象文档
FileReader
FileReader
formData对象

formData ajax提交表单
form ajax

ajax上传显示进度
ajax-上传进度

ajax多张图片上传

还有百度的一些插件 Web Uploader 等

---

参考资料

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;

如果能帮助到有缘人,非常的荣幸,一切都是为了部落的崛起

共勉