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

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

获取完整base64地址

<code>//获取后端返回的不完成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'] 下载文件的名字（考虑到兼容性问题，最好加上后缀名code>

*/

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