接收后端返回的pdf文件流 前端实现预览(下载 打印 搜索内容 )

首先 说下这方面的需求: 向后台发送对应的id参数 拿到相关pdf的文件流 如下:

接收后端返回的pdf文件流 前端实现预览(下载 打印 搜索内容 )_第1张图片
由于没做过pdf预览功能 在网上看了好多教程 眼花缭乱 同时也试了很多种 不是报错 就是 报错

其中Vue的教程 下载插件vue-pdf 根据文档教程满足我的需求 也实现了我想要的效果 但是做的项目是之前的老项目 纯原生写的 所以还是要看pdf.js的官网

废话不多说 直接说下我过程中实现的步骤:

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

②: 解压包到项目 目录中
接收后端返回的pdf文件流 前端实现预览(下载 打印 搜索内容 )_第2张图片

③:修改viewer.js

  • var DEFAULT_URL = ‘compressed.tracemonkey-pldi-09.pdf’ //里面是PDF的路径删除该变量定义(注释掉)

接收后端返回的pdf文件流 前端实现预览(下载 打印 搜索内容 )_第3张图片

  • 再找到 2080 行
  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');
        }
      }

④:打开viewer.html 在 上方添加以下代码:

 <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>

⑤调用:

需要展示pdf文档的页面盒子
接收后端返回的pdf文件流 前端实现预览(下载 打印 搜索内容 )_第4张图片
把viewer.html 用iframe嵌套进去

在这里插入图片描述
我在viewer.html下一步请求操作:

接收后端返回的pdf文件流 前端实现预览(下载 打印 搜索内容 )_第5张图片

页面显示效果:

接收后端返回的pdf文件流 前端实现预览(下载 打印 搜索内容 )_第6张图片

接收后端返回的pdf文件流 前端实现预览(下载 打印 搜索内容 )_第7张图片

注: 自己更改下默认样式 来搭配自己项目主体(其工具栏中文报错:要部署在服务器上才会生效 可自行搭建服务器查看)

帮到点个哈~

你可能感兴趣的:(pdf.js,javascript,html5,pdf.js,pdf预览,pdf文件流预览下载)