chrome浏览器点击下载文件图片类型等文件会在新窗口预览解决方案

核心代码：

html:

<a onclick="Download()">多文件下载</a>
 <ul class="file-list">
       <li class="file-item">
           <a onclick="ImageDown(this)" url="/Resource/AssetTaskFile/20190319/ace55683-7623-4fca-87e1-1f9dbed25533.jpg">
                 <span class="title">get_img.jpg</span>
                  <time>2019-03-19 20:25</time>
             </a>
         </li>
         <li class="file-item active">
             <a onclick="ImageDown(this)"  url="/Resource/AssetTaskFile/20190319/32c8f8fe-3bf5-45e3-a1d6-41f4b66d9e08.jpg">
                   <span class="title">get_img.jpg</span>
                     <time>2019-03-19 20:28</time>
              </a>
          </li>
  </ul>

//图片下载 （单个文件,只是图片，不需要后端操作）
   function ImageDown(obj) {
       var url = $(obj).attr('url');
       var name = $(obj).attr('name');
       var image = new Image()
       // 解决跨域 Canvas 污染问题
       image.setAttribute('crossOrigin', 'anonymous')
       image.onload = function () {
           var canvas = document.createElement('canvas')
           canvas.width = image.width
           canvas.height = image.height

           var context = canvas.getContext('2d')
           context.drawImage(image, 0, 0, image.width, image.height)
           var url = canvas.toDataURL('image/png')

           // 生成一个a元素
           var a = document.createElement('a')
           // 创建一个单击事件
           var event = new MouseEvent('click')

           // 将a的download属性设置为我们想要下载的图片名称，若name不存在则使用‘下载图片名称’作为默认名称
           a.download = name // '下载图片名称'
           // 将生成的URL设置为a.href属性
           a.href = url

           // 触发a的单击事件
           a.dispatchEvent(event)
       }

       image.src = url
       
   }

//多文件下载(任意类型文件，需要后端返回)
    function Download () {

       $("li").each(function (i, v) {

           setTimeout(function () {
               var url = $(v).find("a").attr("url")
               var name = $(v).find("span").text()
               location.href = "/Utility/FileDown?url=" + url + "&filename=" + name
           },1000*i)
          
       })
   }

c#控制器处理：

        /// <summary>
        /// 文件下载
        /// </summary>
        /// <param name="url"></param>
        /// <param name="filename"></param>
        /// <returns></returns>
        [HttpGet]
        public EmptyResult FileDown(string url, string filename)
        {

            url = Server.MapPath(HttpUtility.UrlDecode(url));//路径 
            FileStream fs = new FileStream(url, FileMode.Open);
            byte[] bytes = new byte[(int)fs.Length];
            fs.Read(bytes, 0, bytes.Length);
            fs.Close();

            Response.ContentType = "application/octet-stream";
            Response.AddHeader("Content-Disposition", "attachment;  filename=" + HttpUtility.UrlEncode(filename, System.Text.Encoding.UTF8));
            Response.BinaryWrite(bytes);
            Response.Flush();
            Response.End();

            //注释掉的那种方法也可以！！
            //url = Server.MapPath(HttpUtility.UrlDecode(url));//路径 
            //FileInfo fileinfo = new FileInfo(url);
            //Response.Clear();         //清除缓冲区流中的所有内容输出
            //Response.ClearContent();  //清除缓冲区流中的所有内容输出
            //Response.ClearHeaders();  //清除缓冲区流中的所有头
            //Response.Buffer = true;   //该值指示是否缓冲输出，并在完成处理整个响应之后将其发送
            //Response.AddHeader("Content-Disposition", "attachment;filename=" + filename);
            //Response.AddHeader("Content-Length", fileinfo.Length.ToString());
            //Response.AddHeader("Content-Transfer-Encoding", "binary");
            //Response.ContentType = "application/octet-stream";  //获取或设置输出流的 HTTP MIME 类型
            //Response.ContentEncoding = System.Text.Encoding.GetEncoding("gb2312"); //获取或设置输出流的 HTTP 字符集
            //Response.TransmitFile(url);
            //Response.End();

            return new EmptyResult();
        }

最后编辑于：2019.04.01 15:08:40

chrome浏览器点击下载文件 图片类型等文件会在新窗口 预览 解决方案

chrome浏览器点击下载文件图片类型等文件会在新窗口预览解决方案