快捷導(dǎo)航

js實(shí)現(xiàn)base64文件的處理以及下載方法

更新時(shí)間：2024年07月09日 11:09:07 作者：今后剛睡醒

Base64是一種將二進(jìn)制數(shù)據(jù)編碼為ASCII字符的編碼方式,這篇文章主要給大家介紹了關(guān)于js實(shí)現(xiàn)base64文件的處理以及下載的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

獲取完整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)
    })
}

//根據(jù)文件后綴 獲取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轉(zhuǎn)Blob

//將完整的base64轉(zhuǎn)換為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轉(zhuǎn)File

// 將base64轉(zhuǎn)換為文件
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: 下載參數(shù)入口
// * @param base64  ：返回?cái)?shù)據(jù)的blob對(duì)象或鏈接
// * @param fileName  ：下載后文件名標(biāo)記
function downloadFileByBase64(base64, fileName) {
    var myBlob = dataURLtoBlob(base64)
    var myUrl = URL.createObjectURL(myBlob)
    downloadFile(myUrl, fileName)
}
// * desc: 下載方法
// * @param url  ：返回?cái)?shù)據(jù)的blob對(duì)象或鏈接
// * @param fileName  ：下載后文件名標(biāo)記
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編碼數(shù)據(jù)

    var a = document.createElement('a') // 生成一個(gè)a元素
    var event = new MouseEvent('click') // 創(chuàng)建一個(gè)單擊事件
    a.download = name || 'photo' // 設(shè)置圖片名稱
    a.href = url // 將生成的URL設(shè)置為a.href屬性
    a.dispatchEvent(event) // 觸發(fā)a的單擊事件
  }
  image.src = imgsrc
}

下載普通文件

/**
 * 下載文件
 *
 * @param {*} path 下載地址/下載請(qǐng)求地址。
 * @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())
}

批量下載文件并導(dǎo)出為zip

import JSZip from 'jszip'
import FileSaver from 'file-saver'
import axios from 'axios'
// 批量導(dǎo)出
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 需要下載的文件對(duì)象數(shù)組[{name,url}]
 * @param {String} zipName 壓縮包名稱
 * @param {Function} callback 下載完成后的回調(diào)
 */
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對(duì)象
            let file_name = item.name // 獲取文件名
            let lastIndex = file_name.lastIndexOf('/')
            console.log(result_file, file_name, lastIndex, 'result_file111')
                //將所有文件放入同一級(jí)
            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 }) // 逐個(gè)添加文件
            cache[file_name] = data
        })
        promises.push(promise)
    })
    Promise.all(promises).then(() => {
        zip.generateAsync({ type: 'blob' }).then(content => {
            // 生成二進(jìn)制流
            FileSaver.saveAs(content, zipName) // 利用file-saver保存文件  自定義文件名
            callback && callback()
        })
    })
}

export default batchDownZip