使用a标签下载,可能存在文件没有后缀名问题
npm install file-saver
import FileSaver from ‘file-saver’ // 导出JSON
/**
* const base64String = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...';
* downloadBase64AsPng(base64String, 'exampleImage');
* @param base64String
* @param fileName
*/
function downloadBase64AsPng(fileStr: string, fileType: string, fileName: string) {
// 将Base64字符串转换为Blob对象
const byteCharacters = atob(fileStr.split(',')[1]);
const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
const blob = new Blob([byteArray], { type: `application/${fileType}` });
FileSaver.saveAs(blob, fileName)
}
function downFile(fileStr: string, fileType: string, fileName: string) {
if (!fileName) {
fileName = `${uuid()}.${fileType}`;
}
if(fileStr.startsWith('data:image/')){
downloadBase64AsPng(fileStr,fileType,fileName);
return;
}
// 将JSON字符串转换为Blob对象 octet-stream
const blob = new Blob([fileStr], { type: `application/${fileType}` });
FileSaver.saveAs(blob, fileName)
// const blob = new Blob([fileStr], { type: 'application/octet-stream' });
// if (window.navigator && window.navigator.msSaveBlob) {
// // 使用 msSaveBlob 触发“另存为”对话框
// // 第二个参数是建议的文件名(包括扩展名)
// window.navigator.msSaveBlob(blob, fileName);
// return;
// }
// // 创建一个指向该Blob的URL
// const url = URL.createObjectURL(blob);
// // 创建一个临时的a标签用于下载
// const a = document.createElement('a');
// // if (fileStr.startsWith('data:image/')) {
// // a.href = fileStr;
// // }else{
// // a.href = url;
// // }
// a.href = url;
// a.download = fileName; // 设置下载的文件名
// // 触发点击
// document.body.appendChild(a);
// a.click();
// // 清理
// document.body.removeChild(a);
// URL.revokeObjectURL(url);
}
文档更新时间: 2024-07-07 17:34 作者:admin