zoukankan      html  css  js  c++  java
  • js实现单文件以及多文件下载

    <script type="text/javascript">
    /**
    * Javascript 多文件下载
    * @author Barret Lee
    * @email barret.china@gmail.com
    */
    var Downer = (function(files){
    var h5Down = !/Trident|MSIE/.test(navigator.userAgent);

    /**
    * 在支持 download 属性的情况下使用该方法进行单个文件下载
    * @param {String} fileName
    * @param {String|FileObject} contentOrPath
    * @return {Null}
    */
    function downloadFile(fileName, contentOrPath){
    var aLink = document.createElement("a"),
    evt = document.createEvent("HTMLEvents"),
    isData = contentOrPath.slice(0, 5) === "data:",
    isPath = contentOrPath.lastIndexOf(".") > -1;

    // 初始化点击事件
    evt.initEvent("click",false,false);

    // 添加文件下载名
    aLink.download = fileName;

    // 如果是 path 或者 dataURL 直接赋值
    // 如果是 file 或者其他内容,使用 Blob 转换
    aLink.href = (isPath || isData) ? contentOrPath
    : URL.createObjectURL(new Blob([contentOrPath]));

    aLink.dispatchEvent(evt);
    }

    /**
    * [IEdownloadFile description]
    * @param {String} fileName
    * @param {String|FileObject} contentOrPath
    */
    function IEdownloadFile(fileName, contentOrPath, bool){
    var isImg = contentOrPath.slice(0, 10) === "data:image",
    ifr = document.createElement('iframe');

    ifr.style.display = 'none';
    ifr.src = contentOrPath;

    document.body.appendChild(ifr);

    // dataURL 的情况
    isImg && ifr.contentWindow.document.write("<img src='" +
    contentOrPath + "' />");

    // 保存页面 -> 保存文件
    // alert(ifr.contentWindow.document.body.innerHTML)
    if(bool){
    ifr.contentWindow.document.execCommand('SaveAs', false, fileName);
    document.body.removeChild(ifr);
    } else {
    setTimeout(function(){
    ifr.contentWindow.document.execCommand('SaveAs', false, fileName);
    document.body.removeChild(ifr);
    }, 0);
    }
    }

    /**
    * [parseURL description]
    * @param {String} str [description]
    * @return {String} [description]
    */
    function parseURL(str){
    return str.lastIndexOf("/") > -1 ? str.slice(str.lastIndexOf("/") + 1) : str;
    }

    return function(files){
    // 选择下载函数
    var downer = h5Down ? downloadFile : IEdownloadFile;

    // 判断类型,处理下载文件名
    if(files instanceof Array) {
    for(var i = 0, l = files.length; i < l ; i++)
    // bug 处理
    downer(parseURL(files[i]), files[i], true);
    } else if(typeof files === "string") {
    downer(parseURL(files), files);
    } else {
    // 对象
    for(var file in files) downer(file, files[file]);
    }
    }

    })();


    function down1(){
    Downer("http://115.28.175.148/test/files/12_12.xml");
    }

    function down2(){
    Downer(["../file/test.txt","../file/test.txt"]);
    }
    </script>

    <a href="javascript:" onclick="down1(); return false;">单文件下载</a>

    <a href="javascript:" onclick="down2(); return false;">多文件下载</a>

  • 相关阅读:
    我开发的Quartz Cron表达式生成器
    web前端css定位position和浮动float
    ecmall模板编辑中的标题如何自定义读取
    记录一个项目的需求探讨过程
    这些记录
    今日工作总结:jquery轮转效果的集成与前台页面banner的设计思路总结
    小问题总结:鼠标点击到输入框(input)里的时候,输入框的提示消失,鼠标再移开,输入框提示出现
    web app与app的区别,即html5与app的区别
    3月初的日记:网站工作记录
    [接口]支付宝接口开发集成支付环境开发总结
  • 原文地址:https://www.cnblogs.com/lovedream/p/4088731.html
Copyright © 2011-2022 走看看