• 注册
  • 网络编程
  • 今日 0
  • 帖子 12
  • 关注 1
  • 热门论坛

  • 玩游戏赚钱
    玩游戏赚钱
    游戏赚钱版块,提供可以赚钱的网络游戏,专注于挖掘电脑端游与手游赚钱方法。欢迎关注和阅读游戏赚钱分类的精彩内容。
  • 商机发布交流
    商机发布交流
    本站为本站会员提供DNF商机倒卖囤货发布交流
  • 网赚项目
    网赚项目
    为您免费提供网赚项目、最新赚钱项目,不收取任何费用,只要您用心就能赚到钱!
    • 支付宝
    • QQ
    • 微信

    游赚笔记坚持一个资源共享的理念来供应大家学习游赚网赚,也因此,游赚笔记不能像其他站一样来获得收益。如果你不想让本站倒闭,可以选择充值金币或者开通会员,如果你什么都不需要,你也可以扫上面的二维码,直接支持游赚笔记!(注:捐款时,请备注捐助后面跟上用户名,例:捐助-游赚笔记)

    点我加入本站交流群

    BBS JavaScript 关注:1 内容:12

    JS端基于download.js实现图片、视频时直接下载而不是打开预览

  • 查看作者
  • 打赏作者
  • 拉黑名单
  • 当前位置: 游赚笔记 > 网络编程 > JavaScript > 正文
    lv.25
    宇宙之主
    巴菲特

    项目中的附件列表,通常情况都需要提供下载、删除的功能,功能本身没有什么要说的,都是基本功能,使用浏览器的的下载功能,也都是用window.open(url),或者window.location.href=url的方式,url即为附件下载接口,浏览器自动解析,如果是图片、视频、txt等格式的会直接预览文件,而不是像docx、xlsx一样直接下载,项目中为了功能明确,将预览单独加了一个查看按钮,下载按钮要实现无论什么文件格式都直接下载。

    JS端基于download.js实现图片、视频时直接下载而不是打开预览

    有两种方式处理:

    一.后台接口层面处理:(比较常见)

    响应头中添加标识:
    Response.AddHeader("Content-Disposition", "attachment; filename=" +
    HttpUtility.UrlEncode(annotation.FileName, System.Text.Encoding.UTF8));

    JS端基于download.js实现图片、视频时直接下载而不是打开预览

    添加后,浏览器就会全都直接下载,不区分文件格式

    二.前端JS使用XMLHttpRequest结合download.js处理

    1)首先页面中需要引用download.js

    download官方:http://danml.com/download.html

    http://danml.com/js/download2.js

    2)公共方法

    /*
        * 使用download.js 强制浏览器下载图片、视频等文件
        * @param {any} url url链接地址
        * @param {any} strFileName 文件名
        * @param {any} strMimeType 文件类型
        * dzl
        * 2020年5月8日
         */
        function downloadfile(url, strFileName, strMimeType) {
          var xmlHttp = null;
          if (window.ActiveXObject) {
            // IE6, IE5 浏览器执行代码
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
          } else if (window.XMLHttpRequest) {
            // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlHttp = new XMLHttpRequest();
          }
          //2.如果实例化成功,就调用open()方法:
          if (xmlHttp != null) {
            xmlHttp.open("get", url, true);
            xmlHttp.responseType = 'blob';//关键
            xmlHttp.send();
            xmlHttp.onreadystatechange = doResult; //设置回调函数
          }
          function doResult() {
            if (xmlHttp.readyState == 4) { //4表示执行完成
              if (xmlHttp.status == 200) { //200表示执行成功
                download(xmlHttp.response, strFileName, strMimeType);
              }
            }
          }
        }

    注意: xmlHttp.responseType = 'blob';是关键,必须要设置

    3)下载按钮点击事件中调用公共方法

    downloadfile(url, filename, getFileType(filename))

    附上根据文件名的尾缀 返回文件类型的公共方法:

    /*
     * 根据文件名的尾缀 返回文件类型
     * @param {any} fileName 文件名
     * dzl
     * 2020年5月9日
     */
    function getFileType(fileName) {
      // 后缀获取
      let suffix = '';
      // 获取类型结果
      let result = '';
      try {
        const flieArr = fileName.split('.');
        suffix = flieArr[flieArr.length - 1];
      } catch (err) {
        suffix = '';
      }
      // fileName无后缀返回 false
      if (!suffix) { return false; }
      suffix = suffix.toLocaleLowerCase();
      // 图片格式
      const imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif'];
      // 进行图片匹配
      result = imglist.find(item => item === suffix);
      if (result) {
        return 'image';
      }
      // 匹配txt
      const txtlist = ['txt'];
      result = txtlist.find(item => item === suffix);
      if (result) {
        return 'txt';
      }
      // 匹配 excel
      const excelist = ['xls', 'xlsx'];
      result = excelist.find(item => item === suffix);
      if (result) {
        return 'excel';
      }
      // 匹配 word
      const wordlist = ['doc', 'docx'];
      result = wordlist.find(item => item === suffix);
      if (result) {
        return 'word';
      }
      // 匹配 pdf
      const pdflist = ['pdf'];
      result = pdflist.find(item => item === suffix);
      if (result) {
        return 'pdf';
      }
      // 匹配 ppt
      const pptlist = ['ppt', 'pptx'];
      result = pptlist.find(item => item === suffix);
      if (result) {
        return 'ppt';
      }
      // 匹配 视频
      const videolist = ['mp4', 'm2v', 'mkv', 'rmvb', 'wmv', 'avi', 'flv', 'mov', 'm4v'];
      result = videolist.find(item => item === suffix);
      if (result) {
        return 'video';
      }
      // 匹配 音频
      const radiolist = ['mp3', 'wav', 'wmv'];
      result = radiolist.find(item => item === suffix);
      if (result) {
        return 'radio';
      }
      // 其他 文件类型
      return 'other';
    }

    js文件下载插件介绍和使用方法 download.js

    在前端想要生成txt或者其他格式文件来保存一些数据,或者在数据请求服务器成功后想要将数据生成文件并下载,这些需求还是比较多的,这里使用到的download.js。既可以满足这些需求。

    第一步:下载
    1.下载可以在官网上进行下载 原网址:download2.js
    2.也可以使用我上传的资源(下载与上述官网) 免费哦! 下载

    第二步:引用
    1.将下载的文件放在项目中,并使用 <script src="./download2.js"></script> 进行引用 (速度快)
    2.使用网络引用 <script src="http://danml.com/js/download2.js"></script>

    第三步:开始使用

    //生成一个txt的文件,讲字符串变量 str 的内容放在里面,并完成下载
    var str = "hello world可以中文吗?答案:可以的";
    download(str, "Text.txt", "text/plain");
     
    //也将生成一个txt文件,和上面的结果是一摸一样
    str = "data:text/plain,hello%20world";
    download(str, "dlDataUrlText.txt", "text/plain");
     
    //将数组或者json对象写入到文件中
    var debug = {hello : "world"};
    var blob = new Blob([JSON.stringify(debug, null, 2)]);
    download(blob, "dlTextBlob.txt", "text/plain");
     
    var str= "hello world", arr= new Uint8Array(str.length);
    str.split("").forEach(function(a,b){
      arr[b]=a.charCodeAt();
    });
    download( arr, "textUInt8Array.txt", "text/plain" );
     
    //将html页面中的一部分生成单独的 html文档
    download(document.body.outerHTML, "dlHTML.html", "text/html");
     
    //给字符串添加标签,或者html片段直接给方法,将会生成对应内容的文件
    download(new Blob(["hello world".bold()]), "dlHtmlBlob.html", "text/html");
     
     //将ajax查询回来的结果,赋值给文件,并下载
    $.ajax({
      url: "/download.html",
      success: download.bind(true, "text/html", "dlAjaxCallback.html")
    });
     
    //将图片的base64装入到图片中并下载。
    download("data:image/gif;base64,R0lGODlhRgAVAIcAAOfn5+/v7/f39yH5BAAAAP8ALAAAAABGABUAAAj/AAEIHAgggMGDCAkSRMgwgEKBDRM+LBjRoEKDAjJq1GhxIMaNGzt6DAAypMORJTmeLKhxgMuXKiGSzPgSZsaVMwXUdBmTYsudKjHuBCoAIc2hMBnqRMqz6MGjTJ0KZcrz5EyqA276xJrVKlSkWqdGLQpxKVWyW8+iJcl1LVu1XttafTs2Lla3ZqNavAo37dm9X4eGFQtWKt+6T+8aDkxUqWKjeQUvfvw0MtHJcCtTJiwZsmLMiD9uplvY82jLNW9qzsy58WrWpDu/Lp0YNmPXrVMvRm3T6GneSX3bBt5VeOjDemfLFv1XOW7kncvKdZi7t/S7e2M3LkscLcvH3LF7HwSuVeZtjuPPe2d+GefPrD1RpnS6MGdJkebn4/+oMSAAOw==", "dlDataUrlBin.gif", "image/gif");
     
    //使用xhr获取本域名下文件,并封装到文件进行下载。这里的前提是xhr访问的文件必须和该程序执行在同一域名下,
    //否则会报跨域的问题。比如此程序执行在localhost下面,而这里的访问地址使用的是http://danml.com,就会访问不成功。
      var x=new XMLHttpRequest();
      x.open("GET", "http://danml.com/wave2.gif", true);
      x.responseType = 'blob';
      x.οnlοad=function(e){
        download(x.response, "dlBinAjax.gif", "image/gif" );
      };
      x.send();

    扩展:还可以使用文件上传再下载进行测试。

    <input id="file" type="file" οnchange="download(this.files[0], this.files[0].name, this.files[0].type)">

    请登录之后再进行评论

    登录
  • 发表内容
  • QQ交流群DNF内部技术交流
  • 做任务
  • 实时动态
  • 返回顶部