base64怎样转pdf前端

下面我将为你详细讲解 base64 怎样转 PDF 前端的完整攻略。

准备工作

首先，要将 base64 编码的字符串转为 Blob 对象，然后使用 URL.createObjectURL 方法将 Blob 对象转换为 URL。接下来，只需要创建一个隐藏的 iframe 标签，并将 URL 赋值给 iframe 的 src 属性即可。

步骤

1. 将 base64 编码的字符串转为 Blob 对象

代码示例：

var base64Str = '...'; // 这里是 base64 字符串
var blob = base64toBlob(base64Str);

// 定义 base64toBlob 方法
function base64toBlob(base64Str) {
  var arr = base64Str.split(','),
      mime = arr[0].match(/:(.*?);/)[1],
      bstr = atob(arr[1]),
      n = bstr.length,
      u8arr = new Uint8Array(n);
  while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], {type:mime});
}

1. 将 Blob 对象转换为 URL

代码示例：

var url = URL.createObjectURL(blob);

1. 创建 iframe 标签，并将 URL 赋值给 iframe 的 src 属性

代码示例：

var iframe = document.createElement('iframe');
iframe.style.display = 'none';
iframe.src = url;
document.body.appendChild(iframe);

4.（可选）支持文件下载

如果需要让用户能够下载文件，可以通过 a 标签的 download 属性来实现。下载链接的 href 应该设置为 URL，并为 a 标签设置 download 属性，如下所示：

代码示例：

var a = document.createElement('a');
a.href = url;
a.download = 'example.pdf';
a.click();

完整代码

var base64Str = '...'; // 这里是 base64 字符串
var blob = base64toBlob(base64Str);
var url = URL.createObjectURL(blob);

var iframe = document.createElement('iframe');
iframe.style.display = 'none';
iframe.src = url;
document.body.appendChild(iframe);

var a = document.createElement('a');
a.href = url;
a.download = 'example.pdf';
a.click();

function base64toBlob(base64Str) {
  var arr = base64Str.split(','),
      mime = arr[0].match(/:(.*?);/)[1],
      bstr = atob(arr[1]),
      n = bstr.length,
      u8arr = new Uint8Array(n);
  while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], {type:mime});
}

其中，example.pdf 是要下载的文件名。

示例说明

下面提供两个示例用来说明 base64 转 PDF 的过程：

示例1:

假设有一个 base64 字符串，其内容是一个 PDF 文件，你想要在网页中显示这个 PDF 文件。

var base64Str = '...'; // 这里是 base64 字符串
var blob = base64toBlob(base64Str);
var url = URL.createObjectURL(blob);

var iframe = document.createElement('iframe');
iframe.style.display = 'block';
iframe.style.width = '100%';
iframe.style.height = '100%';
iframe.src = url;
document.body.appendChild(iframe);

function base64toBlob(base64Str) {
  var arr = base64Str.split(','),
      mime = arr[0].match(/:(.*?);/)[1],
      bstr = atob(arr[1]),
      n = bstr.length,
      u8arr = new Uint8Array(n);
  while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], {type:mime});
}

在上面的代码中，我们首先将 base64 字符串转为 Blob 对象，然后使用 URL.createObjectURL 方法将 Blob 对象转为 URL。接着，我们创建一个 iframe 标签，并将 URL 赋值给 iframe 的 src 属性，从而将 PDF 文件显示在网页中。

示例2:

假设有一个 base64 字符串，其内容是一个 PDF 文件，你想要让用户点击一个按钮下载这个 PDF 文件。

var base64Str = '...'; // 这里是 base64 字符串
var blob = base64toBlob(base64Str);
var url = URL.createObjectURL(blob);

var a = document.createElement('a');
a.href = url;
a.download = 'example.pdf';
a.click();

function base64toBlob(base64Str) {
  var arr = base64Str.split(','),
      mime = arr[0].match(/:(.*?);/)[1],
      bstr = atob(arr[1]),
      n = bstr.length,
      u8arr = new Uint8Array(n);
  while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], {type:mime});
}

在上面的代码中，我们首先将 base64 字符串转为 Blob 对象，然后使用 URL.createObjectURL 方法将 Blob 对象转为 URL。接着，我们创建一个 a 标签，并将 URL 赋值给 a 的 href 属性，将文件名赋值给 a 的 download 属性。最后，我们调用 a 的 click 方法触发下载操作。