react项目中 iframe来渲染接口返回的base64格式的html、base64解码、解码后中文乱码问题

一、需求背景

react项目中需要使用iframe来渲染接口返回的base64格式的html，涉及到base64解码、解码后中文乱码问题，在这里总结一下解决方法。

二、<iframe>标签使用方法介绍

1、定义

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。
所有浏览器都支持 <iframe> 标签。

2、属性

三、项目中使用

若仅仅是展示后端接口返回的内容，不需要做其他的处理，可以直接讲base64转化成blob格式，然后用src标签来进行赋值渲染；
若需要对html中的内容进行获取并赋值，则需要对base64进行解码操作，方法如下：

1、通过atob()方法将base64解码：

const decodeData = atob(base64Data)

base64Data是后端接口返回的base64

2、若解码后的html内容中包含中文出现乱码的情况，解决方法如下：

let url = decodeURIComponent(escape(window.atob(base64Data)));

3、将解码后的base64赋值给iframe的srcdoc

<iframe srcDoc={url} 
  onLoad={() => frameOnLoad('communicationDetail')}
  ref={communicatRef}
  width="100%"
  height="100%"
  className="iframe-box"
></iframe>

补充说明：
atob()和btoa()是JavaScript中用来进行Base64编码和解码的两个方法
atob()–用于解码Base64字符串，将其解码为原始字符串。
btoa()–用于编码原始字符串，将其编码为Base64字符串。

获取iframe中的img标签并赋值将在下一篇文章中详细介绍

好啦，使用iframe来渲染接口返回的base64格式的html就介绍到这里吧，有疑问欢迎留言喔~~觉得有用就收藏一下吧，不然下次会找不到了哟^ _ ^