-
概述
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 =’’;)删掉。