分享编程~
 
js实现文件下载支持图片视频直接下载不会直接打开

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);


上一篇:js根据图片绝对路径转base64和转blob数据下一篇:js将json数据生成execl文件下载到本地
赞(1) 踩(0)
您说多少就多少,您的支持是我最大的动力
赏金
微 信
赏金
支付宝
本文连接: https://www.yj521.com/article/130.html
版权声明: 本文为原创文章,版权归《越加网》所有,分享转载请注明出处!