PDF文件在线预览之pdf.js

概述
pdf.js在是一个很成熟的技术了，网上也有很多相关的资料。但是都相对比较零散，所以当时我在做的时候还是花了较多的一个时间。本文在这里主要是对自己当时在处理时候碰到的一些相关问题做一个整理记录。
文件测试预览
版本：stable(v1.7.225)
下载后的压缩包解压后包含web和build两个文件夹。在iis下添加网站，指定物理路径并配置完成后。在浏览器中打开web文件夹下viewer.html文件可直接测试。

可通过修改web文件夹下view.js内的DEFAULT_URL地址，更换显示文件(文件地址需要是相对路径)。
项目应用
在使用的时候直接把解压后的整个文件放到项目中。通过在view.html文件后添加地址参数file，便可以正常使用。例：…/web/viewer.html?file=xxx.pdf。还有一点不要忘了删除view.js文件中的默认文件地址（var DEFAULT_URL = ‘默认地址’）。这种方式只能预览相对目录下的文件。如果需要显示项目外的文件或者跨域显示可以通过文件流的方式处理。

文件流处理方式：
在view.html页面内添加代码：

<script type="text/javascript">   var BASE64_MARKER = ';base64,';var preFileId = "";var pdfAsDataUri = "";var DEFAULT_URL$(document).ready(function () {Request = GetRequest();preFileId = Request["id"];$.ajax({type: "post",async: false,                    contentType: "application/pdf;charset=utf-8",url: 读取文件流地址,success: function (data) {var pdfAsDataUri = data;var pdfAsArray = convertDataURIToBinary(pdfAsDataUri);DEFAULT_URL = pdfAsArray;}});});function convertDataURIToBinary(dataURI) {   //编码转换var raw = window.atob(dataURI);//这个方法在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>

后台发送的文件流需要base64编码后在发送，不然拿到的很可能是乱码而无法正常解析。记得使用文件流的方式显示要把view.js里面的这行代码(var DEFAULT_URL =’’;)删掉。

工具栏汉化
pdf.js是自动根据浏览器语言来判断使用的语言，如果工具栏显示的不是中文在iis网站配置中,添加一条MIME文件类型就可以了，扩展名:.properties，文件类型:application/l10n
其他说明
pdf.js：官网地址
stable(v1.7.225)版本下载地址，也可以通过上面的官网下载。
以上内容只是一次项目应用的过程记录，仅供有需要的人员作为参考。如有不明之处可以加QQ群（634627339）一起探讨学习。

PDF文件在线预览之pdf.js相关推荐

html5 pdf.js 使用方法,PDF 文件在线预览(pdf.js 使用教程)
因项目开发需要在线展示 PDF文件,为解决 PDF文件在浏览器打开后电子签章.电子签名等展示不全且部分浏览器兼容问题特利用pdf.js解决该问题: pdf.js框架为HTML5,无需任何本地支持,兼 ...
pdfjs-dist 实现pdf文件在线预览
pdfjs-dist 实现pdf文件在线预览实现效果实现过程 (1)安装pdfjs-dist (2)代码部分 (3)原理项目要求实现pdf文件在线预览,并且pdf预览通过上下页滚动pdf,且兼容 ...
网页中动态嵌入PDF文件/在线预览PDF内容
网页中动态嵌入PDF文件/在线预览PDF内容https://www.cnblogs.com/xgyy/p/6119459.html #网页中动态嵌入PDF文件/在线预览PDF内容# 摘要:在web开发 ...
java flexpaper_java web word文件 pdf文件在线预览源码(flexpaper)
[实例简介]java web word文件 pdf文件在线预览源码经过测试 [实例截图] [核心代码] BrowsenOnline html, body{ height:100%; } body { ...
文件在线预览图片 PDF Excel Word
1.前端实现pdf文件在线预览功能方式一.pdf文件理论上可以在浏览器直接打开预览但是需要打开新页面.在仅仅是预览pdf文件且UI要求不高的情况下可以直接通过a标签href属性实现预览 <ah ...
vue-pdf实现pdf文件在线预览
1. 前言 PDF文件在线预览的功能相信大家都是有遇到过的, 但在我平时的项目中, 公司提供了相应的插件, 但是在h5等其他项目中, 我们还是只能靠自己呀! 今天就大概说一下 vue-pdf 这个组件 ...
vue 实现pdf文件在线预览
PDF文件在线预览的功能相信大家都是有遇到过的,这边有两种实现方法,大家可以借鉴参考下第一种,使用vue-pdf 安装 npm install --save vue-pdf 页面代码 <tem ...
文件被损坏 java_使用PDF.JS实现pdf文件在线预览时，报文件被损坏的错误
首先大概说明一下问题出现的背景:我用PDF.JS实现文件在线预览,参考网上的办法,在jsp文件中使用 ?file=" width="1024" height=" ...
java集成pdf.js实现pdf文件在线预览
最近项目需要实现在线预览pdf文件功能,找来找去,发现有个pdf.js的类库挺好用,直接用js实现在线预览. pdf.js是开源项目,github的地址: https://github.com/moz ...

PDF文件在线预览之pdf.js

PDF文件在线预览之pdf.js相关推荐

最新文章

热门文章