JS 下载文件要领分享(处理图片文件没法直接下载和 IE兼容问题)

2023年4月20日 285次阅读 来源: 没有梦想的咸鱼

场景简介

因为营业须要，常常碰到下载各种文件的需求，其中最头疼的莫过于前端下载图片了，直接给个图片文件地点会变成直接翻开图片，而不是弹窗提醒另存为，研讨了下前端完成文件下载最便利的要领照样建立 a 标签，写入download 属性完成点击下载，但这在 ie 浏览器上的完成又与平常浏览器差别，因而探索以后写了个通用的下载要领，既可用来下载文件也可下载图片，愿望可以帮到人人。

npm 装置运用

npm install –save ly-downloader

运用时需传入3个参数 download(type, data, name)：

  • type: 1 或 2（ 用于推断传入的是地点照样canvas对象 ）
  • data: type = 1 时传入文件地点； type = 2 时传入一个canvas对象（ 合营html2canvas运用 ）
  • name: 下载图片默许文件名（ type = 1 时设置”为地点默许文件名, type = 2 时 name 不能为空 ）

注：name 参数虽然只要鄙人载文件范例为图片时见效，但为防止失足都须要传入一个值
例：download(1, url, ”) 或 download(2, canvas对象, ‘图片附件’)

以 Vue 中组件运用为例

import download from 'ly-downloader'
export default {
  methods: {
    // url = '你的文件地点'
    _download (url) {
      download(1, url, '文件名')
    },
  }
}

思绪简介

  • 建立 a 标签，href 传入文件地点，download 写上文件名，触发点击事宜完成文件另存为（设置文件名对非图片范例文件无效）
  • 图片范例文件运用地点下载会直接翻开，须要将图片地点应用 canvas 猎取 baase64 花样文件，再由 base64 转换为 blob 范例，末了应用URL.createObjectURL() 要领猎取 blob 文件的地点，此范例地点传入 a 标签可完成不翻开直接下载
  • type = 2 这类状况是个人常常碰到页面截图下载的场景，合营插件html2canvas 来运用异常轻易，道理照样依据 canvas 对象一步步转换成 blob 对象

源码

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = download;
/**
 * 下载文件
 *
 * @export
 * @param {*} type 设置吸收数据范例 参数 1 或 2
 * @param {*} data type为 1 时 data 为文件地点； type为 2 时 data 为canvas对象
 * @param {*} name 当文件为图片范例时需设置文件名
 */
function download(type, data, name) {
  if (type == 1) {
    var url = data;
    // 经由过程地点推断是不是为图片范例文件
    var ext = url.slice(url.lastIndexOf('.') + 1).toLowerCase();
    if (isImage(ext)) {
      convertUrlToBase64(url).then(function (base64) {
        var blob = convertBase64UrlToBlob(base64);
        // 下载
        if (myBrowser() == 'IE') {
          window.navigator.msSaveBlob(blob, name + '.jpg');
        } else {
          var a = document.createElement('a');
          a.download = name;
          a.href = URL.createObjectURL(blob);
          a.style.display = 'none'
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
        }
      });
    } else {
      var a = document.createElement('a');
      a.download = name;
      a.href = url;
      a.style.display = 'none'
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    }
  } else {
    var dataURL = data.toDataURL('image/jpeg', 1.0);
    var base64 = {
      dataURL: dataURL,
      type: 'image/jpg',
      ext: 'jpg'
    };
    var blob = convertBase64UrlToBlob(base64);
    // 下载
    if (myBrowser() == 'IE') {
      window.navigator.msSaveBlob(blob, name + '.jpg');
    } else {
      var _a = document.createElement('a');
      _a.download = name;
      _a.href = URL.createObjectURL(blob);
      _a.style.display = 'none'
      document.body.appendChild(_a);
      _a.click();
      document.body.removeChild(_a);
    }
  }
}

/**
 * 将 base64 转换位 blob 对象
 * blob 存储 2进制对象的容器
 * @export
 * @param {*} base64
 * @returns
 */
function convertBase64UrlToBlob(base64) {
  var parts = base64.dataURL.split(';base64,');
  var contentType = parts[0].split(':')[1];
  var raw = window.atob(parts[1]);
  var rawLength = raw.length;
  var uInt8Array = new Uint8Array(rawLength);
  for (var i = 0; i < rawLength; i++) {
    uInt8Array[i] = raw.charCodeAt(i);
  }
  return new Blob([uInt8Array], { type: contentType });
}

/**
 * 将图片地点转换为 base64 花样
 *
 * @param {*} url
 */
function convertUrlToBase64(url) {
  return new Promise(function (resolve, reject) {
    var img = new Image();
    img.crossOrigin = 'Anonymous';
    img.src = url;
    img.onload = function () {
      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);
      var base64 = {
        dataURL: dataURL,
        type: 'image/' + ext,
        ext: ext
      };
      resolve(base64);
    };
  });
}

// 推断浏览器范例 
function myBrowser() {
  var userAgent = navigator.userAgent; //获得浏览器的userAgent字符串
  if (userAgent.indexOf("OPR") > -1) {
    return "Opera";
  }; //推断是不是Opera浏览器 OPR/43.0.2442.991
  if (userAgent.indexOf("Firefox") > -1) {
    return "FF";
  } //推断是不是Firefox浏览器  Firefox/51.0
  if (userAgent.indexOf("Trident") > -1) {
    return "IE";
  } //推断是不是IE浏览器  Trident/7.0; rv:11.0
  if (userAgent.indexOf("Edge") > -1) {
    return "Edge";
  } //推断是不是Edge浏览器  Edge/14.14393
  if (userAgent.indexOf("Chrome") > -1) {
    return "Chrome";
  } // Chrome/56.0.2924.87
  if (userAgent.indexOf("Safari") > -1) {
    return "Safari";
  } //推断是不是Safari浏览器 AppleWebKit/534.57.2 Version/5.1.7 Safari/534.57.2
}

// 推断文件是不是为图片范例
function isImage(ext) {
  if (ext == 'png' || ext == 'jpg' || ext == 'jpeg' || ext == 'gif' || ext == 'bmp') {
    return true;
  }
}

好啦，愿望该要领可以处理人人鄙人载文件特别是图片时碰到的题目 ^ – ^

    原文作者：没有梦想的咸鱼
    原文地址: https://segmentfault.com/a/1190000017951436
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞