在前端开发中，处理文件流、尤其是将Base64格式的数据转换为可下载的PDF文件是一个常见的需求。尤其是在使用 Vue 框架进行项目开发时，如何高效、稳定地实现这一功能，并确保兼容性（如支持 IE10）显得尤为重要。
一、为什么需要将 Base64 转换为 PDF
在某些场景下，后端返回的数据可能是以 Base64 编码的形式传输的文件内容，比如 PDF 文件。这种情况下，前端需要将其解析为实际的 PDF 文件，以便用户能够下载或预览。而由于浏览器对 Base64 的支持存在差异，特别是在一些旧版浏览器如 IE10 中，直接操作可能会遇到兼容性问题。
二、Vue 中的实现思路
在 Vue 中，我们可以利用 JavaScript 的 `Blob` 对象和 `URL.createObjectURL` 方法来处理 Base64 数据，进而生成可下载的文件。以下是基本步骤：
1. 获取 Base64 字符串
通常从接口请求得到的 PDF 内容是 Base64 格式，例如：`data:application/pdf;base64,JVBERi0xLjQKJeLjz9MKMyAwIG9iago8PC9MZW5ndGggND...`
2. 提取 Base64 数据部分
去除前面的 MIME 类型信息，只保留真正的 Base64 字符串。
3. 将 Base64 转换为 Blob
使用 `atob()` 函数将 Base64 字符串解码为二进制字符串，再通过 `Uint8Array` 构建 Blob 对象。
4. 创建下载链接并触发下载
利用 `URL.createObjectURL` 创建临时 URL，并通过 `` 标签模拟点击下载。
三、兼容 IE10 的注意事项
IE10 对某些现代 API 支持有限，例如 `URL.createObjectURL` 和 `Blob` 在 IE10 中可能无法正常工作。因此，在实现过程中需要注意以下几点：
- 检查浏览器环境：使用 `navigator.userAgent` 或特性检测判断是否为 IE10。
- 使用替代方案：对于不支持 `Blob` 的浏览器，可以考虑使用 `msSaveOrOpenBlob` 方法（仅限 IE10+）。
- 避免使用箭头函数和 ES6 特性：确保代码在旧浏览器中能正常运行。
四、示例代码（Vue 实现）
```javascript
export default {
methods: {
downloadPDF(base64Data) {
if (!base64Data) return;
// 移除前缀
const base64 = base64Data.split(',')[1];
// 解码 Base64
const byteCharacters = atob(base64);
const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
// 创建 Blob
const blob = new Blob([byteArray], { type: 'application/pdf' });
// 兼容 IE10
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveOrOpenBlob(blob, 'document.pdf');
} else {
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'document.pdf';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);
}
}
}
}
```
五、总结
在 Vue 项目中，将 Base64 文件流转换为 PDF 并下载是一个实用的功能，尤其在处理文档类数据时非常常见。虽然现代浏览器对这些操作支持良好，但为了保证兼容性，特别是针对 IE10 这样的老旧浏览器，开发者需要特别注意代码的写法和特性检测。通过合理使用 `Blob`、`URL.createObjectURL` 和 `msSaveOrOpenBlob` 等方法，可以实现跨浏览器的文件下载功能，提升用户体验与项目稳定性。
