PDF和图片以流的方式输出到前台预览总结

最新推荐文章于 2024-05-08 14:21:21 发布

一叶柒刺郎

最新推荐文章于 2024-05-08 14:21:21 发布

阅读量4k

点赞数 2

分类专栏：工具工具类

本文链接：https://blog.csdn.net/weixin_42410730/article/details/90728366

版权

工具同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

工具类

7 篇文章 0 订阅

订阅专栏

1.pdf预览用的是pdf.js，参考步骤：https://zhixinghh-163-com.iteye.com/blog/2315574
2.pdf预览的前后台关键代码（前提是下载到pdf.js压缩包）
（1）直接点击文件调用window.open（viewer.html路径+fileName）,并在url拼接文件名
（2）.在view.html中对其中的css和js设置正确的路径
（3）viewer.js中增加代码：


var DEFAULT_URL ='';//注意，删除的变量在这里重新定义
var PDFData = "";
getStream()
function getStream(){
    //获取当前网址，如： http://localhost:8083/uimcardprj/share/meun.jsp
    var curWwwPath = window.document.location.href;
    //获取主机地址
    var rootPathPos = curWwwPath.indexOf("sofa-portal");
    var rootPath = curWwwPath.substring(0,rootPathPos)
    var todoPath = rootPath+"acs-todo/";
    var pos = curWwwPath.indexOf("=");
    //获取pdf名称
    var pdfName = curWwwPath.substring(pos+1,curWwwPath.length);
  $.ajax({
    type:"post",
    async:false,
    mimeType: 'text/plain; charset=x-user-defined',
 //向后台发请求，直接请求流，并携带文件名字
    url:todoPath+"serviceArea.ctrl?method=viewFile&name="+pdfName,
    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;
}
//然后修改viewer.js中默认识别的文件路径
  defaultUrl: {
    value:DEFAULT_URL ,此处的url来自于上面设置的
    kind: OptionKind.VIEWER
  },

（5）.后台代码（都是以字节流的格式输出，只是根据不同文件格式设置不同的response.setcontentType）

    @RequestMapping(params = "method=viewFile")
    public void copeFile(HttpServletRequest request, HttpServletResponse response) {
        BufferedInputStream bis = null;
        BufferedOutputStream bos = null;
        try {
           //转码
            String fileName = new String(request.getParameter("name").getBytes("iso-8859-1"),"UTF-8");
            // 文件扩展名
          String ext = fileName.substring(fileName.indexOf(".")+1);
            // 上传文件目录
           String initPath = INIT_PATH + "\\" + fileName;
           log.info(">>>>>>>>>>>>>>>>>>在线预览文件全路径为："+initPath);
            bis = new BufferedInputStream(new FileInputStream(initPath));
             bos = new BufferedOutputStream(response.getOutputStream());
             //判断文件格式,设置相应的输出文件格式
             if (ext.equals("jpg") || ext.equals("JPG") || ext.equals("tiff")||
                     "tif".equals(ext)||"TIF".equals(ext)||"TIFF".equals(ext)) {
                 response.setContentType("image/jpeg");
             } else if (ext.equals("png") || ext.equals("PNG")) {
                 response.setContentType("image/png");
             } else if (ext.equals("pdf") || ext.equals("PDF")) {
                 response.setContentType("application/pdf");
             }
            byte b[] = new byte[1024];
            int read;
                while ((read = bis.read(b)) != -1) {
                    bos.write(b, 0, read);
                }
                log.info("文件流写出完毕》》》》》》》》》");
        }catch(Exception e){
            AJAXUtil.failure(response,e.getMessage());
            return;
        }finally{
            try{
                if(bos != null){
                    bos.flush();
                    bos.close();
                }
                if(bis != null){
                    bis.close();
                }
            } catch (IOException e) {
                AJAXUtil.failure(response, e.getMessage());
            }
        }
    }

4.图片预览的关键代码
（1）前台

%--   <html:resource/> --%>
    <html:onReady>
    //初始化执行动态设置图片标签请求路径
	setSrc();
   </html:onReady>
<script type="text/javascript">

//传入不同文件名
function setSrc(){
	var imgName = '<%=name%>';
	var todoPath = '<%=todoPath%>';
	var path = todoPath+"serviceArea.ctrl?method=viewFile&name="+imgName;
document.getElementById("img").src=path
}
</script>

<body>

//关键的图片预览标签 src设置好就可以预览
<img id ="img" alt="" src="" title="" style="width: auto;height: auto">
</body>

（2）后台代码跟上面pdf预览一样只是设置response.contenttype为对应图片格式即可

一叶柒刺郎

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
PDF和图片以流的方式输出到前台预览总结

1.pdf预览用的是pdf.js，参考步骤：https://zhixinghh-163-com.iteye.com/blog/23155742.pdf预览的前后台关键代码（前提是下载到pdf.js压缩包）（1）直接点击文件调用window.open（viewer.html路径+fileName）,并在url拼接文件名（2）.在view.html中对其中的css和js设置正确的路径（3）vi...
复制链接

扫一扫