js实现base64文件的处理以及下载方法
作者：今后刚睡醒
Base64是一种将二进制数据编码为ASCII字符的编码方式,这篇文章主要给大家介绍了关于js实现base64文件的处理以及下载的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
获取完整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总结
到此这篇关于js实现base64文件的处理以及下载方法的文章就介绍到这了,更多相关js base64文件处理下载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！