html处理Base文件流

处理步骤

1. 从服务返回的字符串中提取文件流数据，可能是Base64或二进制。
2. 将数据转换为Blob对象。
3. 创建对象URL。
4. 创建<a>元素，设置href和download属性。
5. 触发点击事件以下载文件。
6. 删除缓存数据

代码

// 假设这是从服务返回的Base64字符串（包含MIME类型前缀）
const base64PDF = 'data:application/pdf;base64,JVBERi0xLjQKJd...'; // 你的实际数据
// const base64PDF2 = 'JVBERi0xLjQKJd...'; // 你的实际数据,没有前缀的数据
function downloadPDF(base64Data, fileName) {
    // 创建Blob对象
    const byteCharacters = atob(base64Data.split(',')[1]);
//  const byteCharacters = atob(base64Data2); -- 处理没有前缀的数据
    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/pdf' });

    // 创建临时链接
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = fileName || 'document.pdf'; // 设置默认文件名
    
    // 触发下载
    document.body.appendChild(link);
    link.click();
    
    // 清理资源
    document.body.removeChild(link);
    URL.revokeObjectURL(link.href);
}

// 使用示例
downloadPDF(base64PDF, 'my_file.pdf');

关键点说明：

1数据格式处理：

• 如果返回的是纯Base64字符串（不含MIME类型前缀），需要先添加前缀：
• 不含MIME类型前缀,也可以去掉切割字符串部分

const completeBase64 = 'data:application/pdf;base64,' + yourBase64String;

2二进制转换：

• 使用atob()解码Base64字符串
• 通过charCodeAt()转换为字节数组
• 使用Uint8Array创建类型化数组

3文件生成：

• 通过Blob构造函数创建文件对象
• 使用URL.createObjectURL()生成临时下载链接

4下载触发：

• 创建虚拟<a>标签并设置download属性
• 通过click()事件触发下载

注意事项：

1. 确保服务返回的确实是有效的PDF文件流
2. 大文件处理建议使用流式处理（本方案适用于中小文件）
3. 浏览器兼容性：支持所有现代浏览器（IE11+）
4. 文件名编码问题：如果文件名含中文等特殊字符，需要：

link.download = encodeURIComponent(fileName);

扩展建议：

• 如果需要显示PDF预览，可以使用<iframe>或PDF.js库
• 对于非Base64的二进制流，可以直接使用new Blob([responseData])
• 添加加载状态提示和错误处理机制

根据你的实际数据格式（Base64/二进制流），选择对应的处理方式即可实现文件下载功能。