react-pdf ie11不兼容问题

使用react-pdf 不兼容ie11

近期项目上有这么个需求：需要对用户的征信报告加水印，然后禁止该下载功能。这里写的主要是前端碰到的问题。

iframe

本来刚开始就决定不用插件，使用原生的iframe，通过后台传过来的base64文件流直接渲染出来。渲染是完全可以做到的，但是发现iframe在做禁止文件下载的功能似乎有些麻烦，它本身不支持屏蔽右键，屏蔽ctrl+s等功能，我是没有找到。后经过上网搜索，决定使用react-pdf这个前端插件。

react-pdf

插件使用比较方便，和iframe的使用方法其实相差不大，很简单的就可以将pdf页面渲染出来。通过自带的preventevent函数可以很方便的取消右键点击和CTRL+s 保存pdf文件的功能给屏蔽。将插件导入后一切都比较顺利，上生产。

碰到的问题

由于一些插件只兼容ie11，我的功能在chorme上一切正常，有反应说ie11点击该功能页面不出来，我去测了一下的确如此。因为当时在考虑该插件时我已经预想过可能会有这种情况，当时查看插件的使用条件是所有支持h5的浏览器，且在npm的网站上，明确说如果使用ie11，不能使用5.0以上的版本，我选择的是4.2.0，没有问题。碰到这问题第一反应肯定是插件的版本不兼容ie11.当时就考虑马上换个插件，但是又不想大改，因为项目关系npm只能用私服，导新的npm包十分麻烦，之后在逛github上找到了问题的解决方法

解决方法

问题出现在base64这个流上，ie11对其支持十分不友好，如果过大，往往会出问题，因此需要再将base64流转编码，之前使用标签

<file ={base64}>

base64为base64文件流，这样做在chrome上是没有问题，在ie11上，我是在前端，把base64通过atob()转成blob二进制，尤其格外注意，正常使用是<file ={{blob}}>，但是这样会页面崩溃，原因是每次点击react会渲染多次，因此直接传blob流是行不通，应该传的是一个对象，他应该有这样的结构：

detaill:{
data:’""
}

然后把detail这个对象传过去
flie={detail}
完美解决

其他问题

由于base64一般都很长，在后端传过来的数据前端会接收到大量的\r\n，就是换行符，但是atob这个方法转出来的是不认换行符，所以需要在前端或者后端把数据进行处理，删除掉这些\r\n才能正常。