js实现文件下载支持图片视频直接下载不会直接打开

根据文件路径通过js下载保存到本地，一般情况下图片、txt、视频等一些文件会直接在浏览器中打开了，没有下载到本地，虽然通过另存为可以保存文件，但是不方便，用户体验也不好，当前文章介绍两种思路。

首先看下通过js实现文件下载到本地普通方式（如果是图片就会直接打开）。

js文件下载基本方法：

/**
 * js根据文件路径将文件下载到本地方法
 */
function fileDownloadTest(fileUrl, fileName){
  if("undefined" == typeof fileUrl || !fileUrl){
	alert('文件路径不能为空');return false;
  }
  var fileUrlArr = fileUrl.split(',');
  var fileFix = "undefined" != typeof fileUrlArr[1] && fileUrlArr[1] ? fileUrlArr[1] : '';
  var link = document.createElement('a');  //创建a标签
  var body = document.querySelector('body');  //获取body元素
  link.href = fileUrl; // href赋值
  link.download = fileName+fileFix; // 下载文件名称
  link.style.display = 'none'; // fix Firefox 设置隐藏
  body.appendChild(link); // a标签添加到页面
  link.click(); //设置a标签触发单击事件
  body.removeChild(link); //移除a标签
  window.URL.revokeObjectURL(link.href); // 释放创建的对象
}

/**
 * js文件下载操作（调取文件下载方法）
 */
var fileUrl = 'test.zip'; // 文件路径（相对路径或者绝对路径）
var fileName = '测试文件'; // 命名下载后的文件名称
fileDownloadTest(fileUrl, fileName); // 执行自封装函数

方式一：canvas画图生成base64数据转blob数据流进行下载（已知文件类型为图片格式）

如果已知是图片文件，我们可以通过canvas画图的方式可以将图片转换成base64数据，通过获得的base64数据可以转换成blob二进制数据流，然后再进行文件下载（可以直接转base64然后下载的，但是有些移动端浏览器不支持base64数据下载，所以需要转二进制数据流）。

示例：

/**
 * 图片路径获得base64数据方法
 */
function getBase64Image(img) {
  var canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0, img.width, img.height);
  var ext = img.src.substring(img.src.lastIndexOf(".") 1).toLowerCase();
  var dataURL = canvas.toDataURL("image/" ext);
  return dataURL;
}

/**
 * 根据base64数据转成blob数据方法
 */
function dataURLtoBlob(dataurl) {
  var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
  bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], { type: mime });
}

/**
 * 下载方法
 */
function downloadFiles(fileUrl,fileName){
  if("undefined" == typeof fileUrl || !fileUrl){
    alert('文件路径不能为空');return false;
  }
  var image = new Image();
  image.crossOrigin = '';
  image.src = fileUrl;
  image.onload = function(){
    var base64 = getBase64Image(image);
    //console.log(base64);
    blob = dataURLtoBlob(base64);
    //console.log(blob);
    var fileUrlArr = fileUrl.split('.');
    var fileFix = "undefined" != typeof fileUrlArr[1] && fileUrlArr[1] ? '.' + fileUrlArr[1] : '';
    var link = document.createElement('a');  //创建a标签
    var body = document.querySelector('body');  //获取body元素
    fileUrl = window.URL.createObjectURL(blob);
    link.href = fileUrl; // href赋值
    link.download = fileName+fileFix; // 下载文件名称
    link.style.display = 'none'; // fix Firefox 设置隐藏
    body.appendChild(link); // a标签添加到页面
    link.click(); //设置a标签触发单击事件
    body.removeChild(link); //移除a标签
    window.URL.revokeObjectURL(link.href); // 释放创建的对象
  }
}

/**
 * 进行下载操作
 */
var fileUrl = '1.png';
var fileName = '测试图片';
downloadFiles(fileUrl,fileName);

二、模拟ajax提交生成文件流进行下载（未知文件类型，支持所有类型文件直接下载）

示例：

/**
 * 文件下载方法（支持任何格式文件）
 * fileUrl 文件路径，fileName 下载后的文件新名
 */
function fileDownloadFun(fileUrl,fileName) {
  if("undefined" == typeof fileUrl || !fileUrl){
    alert('文件路径不能为空');return false;
  }
  let fileUrlArr = fileUrl.split('.');
  let fileFix = "undefined" != typeof fileUrlArr[1] && fileUrlArr[1] ? '.' + fileUrlArr[1] : '';
  fileName = fileName+fileFix;
  // 发送http请求，将文件链接转换成文件流
  fileAjaxFun(fileUrl, function(xhr) {
  downloadFun(xhr.response, fileName)
  }, {
    responseType: 'blob'
  });
  // 发起请求
  function fileAjaxFun(url, callback, options) {
    let xhr = new XMLHttpRequest()
    xhr.open('get', url, true)
    if (options.responseType) {
      xhr.responseType = options.responseType
    }
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        callback(xhr)
      }
    }
    xhr.send();
  }
  // 进行下载
  function downloadFun(content, filename) {
    window.URL = window.URL || window.webkitURL
    let a = document.createElement('a')
    let blob = new Blob([content])
    // 通过二进制文件创建url
    let url = window.URL.createObjectURL(blob)
    a.href = url
    a.download = filename
    a.click()
    // 销毁创建的url
    window.URL.revokeObjectURL(url);
  }
}

/**
 * 文件下载调用示例（支持任何格式文件）
 */
var filePath = 'test.zip';
var fileNewName = '测试文件';
fileDownloadFun(filePath,fileNewName);