使用pdfjs提供的viewer.html展示pdf文件流

1.到官网下载包https://github.com/mozilla/pdf.js/releases/download/v1.10.88/pdfjs-1.10.88-dist.zip

2.解压包到开发工程中

3.修改viewer.js

1)var DEFAULT_URL = 'compressed.tracemonkey-pldi-09.pdf'  里面是PDF的路径删除该变量定义;

2)1899行

var fileOrigin = new URL(file, window.location.href).origin;
  if (fileOrigin !== viewerOrigin) {
    throw new Error('file origin does not match viewer\'s');
}

修改为

      if (file && 'byteLength' in file) {
      } else{
        var fileOrigin = new URL(file, window.location.href).origin;
        if (fileOrigin !== viewerOrigin) {
          throw new Error('file origin does not match viewer\'s');
        }
      }

 4.修改viewer.html,在

<script src="viewer.js"></script>

前加入以下内容(jquery-3.3.1.min.js请自行下载)

    <script src="../../js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
    function getArgsFromHref(sArgName){
    //   var sHref=window.location.href;
      var sHref = location.search;
      var args = sHref.split(sArgName+"=");
      var retval = "";
      //args is null
      if(args[0] == sHref){
        return retval;
      } 
      var retval = args[1];
      return retval;
    }
    
    var url_file=getArgsFromHref("url_file");
    
    var DEFAULT_URL = "";//注意,删除的变量在这里重新定义  
    var PDFData = "";
    $.ajax({
      type:"post",
      async:false,
      mimeType: 'text/plain;charset=x-user-defined',
      url:url_file,
      success:function(data){
         PDFData = data;
      }
    });
    
    var rawLength = PDFData.length;
    //转换成pdf.js能直接解析的Uint8Array类型,见pdf.js-4068  
    var array = new Uint8Array(new ArrayBuffer(rawLength));    
    for(i = 0; i < rawLength; i++) {  
      array[i] = PDFData.charCodeAt(i) & 0xff;
    }  
    DEFAULT_URL = array;
    </script>

5.调用示例:

viewer.html?url_file=printcontroller.do?viewfile&id=9999

 

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值