使用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