js关于base64文件的处理以及下载

js关于base64文件的处理以及下载

• 获取完整base64地址
• base64转Blob
• base64转File
• 下载base64文件
• 下载图片
• 下载普通文件
• 批量下载文件并导出为zip

获取完整base64地址

//获取后端返回的不完成base64、文件名、文件类型
function downladBase64(item) {
    APINAME().then((res) => {
            let base64 = getBase64Type(res.data.fileType) + res.data.data //类型拼接后端给的不完整base64
            console.log('拼接完整的base64', base64)
            downloadFileByBase64(base64, res.data.fileName)
    })
}

//根据文件后缀 获取base64前缀不同 拼接完整的base64
function getBase64Type(type) {
    switch (type) {
        case 'txt':
            return 'data:text/plain;base64,'
        case 'doc':
            return 'data:application/msword;base64,'
        case 'docx':
            return 'data:application/vnd.openxmlformats-officedocument.wordprocessingml.document;base64,'
        case 'xls':
            return 'data:application/vnd.ms-excel;base64,'
        case 'xlsx':
            return 'data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,'
        case 'pdf':
            return 'data:application/pdf;base64,'
        case 'pptx':
            return 'data:application/vnd.openxmlformats-officedocument.presentationml.presentation;base64,'
        case 'ppt':
            return 'data:application/vnd.ms-powerpoint;base64,'
        case 'png':
            return 'data:image/png;base64,'
        case 'jpg':
            return 'data:image/jpeg;base64,'
        case 'gif':
            return 'data:image/gif;base64,'
        case 'svg':
            return 'data:image/svg+xml;base64,'
        case 'ico':
            return 'data:image/x-icon;base64,'
        case 'bmp':
            return 'data:image/bmp;base64,'
    }
}

base64转Blob

//将完整的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 })
}

base64转File

// 将base64转换为文件
export default async function base64ImgtoFile(dataurl, filename = 'file') {
    try {
        const arr = dataurl.split(',')
        const mime = arr[0].match(/:(.*?);/)[1]
        const suffix = mime.split('/')[1]
        const bstr = atob(arr[1])
        let n = bstr.length
        const u8arr = new Uint8Array(n)
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n)
        }
        return new File([u8arr], `${filename}.${suffix}`, {
            type: mime
        })
    } catch (err) {
        return Promise.reject(err);
    }
}

下载base64文件

// * desc: 下载参数入口
// * @param base64  ：返回数据的blob对象或链接
// * @param fileName  ：下载后文件名标记
function downloadFileByBase64(base64, fileName) {
    var myBlob = dataURLtoBlob(base64)
    var myUrl = URL.createObjectURL(myBlob)
    downloadFile(myUrl, fileName)
}
// * desc: 下载方法
// * @param url  ：返回数据的blob对象或链接
// * @param fileName  ：下载后文件名标记
function downloadFile(url, name = "What's the fuvk") {
    console.log('url==', url)
    var a = document.createElement("a")
    a.setAttribute("href", url)
    a.setAttribute("download", name)
    a.setAttribute("target", "_blank")
    let clickEvent = document.createEvent("MouseEvents")
    clickEvent.initEvent("click", true, true)
    a.dispatchEvent(clickEvent)
}
export default downloadFileByBase64

下载图片

export const downloadImage = (imgsrc, name) => { // 下载图片地址和图片名
  var image = new Image()
  image.setAttribute('crossOrigin', 'anonymous')
  image.onload = function() {
    var canvas = document.createElement('canvas')
    canvas.width = image.width
    canvas.height = image.height
    var context = canvas.getContext('2d')
    context.drawImage(image, 0, 0, image.width, image.height)
    var url = canvas.toDataURL('image/png') // 得到图片的base64编码数据

    var a = document.createElement('a') // 生成一个a元素
    var event = new MouseEvent('click') // 创建一个单击事件
    a.download = name || 'photo' // 设置图片名称
    a.href = url // 将生成的URL设置为a.href属性
    a.dispatchEvent(event) // 触发a的单击事件
  }
  image.src = imgsrc
}

下载普通文件

/**
 * 下载文件
 *
 * @param {*} path 下载地址/下载请求地址。
 * @param {string} [name='name.jpg'] 下载文件的名字（考虑到兼容性问题，最好加上后缀名
 */
export const downloadFile = (path, name = 'name.jpg') => {
        const download = (href) => {
            const a = document.createElement('a')
            a.style.display = 'none'
            a.href = href
            a.download = name
            document.body.appendChild(a)
            a.click()
            document.body.removeChild(a)
        }

        if (isIE()) {
            download(path)
        } else {
            const xhr = new XMLHttpRequest()
            xhr.open('get', path)
            xhr.responseType = 'blob'
            xhr.send()
            xhr.onload = (e) => {
                const { status, response } = e.target
                if (status === 200 || status === 304) {
                    const fileReader = new FileReader()
                    fileReader.readAsDataURL(response)
                    fileReader.onload = (ev) => {
                        download(ev.target.result)
                    }
                }
            }
        }
    }
    // 判断是否IE
export function isIE() {
    return /msie|trident/.test(window.navigator.userAgent.toLowerCase())
}

批量下载文件并导出为zip

import JSZip from 'jszip'
import FileSaver from 'file-saver'
import axios from 'axios'
// 批量导出
function getFile(url) {
    return new Promise((resolve, reject) => {
        axios({
            method: 'get',
            url,
            responseType: 'arraybuffer'
        }).then(data => {
            resolve(data.data)
        }).catch(error => {
            console.log(error, url, 'getfile-err')
                // reject(error.toString());
            resolve('')
        })
    })
}

/**
 * 
 * @param {Array} files 需要下载的文件对象数组[{name,url}]
 * @param {String} zipName 压缩包名称
 * @param {Function} callback 下载完成后的回调
 */
function batchDownZip(files, zipName, callback) {
    const data = files
    const zip = new JSZip()
    const cache = {}
    const promises = []
    data.forEach(item => {
        // console.log(getFile, 'getFile')
        const promise = getFile(item.url).then(result_file => { // 下载文件, 并存成ArrayBuffer对象
            let file_name = item.name // 获取文件名
            let lastIndex = file_name.lastIndexOf('/')
            console.log(result_file, file_name, lastIndex, 'result_file111')
                //将所有文件放入同一级
            if (lastIndex > -1) {
                file_name = file_name.slice(lastIndex + 1)
            }
            console.log(result_file, file_name, lastIndex, 'result_file222')

            zip.file(file_name, result_file, { binary: true }) // 逐个添加文件
            cache[file_name] = data
        })
        promises.push(promise)
    })
    Promise.all(promises).then(() => {
        zip.generateAsync({ type: 'blob' }).then(content => {
            // 生成二进制流
            FileSaver.saveAs(content, zipName) // 利用file-saver保存文件  自定义文件名
            callback && callback()
        })
    })
}

export default batchDownZip