使用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才能正常。