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解析