精华内容
下载资源
问答
  • 利用pdfJS实现以读取文件流方式在线展示pdf文件

    万次阅读 热门讨论 2018-09-04 19:11:36
    我使用这个插件的原因是在移动端,android微信无法在线预览,原因是微信android使用x5的内核,就是QQ浏览器的那个貌似它只要检测到文件流,就会直接下载。 官网地址:http://mozilla.github.io/pdf.js/ 下载PDF.....

    PDF.js 的使用

    PDFJS是在线预览PDF的一款神器。 对于PC端浏览器,一般直接提供pdf文件,iframe一下就可以直接预览了。我使用这个插件的原因是在移动端,android微信无法在线预览,原因是微信android使用x5的内核,就是QQ浏览器的那个貌似它只要检测到文件流,就会直接下载。
    官网地址:http://mozilla.github.io/pdf.js/

    • 下载PDF.js
      笔者下载是1.9.426 如图
      下载版本
      解压后有 web 和 build 两个文件夹 如图
      解压后示意图

    • 运行示例
      将解压后的文件夹直接丢到tomcat下 访问 ip:port/文件夹名称/web/viewer.html
      显示的是 web 文件夹下的compressed.tracemonkey-pldi-09.pdf
      这里写图片描述

        try {
          var viewerOrigin = new URL(window.location.href).origin || 'null';
          if (HOSTED_VIEWER_ORIGINS.indexOf(viewerOrigin) >= 0) {
            return;
          }
          var fileOrigin = new URL(file, window.location.href).origin;
          //跨域请求错误提示
          //if (fileOrigin !== viewerOrigin) {
            //throw new Error('file origin does not match viewer\'s');
          //}
        } catch (ex) {
          var message = ex && ex.message;
          PDFViewerApplication.l10n.get('loading_error', null, 'An error occurred while loading the PDF.').then(function (loadingErrorMessage) {
            PDFViewerApplication.error(loadingErrorMessage, { message: message });
          });
          throw ex;
        }

    获取服务端文件流

    • 服务端代码
    //跨域请求
    String s0 = "C:11.pdf"
    response.setHeader("Access-Control-Allow-Origin", "*"); 
    File file = new File(s0);
    response.setContentLength((int) file.length());
    response.setHeader( "Content-Disposition", "attachment;filename=" + URLEncoder.encode(file.getName(), "UTF-8"));// 设置在下载框默认显示的文件名
    response.setContentType("application/octet-stream");// 指明response的返回对象是文件流
    // 读出文件到response
    // 这里是先需要把要把文件内容先读到缓冲区
    // 再把缓冲区的内容写到response的输出流供用户下载
    FileInputStream fileInputStream = new FileInputStream(file);
    BufferedInputStream bufferedInputStream = new BufferedInputStream(fileInputStream);
    OutputStream outputStream = response.getOutputStream();
    byte buffer[] = new byte[1024];
    int len = 0; 
    while ((len = bufferedInputStream.read(buffer)) > 0) {
        outputStream.write(buffer, 0, len);
    }
    // 人走带门
    bufferedInputStream.close();
    outputStream.flush();
    outputStream.close();
    展开全文
  • PDF.JS-文件流方式在线展示pdf文件

    千次阅读 2020-09-03 12:19:04
    目前所在项目要求实现在线预览PDF...下载后解压文件,直接拖进项目里就可以: 一些其博客说要把viewer.js里面的 defaultUrl: { value: "compressed.tracemonkey-pldi-09.pdf", kind: OptionKind.VIEWER ...

    目前所在项目要求实现在线预览PDF功能,于是百度查了一些资料,借鉴了一些大佬好的想法,特总结下来,供参考。


    PDFJS是在线预览PDF的一款神器,官网地址:http://mozilla.github.io/pdf.js/


    下载后解压文件,直接拖进项目里就可以:



    一些其博客说要把viewer.js里面的

      defaultUrl: {
        value: "compressed.tracemonkey-pldi-09.pdf",
        kind: OptionKind.VIEWER
      }

    该变量定义置空为:

      defaultUrl: {
        value: "",
        kind: OptionKind.VIEWER
      }

    这一步我没有操作最后也实现功能,所以可以操作可以不操作。


    这个时候直接ip:端口+路径是能访问到pdf文件的。但是如果需要访问服务器文件的话,需要注意文件地址。

    对于服务器文档流,网上网友的博客说的方法把拿到的文件流转化为url地址,然后我调用了后台的文件下载方法,并根据方法转换blob

    但是最后出现的pdf,页码和后台实现的页数一样,但是每一页都是空白。所以这个方法以失败告终。

    不转换直接文件流当作地址赋值过去的方法也未能实现。


    后来在查找网友资料的时候,发现一个网友直接调用接口的方法,

    该网友博客文章地址:https://blog.csdn.net/mufeng633/article/details/82983234?utm_source=app


    于是尝试直接调用之前写好的下载文件的后台方法,(如果你的项目有下载文件的方法,可以尝试直接用接口+参数访问)

    $scope.print = function () {
                var fileId="20190511001761600"; 
            	window.open('../Print/web/viewer.html?file=' +encodeURIComponent("/pmis-webteam/uploadFileDownload.do?id="+fileId));
      }

    此上方法测试可以用于Chrome、Edge 浏览器。


    Safari 浏览器中没办法在回调函数里面执行window.open, 原因是safari的安全机制将其阻挡了”。

    解决办法:在请求之前先打开一个空白窗口,在请求成功的回调函数里面:如果请求错误不需要开页,则将开的空白窗口关掉;否则修改当前打开空白窗口的location地址 。

    	$scope.print = function () {
    	   
    	   var param = {
    	      
    	   };
    	   //获取当前操作系统参数
    	   var _pf=navigator.platform; 
    	   //var appVer=navigator.userAgent; 
    	   if(_pf.indexOf("Win") > -1){//window系统支持chrome,Edge
    		   $remote.post("XXXXXXX.do", param, function (data) {
    			      var fileId=data.countMap.FilePath;
    			      window.open('../Print/web/viewer.html?file=' +encodeURIComponent("/pmis-webteam/sealFileDownload.do?id="+fileId));
    		   }); 
    	   }else if(_pf.indexOf("Mac") > -1){mac系统支持safari
    		   var winRef = window.open("","_blank");//先打开一个页面
    		   $remote.post("XXXXXXX.do", param, function (data) {
    			      var fileId=data.countMap.FilePath;
    			      if(fileId){
    			    	  winRef.location='../Print/web/viewer.html?file=' +encodeURIComponent("/pmis-webteam/sealFileDownload.do?id="+fileId);
    			      }else{
    			    	  winRef.close();
    			      }
    		   });
    	   }else{
    		   $remote.post("XXXXXXX.do", param, function (data) {
    			      var fileId=data.countMap.FilePath;
    			      window.open('../Print/web/viewer.html?file=' +encodeURIComponent("/pmis-webteam/sealFileDownload.do?id="+fileId));
    		   });
    	   }
    	   
    	};

     XXXXXXX.do为后台生成pdf交易,生成交易返回data


    到此:文档可以成功预览,本地和服务器部署都可以实现预览。

     

    除了上面给出的一篇博客提示我尝试调用后台下载接口.

    还有一篇博客大家可以看下:https://www.jianshu.com/p/242525315bf6

    展开全文
  • 第二步:构建PDF.js 第三步:修改viewer.js var DEFAULT_URL = 'compressed.tracemonkey-pldi-09.pdf' 里面是PDF的路径 ...第四步:通过ajax的方式获取文件流数据,并处理。 var DEFAULT_URL = ""...

    第一步:下载源码https://github.com/mozilla/pdf.js

    第二步:构建PDF.js

    第三步:修改viewer.js

    var DEFAULT_URL 'compressed.tracemonkey-pldi-09.pdf'  里面是PDF的路径

    删除该变量定义;

    第四步:通过ajax的方式获取文件流数据,并处理。

    var DEFAULT_URL = "";//注意,删除的变量在这里重新定义
    var PDFData = "";
    $.ajax({
        type:"post",
        async:false,
        mimeType: 'text/plain; charset=x-user-defined',
        url:文件流请求地址,
        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;

     第五步:将上面的代码作为js文件或是代码片段,加入viewer.html(上面的代码要放在<script src="viewer.js"></script>引入之前)。

    后端代码片段

    response.setStatus(HttpServletResponse.SC_OK);
    response.setContentType("application/pdf;charset=UTF-8");
    input = new BufferedInputStream(httpUrl.getInputStream());
    byte buffBytes[] = new byte[1024];
    out = response.getOutputStream();
    int read = 0;  
    while ((read = input.read(buffBytes)) != -1) {  
        out.write(buffBytes, 0, read);  
    }
    out.flush();  
    out.close(); 

     

    备注:附件为构建后的PDF.js

    展开全文
  • pdf.js用方式展示pdf文件

    千次阅读 2018-05-03 10:56:05
     url:文件流请求地址,   success:function(data){   PDFData = data;   }  });  var rawLength = PDFData.length;  //转换成pdf.js能直接解析的Uint8Array类型,见pdf.js-4068  var array = new Uint8...

    修改viewer.js

          var DEFAULT_URL 'compressed.tracemonkey-pldi-09.pdf'  里面是PDF的路径 删除整条数据,在viewer.html中重新定义

    引入Jquery

     以下代码放在viewer.html中


    ajax代码部分


    var DEFAULT_URL = "";//刚才删除的变量在这里重新定义  

    var PDFData = "";

    $.ajax({  
        type:"post",  
        async:false,  //
        mimeType: 'text/plain; charset=x-user-defined',  
        url:文件流请求地址,  
        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 src="viewer.js"></script>

    一定要注意以上代码要放在<script src="viewer.js"></script>引入之前


    java代码部分

        我是从Oracle取的blob,sql就不写了

    String filePath = "temp" + File.separator ; //file存放地址,temp是tomcatbin目录下的 
    String path = filePath + File.separator + name;//file的路径,name是文件的名字
    File pdfFile = new File(path + File.separator + name + "pdf.pdf");
    if (!pdfFile.exists()) {//判断本地文件,减少数据库压力
    Blob sbrpdf = dsDeclarer.getBlob(0, "namepdf");
    InputStream is = sbrpdf.getBinaryStream();
    byte[] b = new byte[(int) sbrpdf.length()];
    is.read(b);
    is.close();//记得关闭流
    RaterUserBiz.createDir(path);
    FileIOUtil.writeBytesToFile(b, pdfFile);

    }

                    //接下来的流往哪里传输根据需求,这里不写了,有问题的话发评论我看到就会回复

    展开全文
  • 前端展示pdf流文件

    千次阅读 2020-04-14 17:48:44
    参考文章https://www.jianshu.com/p/242525315bf6 参考文章... 下载PDFJS:https://mozilla.github.io/pdf.js/ 支持获取文件流到客户端,生成blob地址预览 <iframe id="PDF" src...
  • } } /** * 请求别人的图片url地址,获得文件流 * * @param imgUrl * @return */ public static InputStream getInputStream(String imgUrl) { InputStream inputStream = null; HttpURLConnection httpURLConnection...
  • 文件流的形式把文件展示到页面

    千次阅读 2015-06-12 10:42:09
    * 文件通过端 输出 输出到客户 * * @param filePath 文件完全路径 /opt/xxx/xxx.doc * @param servletResponse controller 的 输出对象 * @see [相关类/方法](可选) * @since [产品/模块版本](可选) */ ...
  • vue文件下载,java读取SFTP文件通过方式输出到前端 java后台Controller层代码 @RequestMapping("downloadFile") public void downLoadFile(HttpServletRequest req, HttpServletResponse response) { String...
  • vue+axios展示二进制文件流图片

    千次阅读 2020-04-15 09:15:19
    1、请求方式 axios({ url: '请求地址', responseType: 'arraybuffer', method: 'get/post'...2、展示方式 两种展示方式任意选择 1、const url = URL.createObjectURL(new Blob([res])) 2、const url = `data:i...
  • 最近领导让研究H5如何通过后端返回方式去预览PDF文件,通过实践,现总结如下: 一.导入插件pdf.js,先去官网下载插件: http://mozilla.github.io/pdf.js/getting_started/#download, 插件目录如下图: ...
  • 前端请求数据后返回的二进制文件流乱码处理后在html页面中展示
  • pdf.js展示流文件

    千次阅读 热门讨论 2018-01-26 16:32:11
    下载pdf.js文件http://mozilla.github.io/pdf.js/ 把viewer.js中的var DEFAULT_URL删除 viewer.html 中添加 DEFAULT_URL 把地址改成的地址,切记viewer.js在最后 link rel="resource" type
  • 前端有时会在页面展示pdf文件,falsh也可以展示pdf文件,但是效果不好,不可控制。...1.pdf.js 可以从后台获取二进制pdf流文件展示,或者常规拥有URL的pdf文件 2.可控用户是否有权限下载,打印。 3.可控用户...
  • 从FTP获取PDF文件流展示到页面

    千次阅读 2017-09-10 10:54:35
    背景描述:从FTP获取PDF,并将其展示到页面,以达到预览的效果 Java:代码   ftpClient.connnect(ip,port);  ftpClient.setFileType(FTP,.BINARY_FILE_TYPE);  ftpClient.login(userId,password);  ...
  • 这里的 responseType看网上很多种,但是我的这里就是用这个才可以展示成功的,如果这种类型不行,就多试试。 // 预览成果物文件 export const PreviewFile=(data)=>{ return request({ url:"/FileHandle/...
  • 后台直接给了一个接口给我,一调用就会直接传个pdf 文件给我, 请问一下我怎么在线展示,还有下载。 获取到之后我 console.log(data) 打印出了以下的代码:...就是不知道怎么在线展示,还有怎么做成PDF文件下载。
  • 近日项目用到的用文件流传递pdf文件的情况,后端将数据流传到前端,需要前端进行处理然后再预览下载,总结了一下几点方法, 1.PC端 一开始想引用pdf.js插件进行实现,但是总是白屏,借鉴的文章是...
  • 1.图片的流方式显示,在controller中创建以下方法:public void showImage(HttpServletRequest request, HttpServletResponse response) throws Exception { response.setContentType("image/jpeg"); // 获取图片...
  • 需求:实现服务器上excel文件转html,然后在浏览器上以方式读出(不让用户看到文件存放位置): Java以字节读取html文件,然后想在前台显示:读取html代码如下: response.setContentType("multipart/form-...
  • java后台以IO的形式将文件返回给前台进行展示

    万次阅读 多人点赞 2018-10-13 14:03:26
    后台根据指定路径将文件的形式返回前台进行展示 将本地磁盘的图片文件的形式返回给前台,前台可以用来进行图片展示。 1.配置文件内:配置路径信息 #图片保存路径 本地磁盘C 下面的“XX文件夹”内放置上传的...
  • 1.到官网下载包... 2.解压包到开发工程中 3.修改viewer.js 1)var DEFAULT_URL = 'compressed.tracemonkey-pldi-09.pdf' 里面是PDF的路径删除该变量定义; 2)...
  • 1.下载依赖包 代码如下(示例): npm install react-pdf 2.引入依赖包 ... file={this.state.PDFBlob} //文件路径或者base64 // onLoadSuccess={onDocumentLoadSuccess} //成功加载文档后调用 onLoadE
  • 之前在做一个项目时用到了图片上传并立即展示到页面浏览,而且图片存放在硬盘上的一个文件夹中而非...所以这时就需要用到i/o读取图片并展示,以下是具体步骤: 1.图片展示页面showImg.jsp String path = request.
  • vue-pdf 通过文件流预览pdf文件

    万次阅读 热门讨论 2019-07-15 17:39:59
    而后端不想去处理跨域情况,所以后面就考虑到使用文件流的形式去处理。 首先,下载vue-pdf npm install vue-pdf -D 其次,模板里面引入vue-pdf import pdf from 'vue-pdf' html: <pdf :src="src"></...
  • 摈弃第三方图片存储,后端使用java语言开发,图片相关操作使用ftp的流文件传输方式,前端无法使用传统显示图片的方式来显示,需要对返回数据进行编码处理; 整体思路 定义请求返回的数据为二进制类型——对返回...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 196,283
精华内容 78,513
关键字:

文件流展示方式