zoukankan      html  css  js  c++  java
  • js下载文件

    而是说的:你已知一个下载文件的后端接口,前端如何请求该接口,实现点击按钮、下载文件到本地。(可以是zip啦、excel啦都是一样)

    有两个方法:window.open()和通过form表单来提交。

    在线例子:https://hamupp.github.io/gitblog/app/jsBasic/jsButtonDownloadFile/index.html

    方法一:window.open("下载文件的后端接口");

    *html结构*

    <button type="button" id="btn1">下载一个zip(方法1)</button>
    <button type="button" id="btn2">下载一个zip(方法2)</button>

    /*js部分*/

    复制代码
    var $eleBtn1 = $("#btn1");
            var $eleBtn2 = $("#btn2");
    
            //已知一个下载文件的后端接口:https://codeload.github.com/douban/douban-client/legacy.zip/master
            //方法一:window.open()
            $eleBtn1.click(function(){
                window.open("https://codeload.github.com/douban/douban-client/legacy.zip/master");
            });
    复制代码

    然而有个问题:浏览器会打开一个新窗口,然后迅速自动关闭,体验非常不好。

    方法二:通过form提交

    由于ajax函数的返回类型只有xml、text、json、html等类型,没有“流”类型,所以通过ajax去请求该接口是无法下载文件的,所以我们创建一个新的form元素来请求接口。

    /*js部分*/

    复制代码
    //方法二:通过form
            $eleBtn2.click(function(){
                var $eleForm = $("<form method='get'></form>");
    
                $eleForm.attr("action","https://codeload.github.com/douban/douban-client/legacy.zip/master");
    
                $(document.body).append($eleForm);
    
                //提交表单,实现下载
                $eleForm.submit();
            });
    复制代码
  • 相关阅读:
    程序员的基本修养之二
    jQuery学习之二
    面向对象程序的设计模式
    Mysql的复杂语句
    养成良好的做事风格
    前端模板学习bootstrap
    23. Merge k Sorted Lists
    953. Verifying an Alien Dictionary
    Daily Coding Problem: Problem #541
    396. Rotate Function
  • 原文地址:https://www.cnblogs.com/yelongsan/p/7776575.html
Copyright © 2011-2022 走看看