HTML文档的Base64编码预览

背景

最开始，后端同学许诺给前端返回一个链接，前端只用简单的使用window.open打开即可，简直不要太简单。然而反转开始了，一天后端同学反馈没法提供给我链接（别问我为什么无法实现，我要是知道我不就成全栈了嘛），只能先将一个html页面 =>流 =>Base64编码，前端拿着这个大字符串想办法把页面完整渲染出来。

分析

通过上面的背景，我们可以简单的归纳为前端需要将Base64编码展示成一个独立页面。首先我肯定第一时间跑到网上去看看有没有作业可抄，结果当然木有。回来回想一下也正常，一般一个html格式文件给前端最简单的方式就是给链接，谁会瞎折腾转换来转换去的。
分解步骤如下：

1. 转换Base64编码为Blob二进制流
2. 根据二进制流转换成html实际内容的字符串文本
3. 新开页面，在新页面中写入该html结构的字符串

动手环节

转换Base64编码为Blob二进制流

一般来说，前端拿到Base64编码的字符串没法直接操作，需要先转换成贴近实际文件的文件流Blob格式（如果不清楚Blob，可参考这里JS中的Blob对象)。其中需要注意关键Api是window.atob,浏览器原生方法，还有下面代码的{ type: fileType || 'pdf' } 中的fileType是MIME类型。关键代码如下：

// base64转blob
function parseBase64ToBlob(dataUrl, fileType) {
  const bstr = window.atob(dataUrl)
  let n = bstr.length
  const u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new Blob([u8arr], { type: fileType || 'pdf' })
}

let base64Str = "xxxxxx";//实际base64字符串
parseBase64ToBlob(base64Str,'text/plain');//text/plain原文格式

根据二进制流转换成html实际内容的字符串文本

现在拿到Blob对象了，该怎么转换成明文（也就是开发人员能看懂的页面结构明文）呢？在得出结论前，我做了如下尝试，通过URL.createObjectURL(myBlob)得到如下效果

blob.png

var reader = new FileReader();
reader.onload = function(event){
    var content = reader.result;//实际内容就在这里
};
reader.readAsText(myBlob); //步骤一转换后的blob

新开页面，在新页面中写入该html结构的字符串

直接参考js 打开空白页，并在空白页里展现内容 代码

var html="html代码";
var open = window.open("about:blank", "_blank");
open.document.write(html);

完整代码

好了，经过上面三个步骤我们已经可以实现想要的效果，下面就是把三个步骤的代码合并一下，详细代码如下：

/**
 *
 * @param {*} base64Str 预览html base64编码的页面
 * @param {*} fileType 转换的文件类型
 */
export function previewHtmlByBase64(base64Str, fileType) {
  if (base64Str) {
    const myBlob = parseBase64ToBlob(base64Str, fileType)
    window.open(URL.createObjectURL(myBlob))
    const reader = new FileReader()
    reader.onload = function (event) {
      const content = reader.result // 内容就在这里
      const open = window.open('about:blank', '_blank')
      open.document.write(content)
    }
    reader.readAsText(myBlob)
  }
}

function parseBase64ToBlob(dataUrl, fileType) {
  const bstr = window.atob(dataUrl)
  let n = bstr.length
  const u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new Blob([u8arr], { type: fileType || 'pdf' })
}

let taxBase64 = "xxxxx";//替换成实际base64编码字符串
previewHtmlByBase64(taxBase64, 'text/plain');