js文件图片视频下载

前提条件：文件与当前服务器同域名

import { ElMessage } from "element-plus"; // 提示语、提示框

/**
 * 单个文件下载
 * @param url  文件全地址
 * @param msg  提示信息
 */
export function oneFileDownLoad(url, msg) {
    if (url) {
        if (url.indexOf(".") != -1) {
            const pointArr = url.split(".");
            let exts = pointArr.length > 0 ? pointArr[pointArr.length - 1] : "";
            if (exts) {
                if (["jpeg", "jpg", "png", "gif"].indexOf(exts) != -1) {
                    downloadImagesFile(url, new Date().getTime() + "." + exts);
                } else {
                    downloadOtherFile(url, new Date().getTime() + "." + exts);
                }
            }
        }
    } else {
        ElMessage.warning(msg);
    }
}
/**
 * 通过a链接下载文件，不支持图片格式（.png、.jpeg、.gif、.jpg）
 * @param fileRealPath
 * @param fileName
 */
export function downloadOtherFile(fileRealPath, fileName) {
    const a = document.createElement("a");
    a.style.display = "none";
    a.setAttribute("target", "_blank");
    /*
     * download的属性是HTML5新增的属性
     * href属性的地址必须是非跨域的地址，如果引用的是第三方的网站或者说是前后端分离的项目(调用后台的接口)，这时download就会不起作用。
     * 此时，如果是下载浏览器无法解析的文件，例如.exe,.xlsx..那么浏览器会自动下载，但是如果使用浏览器可以解析的文件，比如.txt,.png,.pdf....浏览器就会采取预览模式
     * 所以，对于.txt,.png,.pdf等的预览功能我们就可以直接不设置download属性(前提是后端响应头的Content-Type: application/octet-stream，如果为application/pdf浏览器则会判断文件为 pdf ，自动执行预览的策略)
     */
    fileName && a.setAttribute("download", fileName);
    a.href = fileRealPath;
    document.body.appendChild(a); //添加下载元素
    a.click();
    document.body.removeChild(a); // 下载完成移除元素
}

/**
 *  下载图片-----转化为bolb，支持图片、文件
 * @param imgsrc 图片地址
 * @param name 新名称
 */
export function downloadImagesFile(fileRealPath, fileName) {
    let x = new XMLHttpRequest();
    x.open("GET", fileRealPath, true);
    x.responseType = "blob";
    x.onload = function (e) {
        let url = window.URL.createObjectURL(x.response);
        let a = document.createElement("a");
        a.href = url;
        a.download = fileName;
        a.click();
    };
    x.send();
}

/**
 *  下载图片-----转化为base64
 * 限制：图片越大，base64越大，又浏览器地址有长度限制，会导致图片显示问题
 * 调用：toBase64DownloadIamge(url, new Date().getTime() + ".png");
 * @param imgsrc 图片地址
 * @param name 新名称
 */
export function toBase64DownloadIamge(imgsrc, name?: string) {
    //下载图片地址和图片名
    let image = new Image();
    // 解决跨域 Canvas 污染问题
    image.setAttribute("crossOrigin", "anonymous");
    image.onload = function () {
        let canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        let contexts = canvas.getContext("2d") as any;
        contexts.drawImage(image, 0, 0, image.width, image.height);
        let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据'
        let a = document.createElement("a"); // 生成一个a元素
        let event = new MouseEvent("click"); // 创建一个单击事件
        a.download = name || new Date().getTime() + ".png"; // 设置图片名称
        a.href = url; // 将生成的URL设置为a.href属性
        a.dispatchEvent(event); // 触发a的单击事件
    };
    image.src = imgsrc;
}