第七十六章-VbenAdmin的utils-file解析

1.说明

这个工具类还是挺实用，操作文件的一些工具方法。

JS中的Blob对象

2.base64Conver.ts

src\utils\file\base64Conver.ts

/**
 * base64位字符串转换位blob对象
 * @description: base64 to blob
 */
export function dataURLtoBlob(base64Buf: string): Blob {
  const arr = base64Buf.split(',');
  const typeItem = arr[0];
  const mime = typeItem.match(/:(.*?);/)![1];
  const bstr = atob(arr[1]);
  let n = bstr.length;
  const u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], { type: mime });
}

/**
 * img url to base64
 * 图片URL转换为base64为字符串
 * @param url
 */
export function urlToBase64(url: string, mineType?: string): Promise<string> {
  return new Promise((resolve, reject) => {
    let canvas = document.createElement('CANVAS') as Nullable<HTMLCanvasElement>;
    const ctx = canvas!.getContext('2d');

    const img = new Image();
    img.crossOrigin = '';
    img.onload = function () {
      if (!canvas || !ctx) {
        return reject();
      }
      canvas.height = img.height;
      canvas.width = img.width;
      ctx.drawImage(img, 0, 0);
      const dataURL = canvas.toDataURL(mineType || 'image/png');
      canvas = null;
      resolve(dataURL);
    };
    img.src = url;
  });
}

3.download.ts

src\utils\file\download.ts

import { openWindow } from '..';
import { dataURLtoBlob, urlToBase64 } from './base64Conver';

/**
 * 下载在线资源
 * Download online pictures
 * @param url 资源URL
 * @param filename 文件名
 * @param mime Blob的mime类型
 * @param bom blob的前部数据
 */
export function downloadByOnlineUrl(url: string, filename: string, mime?: string, bom?: BlobPart) {
  urlToBase64(url).then((base64) => {
    downloadByBase64(base64, filename, mime, bom);
  });
}

/**
 * 下载base64位字符串表示的资源
 * Download pictures based on base64
 * @param buf 待转换为blob的base64字符串
 * @param filename 文件名
 * @param mime Blob的mime类型
 * @param bom blob的前部数据
 */
export function downloadByBase64(buf: string, filename: string, mime?: string, bom?: BlobPart) {
  const base64Buf = dataURLtoBlob(buf);
  downloadByData(base64Buf, filename, mime, bom);
}

/**
 * Download according to the background interface file stream
 * 根据后端接口文件流下载
 * @param {*} data 下载的数据
 * @param {*} filename 下载后的文件名
 * @param {*} mime Blob的mime类型
 * @param {*} bom blob的前部数据
 */
export function downloadByData(data: BlobPart, filename: string, mime?: string, bom?: BlobPart) {
  const blobData = typeof bom !== 'undefined' ? [bom, data] : [data];
  // 构造Blod对象
  const blob = new Blob(blobData, { type: mime || 'application/octet-stream' });
  // 如果浏览器的msSaveBlob存在
  if (typeof window.navigator.msSaveBlob !== 'undefined') {
    // 使用msSaveBlob下载文件
    window.navigator.msSaveBlob(blob, filename);
  } else {
    // 创建一个URL
    const blobURL = window.URL.createObjectURL(blob);
    // 创建一个a链接
    const tempLink = document.createElement('a');
    tempLink.style.display = 'none';
    tempLink.href = blobURL;
    tempLink.setAttribute('download', filename);
    if (typeof tempLink.download === 'undefined') {
      tempLink.setAttribute('target', '_blank');
    }
    document.body.appendChild(tempLink);
    // 手动触发点击事件
    tempLink.click();
    // 点击完成后移除链接
    document.body.removeChild(tempLink);
    // 移出URL
    window.URL.revokeObjectURL(blobURL);
  }
}

/**
 * Download file according to file address
 * @param {*} sUrl
 */
export function downloadByUrl({
  url,
  target = '_blank',
  fileName,
}: {
  url: string;
  target?: TargetContext;
  fileName?: string;
}): boolean {
  // 是否是chrome浏览器
  const isChrome = window.navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
  // 是否是safari浏览器
  const isSafari = window.navigator.userAgent.toLowerCase().indexOf('safari') > -1;

  // 判断浏览器是否可以下载资源
  if (/(iP)/g.test(window.navigator.userAgent)) {
    console.error('Your browser does not support download!');
    return false;
  }
  // 如果是以下浏览器
  if (isChrome || isSafari) {
    // 创建一个a链接,然后手动触发点击事件,然后在新窗口打开链接,下载资源
    const link = document.createElement('a');
    link.href = url;
    link.target = target;

    if (link.download !== undefined) {
      link.download = fileName || url.substring(url.lastIndexOf('/') + 1, url.length);
    }

    if (document.createEvent) {
      const e = document.createEvent('MouseEvents');
      e.initEvent('click', true, true);
      link.dispatchEvent(e);
      return true;
    }
  }
  // 其他浏览器下载方式
  if (url.indexOf('?') === -1) {
    url += '?download';
  }

  // 打开URL
  openWindow(url, { target });
  return true;
}

上一章

第七十五章-VbenAdmin的utils-factory解析

下一章

第七十七章-VbenAdmin的utils-helper解析