js实现base64文件的处理以及下载方法
更新时间：2024年07月09日 11:09:07 作者：今后刚睡醒
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文件处理下载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
这篇文章主要为大家详细介绍了JavaScript实现PC端四格密码输入框功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
这篇文章主要给大家介绍了关于利用JavaScript将Excel转换为JSON的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用JavaScript具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-06-06
在网站的管理后台应用此功能居多，如一次性处理多个产品，或对文章的删除对产品的下架等处理，一条一条的点显然有一些麻烦，如果能每一行放一个checkbox，然后统一处理就好办的多了，今天我就用简单的篇幅来讲解一下这个功能的实现原理和实现过程。2015-05-05
Js中FileReader读取文件内容方法详解(async/await)
这篇文章主要给大家介绍了关于Js中FileReader读取文件内容(async/await)的相关资料,FileReader是前端进行文件处理的一个重要的Api,特别是在对图片的处理上,如果你想知道图片的处理原理,你就永远不可能绕过它,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了js倒计时简单实现方法，方便一些提示重要日期的来临，本实例特别适合用于商品倒计时抢购活动，感兴趣的小伙伴们可以参考一下2015-12-12
javascript 获取url参数和script标签中获取url参数函数代码
不要在方法中调用方法，否则可能始终获取的是最后一个js的文件的参数，要在方法中使用，请先用变量保存，在方法中直接获取2010-01-01
JavaScript–Apple设备检测示例代码。需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
Chrome , Firfox 不支持fireEvent的方法可以使用dispatchEvent的方法替代，直接给一个兼容的Code，下面有个不错的示例，喜欢的朋友可以收藏下2013-12-12
javascript和jquery实现设置和移除文本框默认值效果代码
这篇文章主要介绍了javascript和jquery实现设置和移除文本框默认值效果代码,本文实现的是类似html5 placeholder（空白提示）一种效果,需要的朋友可以参考下2015-01-01
这篇文章主要为大家详细介绍了微信小程序实现拉链式的滑动验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
最新评论