如何将PDF文件转换为Base64字符串？（JavaScript实现）

嘿，我来帮你搞定这个PDF转Base64的问题～在浏览器环境里处理用户上传的PDF文件，核心是用FileReader API，它专门用来读取文件内容，下面给你两种实用的实现方式：

方式1：基于Promise的现代实现（推荐） #

这种写法更贴合现代JS的异步编程习惯，调用起来更清晰：

function convertBase64(file) {
  return new Promise((resolve, reject) => {
    const fileReader = new FileReader();
    fileReader.readAsDataURL(file);

    fileReader.onload = () => {
      // onload触发时，result属性就是带Base64的data URI
      // 要是只需要纯Base64内容，去掉开头的"data:application/pdf;base64,"就行
      const base64String = fileReader.result;
      // 可选：提取纯Base64部分
      // const pureBase64 = base64String.split(',')[1];
      resolve(base64String);
    };

    fileReader.onerror = (error) => {
      reject(error);
    };
  });
}

// 调用示例：假设页面有个文件上传框
document.querySelector('input[type="file"]').addEventListener('change', async (e) => {
  const file = e.target.files[0];
  if (file && file.type === 'application/pdf') {
    try {
      const base64 = await convertBase64(file);
      console.log('PDF的Base64字符串:', base64);
      // 这里可以做后续操作，比如上传到后端、本地存储等
    } catch (err) {
      console.error('转换失败:', err);
    }
  } else {
    alert('请选择一个有效的PDF文件哦！');
  }
});

方式2：基于回调函数的实现 #

如果你更习惯传统的回调写法，也可以这样写：

function convertBase64(file, callback) {
  const fileReader = new FileReader();
  fileReader.readAsDataURL(file);

  fileReader.onload = () => {
    callback(null, fileReader.result);
  };

  fileReader.onerror = (error) => {
    callback(error, null);
  };
}

// 调用示例
document.querySelector('input[type="file"]').addEventListener('change', (e) => {
  const file = e.target.files[0];
  if (file && file.type === 'application/pdf') {
    convertBase64(file, (err, base64) => {
      if (err) {
        console.error('转换出错啦:', err);
        return;
      }
      console.log('PDF的Base64:', base64);
    });
  }
});

几个关键细节 #

• readAsDataURL(file)：这个方法会把文件编码成data:[<mediatype>];base64,<data>格式的字符串，PDF对应的mediatype就是application/pdf，后面的<data>就是文件的Base64编码内容。
• 验证文件类型：通过file.type === 'application/pdf'可以确保用户上传的是PDF，避免无效文件导致转换失败。
• 纯Base64提取：如果不需要前面的data URI前缀，用base64String.split(',')[1]就能拿到纯Base64部分。

内容的提问来源于stack exchange，提问作者rbahena_