PDF文件在线预览之pdf.js

  1. 概述
    pdf.js在是一个很成熟的技术了,网上也有很多相关的资料。但是都相对比较零散,所以当时我在做的时候还是花了较多的一个时间。本文在这里主要是对自己当时在处理时候碰到的一些相关问题做一个整理记录。

  2. 文件测试预览
    版本:stable(v1.7.225)
    下载后的压缩包解压后包含web和build两个文件夹。在iis下添加网站,指定物理路径并配置完成后。在浏览器中打开web文件夹下viewer.html文件可直接测试。
    pdf.js测试预览图
    可通过修改web文件夹下view.js内的DEFAULT_URL地址,更换显示文件(文件地址需要是相对路径)。
    pdf.js文件路径

  3. 项目应用
    在使用的时候直接把解压后的整个文件放到项目中。通过在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 =’’;)删掉。

  1. 工具栏汉化
    pdf.js是自动根据浏览器语言来判断使用的语言,如果工具栏显示的不是中文在iis网站配置中,添加一条MIME文件类型就可以了,扩展名:.properties,文件类型:application/l10n

  2. 其他说明
    pdf.js:官网地址
    stable(v1.7.225)版本 下载地址,也可以通过上面的官网下载。
    以上内容只是一次项目应用的过程记录,仅供有需要的人员作为参考。如有不明之处可以加QQ群(634627339)一起探讨学习。

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值