EnlightenCode

JavaScript实现Base64转PDF及预览功能详解 📄 ​

在前端开发中，经常需要处理PDF文件的展示和下载。本文将详细介绍如何使用JavaScript将Base64格式的PDF数据转换为可预览和下载的PDF文件。

1. 直接预览方式 👀 ​

最简单的方式是通过HTML标签直接展示：

html
<!-- 图片预览 -->
<img class="img" src="data:image/jpg;base64,{base64数据}" alt="预览图片">

<!-- PDF预览 -->
<iframe class="pdf-viewer" src="data:application/pdf;base64,{base64数据}"></iframe>

⚠️ 注意事项：

  • 这种方式适用于小型文件
  • base64数据量过大可能导致页面加载缓慢
  • 某些浏览器可能存在兼容性问题

2. Blob对象转换方式（推荐）💡 ​

这种方式更加灵活，性能更好：

javascript
class PdfHandler {
  /**
   * 查看PDF文件
   * @param {string} base64Content - base64格式的PDF内容
   * @param {string} fileName - 文件名称（可选）
   */
  static viewPdf(base64Content, fileName = 'document') {
    const blob = this.base64ToBlob(base64Content)
    
    // 兼容IE浏览器
    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
      window.navigator.msSaveOrOpenBlob(blob)
      return
    }
    
    const fileURL = URL.createObjectURL(blob)
    
    // 方式1：新窗口打开
    window.open(fileURL)
    
    // 方式2：下载文件
    const downloadLink = document.createElement('a')
    downloadLink.href = fileURL
    downloadLink.download = `${fileName}.pdf`
    downloadLink.click()
    
    // 方式3：内嵌预览
    const viewer = document.querySelector('.pdf-viewer')
    if (viewer) {
      viewer.src = fileURL
    }
    
    // 清理URL对象
    setTimeout(() => {
      URL.revokeObjectURL(fileURL)
    }, 100)
  }
  
  /**
   * Base64转Blob对象
   * @param {string} base64 - base64字符串
   * @returns {Blob} - PDF文件的Blob对象
   */
  static base64ToBlob(base64) {
    // 移除可能存在的换行符
    const cleanBase64 = base64.replace(/[\n\r]/g, '')
    const raw = window.atob(cleanBase64)
    const rawLength = raw.length
    const uInt8Array = new Uint8Array(rawLength)
    
    for (let i = 0; i < rawLength; i++) {
      uInt8Array[i] = raw.charCodeAt(i)
    }
    
    return new Blob([uInt8Array], { type: 'application/pdf' })
  }
}

使用示例 🌟 ​

javascript
// 假设我们从后端获取了base64格式的PDF数据
const pdfBase64 = 'JVBERi0xLjcKCjEgMCBvYmogICUgZW50...'

// 预览PDF
PdfHandler.viewPdf(pdfBase64, '测试文档')

3. 补充说明 📝 ​

优势对比 ​

  • 直接预览方式：

    • ✅ 实现简单
    • ✅ 适合小文件
    • ❌ 性能较差
    • ❌ 兼容性问题

  • Blob方式：

    • ✅ 性能更好
    • ✅ 支持大文件
    • ✅ 提供多种预览方式
    • ✅ 更好的内存管理
    • ✅ 兼容性更好

注意事项 ⚠️ ​

  1. 处理大文件时推荐使用Blob方式
  2. 记得及时清理URL对象，避免内存泄漏
  3. 考虑浏览器兼容性，特别是IE浏览器
  4. base64数据中可能包含换行符，需要清理
  5. 建议添加错误处理机制

浏览器支持情况 ​

  • Chrome 4+
  • Firefox 3.6+
  • Safari 6+
  • IE 10+
  • Edge 12+

4. 相关资源 🔗 ​