PDF.js 预览pdf文件流预览pdf,及ie浏览器兼容性问题,解决方案!!(开发笔记)
一、
官网下载pdf.js :Getting Started
注意: 这俩包 都不支持ie,因为用的是es6,ie解析不出来
下完以后引进去。下面为省事 找几个市面上常用的方法:
1、文件流转base64的
这是在自己的js请求里面
//PDFdata 是ajax请求回来的data,里面是二级制流var rawLength = PDFData.length;//转换成pdf.js能直接解析的Uint8Array类型,见pdf.js-4068var array = new Uint8Array(new ArrayBuffer(rawLength));for (i = 0; i < rawLength; i++) {array[i] = PDFData.charCodeAt(i) & 0xff;}var blob = new File([array], {type: 'application/pdf;charset-UTF-8'});//生成blob url地址var fileURL = window.URL.createObjectURL(blob);var PDFData = fileURL.replace("data:application/pdf;base64,", "");sessionStorage.setItem("_imgUrl", PDFData);window.open("xxxxxx/js/pdfjs/web/viewer.html',"_blank");
在 viewer.html修改: 在这个位置加上下面这个从浏览去获得数据流的
<script>var morenURL = sessionStorage.getItem("_imgUrl");</script>
<script src="../build/pdf.js"></script>
在viewer.js中修改: 就修改这俩就行了
defaultUrl: {value: morenURL, //这个value 对应上面那个html中的那个kind: OptionKind.VIEWER},
然后剩下的就是在后端返回的时候让他返回个流就行就行了,
这样第一种方法就完事了,在市面上常用的浏览器上好使,但是不兼容ie。
2、还有一种在viewer.html中处理的 原理都差不多,个人觉得不好使,就稍微让大家看一下就行,像用的去搜一下就有。
<script type="text/javascript">var DEFAULT_URL = "";var pdfUrl = document.location.search.substring(1);if(null == pdfUrl || "" == pdfUrl){var BASE64_MARKER = ';base64,';//声明文件流编码格式var preFileId = "";var pdfAsDataUri = sessionStorage.getItem("_imgUrl");//这里就是pdf文件的base64码,我是通过session传递base64的var pdfAsArray = convertDataURIToBinary(pdfAsDataUri);DEFAULT_URL = pdfAsArray;//编码转换function convertDataURIToBinary(dataURI) {//[RFC2045]中有规定:Base64一行不能超过76字符,超过则添加回车换行符。因此需要把base64字段中的换行符,回车符给去掉。var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;var newUrl = dataURI.substring(base64Index).replace(/[\n\r]/g,'');var raw = window.atob(newUrl);//这个方法在ie内核下无法正常解析。var rawLength = raw.length;//转换成pdf.js能直接解析的Uint8Array类型var array = new Uint8Array(new ArrayBuffer(rawLength));for (i = 0; i < rawLength; i++) {array[i] = raw.charCodeAt(i) & 0xff;}return array;}}
</script><script src="viewer.js"></script>
就这样,看看就行,这个太麻烦了
3、第三种,也是我这次寻找的一种,兼容ie的。
· 首先项目比较老,2022年了,首先要做到兼容IE,但是这个时间点,ie在一个月前刚刚下市,有点麻烦。
pdfjs官网上说的是不兼容,就很烦人。。。。
因为用上面两种方法,在IE上会出现这种,语法错误。就是不支持ES6
没办法,我就各方寻找研究,看一大哥的一种方法挺好,我就试了试。确实好 !!
首先在自己发请求的js中不用在转换流啥的了,直接把后端请求地址方法pdfjs的path上面
就这样,一句话就够了 ,省事吧!! 注意加上 encodeURIComponent
然后 在viewer.html 中 什么都不用修改。
再然后,在viewer.js中
改成这样:
再改成这样:
就完事了。省事吧!!!
注意后端还是返回的流 !
这样能行,但是在IE上有点问题,因为现在pdf官网上都是用的ES6语法写的,都是let const ,虽然有说是支持旧版本浏览器的, 但是 没用 。大哥说得改成var才行 ,我就又弄了 一下,然后就行了好使了。省事吧!!!
就这样。
还是说 都2022了 首要要保证兼容IE 你说你咋整。
要是有需要兼容IE包的私聊我就行。
就这样
PDF.js 预览pdf文件流预览pdf,及ie浏览器兼容性问题,解决方案!!(开发笔记)相关推荐
- 微信公众号,点击按钮打开pdf文件流,安卓跳转到浏览器里下载,ios可预览但默认不能下载
微信公众号,点击按钮打开pdf文件流,安卓跳转到浏览器里下载,ios可预览但默认不能下载 注:在pc上开始时采用这两种方式是没有效果的,或者打开的是空页面,但上线到公众号是没有问题的!!!!!!!!! ...
- vue中将base64的pdf文件流转换成pdf并预览(一)——vue-pdf组件的基本使用
vue中将base64的pdf文件流转换成pdf并预览(一)--vue-pdf组件的基本使用 vue-pdf组件官网--https://www.npmjs.com/package/vue-pdf 1. ...
- vue中将base64的pdf文件流转换成pdf并预览(二)——base64转PDF工具的使用
vue中将base64的pdf文件流转换成pdf并预览(二)--base64转PDF工具的使用 Base64 to PDF官网 1.官网 官网--https://www.ipvoid.com/base ...
- vue3中将base64的pdf文件流转换成pdf并预览(三)——base64数据转pdf pdf工具栏不显示 vue3-seamless-scroll组件的使用-事件捕获 给接口追加数据
vue3中将base64的pdf文件流转换成pdf并预览(三)--接口base64数据转pdf的处理 & pdf工具栏不显示 & vue3-seamless-scroll组件的使用-事 ...
- pdfh5.js 基于pdf.js和jQuery,web/h5/移动端PDF预览手势缩放插件。
pdfh5.js 基于pdf.js和jQuery,web/h5/移动端PDF预览手势缩放插件. 注意:本地绝对路径地址不能加载,跨域问题用代理或者服务端解决. svg模式渲染存在缺陷,只能渲染普通pd ...
- pdf.js跨域解决方法——远程加载pdf
思路:通过将需要浏览的pdf通过后台转为文件流传给前端,来解决跨域问题. js代码写在viewer.html里,放到引用pdf.js的位置前面 js代码,来接收文件流: <script>v ...
- JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
JS组件系列--Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案 参考文章: (1)JS组件系列--Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案 (2) ...
- react集成react-pdf获取文件流预览下载pdf,展示电子签章
1.下载依赖包 代码如下(示例): npm install react-pdf 2.引入依赖包 代码如下(示例): import { Document, Page } from 'react-pdf' ...
- Vue pdf 文件(文件流)预览,下载,视频下载
pdf文件预览 // 预览 <iframe :src="pdfUrl" frameborder="0" style="width: 100%; ...
最新文章
- 1024 大促书单丨神券在手,快乐我有
- HP-Unix安装Memcache问题
- 裸奔浏览器_【大数据早报】上网=“裸奔”?单凭浏览器历史记录就能锁定身份...
- 浏览器渲染机制面试_面试官不讲码德,问我Chrome浏览器的渲染原理(6000字长文)...
- httpd设置HTTPS双向认证
- Paddle 使用预训练模型 实现快递单信息抽取
- C 语言 —— ! 和 ~(感叹号和波浪号)
- System.ComponentModel.Win32Exception (0x80004005):拒绝访问。——解决办法
- 2019dnf刷图脚本制作教程
- jquery导入数据_【Python成长之路】从 零做网站开发 -- 基于Flask和JQuery,实现表格管理平台...
- 【高中必修二】几何体
- 真 · 神经网络发明人福岛邦彦获奖,Schmidhuber、李飞飞点赞
- java lda主题模型_主题模型(一):LDA 基本原理
- python yolov5 脚本制作(第一部分:环境搭建、yolov5源码、权重文件获取、pycharm配置、pytorch下载、初次运行yolov5代码)
- 电脑狂、理论家、情报员……你是哪种类型的软件工程师?
- 皮卡丘(pikachu)越权漏洞
- [Python] 让AI来解决数独和数独谜题
- 信息安全-大数据安全需求分析与安全保护工程
- 实地审核和系统审核_审查与审核的区别是什么
- 数据结构—查找(顺序查找和折半查找)