记录一下上周五遇到的一个小问题-----------关于返回流的PDF在线预览及IE适配的问题

最新推荐文章于 2022-10-14 19:01:09 发布

各自远扬yyy

最新推荐文章于 2022-10-14 19:01:09 发布

阅读量209

点赞数

分类专栏：填过的坑文章标签： embed IE PDF在线预览 IE浏览器版本识别文件下载

本文链接：https://blog.csdn.net/qq743382668/article/details/90370589

版权

填过的坑专栏收录该内容

7 篇文章 0 订阅

订阅专栏

@使用embed标签实现PDF在线预览

直接贴代码了

<body>
    <div id="app">
    <embed v-bind:src="cldz" type="application/pdf"  id="clShow" height="pixels">
    </div>
  </body>

前端用了vue框架，src中绑定的字段值是一个控制层里的方法

/** 
	*这里有个问题，传入的参数需要编码，所以到了服务端还需要解码一次
	 */
	@ResponseBody
	@GetMapping("downloadCl")
	public void downloadCl(HttpServletResponse response,HttpServletRequest request) {
		String parameter=request.getQueryString();
		String url=getURLDecoderString(parameter);
		String[] params;
		if(StringUtils.isNotBlank(url)) {
			Map<String, String> map=new HashMap<>();
			try {
				params=url.split("&");
				 for(int i=0;i<params.length;i++) {
					 String[] item=params[i].split("=");
					 map.put(item[0], item[1]);
				 }
			}catch (Exception e) {
				LoggerUtil.error("解析材料参数出错："+url, e);
			}
			download(response,MapUtils.getString(map, "name"),MapUtils.getString(map, "src"),MapUtils.getString(map, "clType"));
		}
	}

这一块主要是对参数进行了解码，PS:传入的地址存在大数据对象，直接传服务端会报500

 /**
     * URL 解码
     *
     * @return 
     */
    **public static String getURLDecoderString(String str) {
        String result = "";
        if (null == str) {
            return "";
        }
        try {
            result = java.net.URLDecoder.decode(str, "UTF-8");
        } catch (UnsupportedEncodingException e) {
            LoggerUtil.error("材料路径URL解码失败", e);
        }
        return result;
    }

/**
	 * 为了复用
	 * @param response
	 * @param name
	 * @param src
	 * @param clType
	 */
	**public void download(HttpServletResponse response, String name,String src,String clType) {
		if (name != null) {
		    InputStream is = null;
			BufferedInputStream bs = null;
			OutputStream os = null;
			try {
				byte[] cl=null;
				if(WsCommonConsts.DOWNLOAD_DZJZ.equals(clType)) {
					cl=getDzjzcl(src);
				}else{
					cl=downloadFromFtp(src);
				}
				if (cl!=null) {
					// 设置Headers
					response.setHeader("Content-Type", "application/octet-stream");
					// 设置下载的文件的名称-该方式已解决中文乱码问题
					response.setHeader("Content-Disposition",
							"attachment;filename=" + new String(name.getBytes("gb2312"), "ISO8859-1"));
					is = new ByteArrayInputStream(cl);
					bs = new BufferedInputStream(is);
					os = response.getOutputStream();
					byte[] buffer = new byte[cl.length];
					int len = 0;
					while ((len = bs.read(buffer)) != -1) {
						os.write(buffer, 0, len);
					}
				}
			} catch (IOException ex) {
				LoggerUtil.error("下载文书或材料异常", ex);
			} finally {
				try {
					if (is != null) {
						is.close();
					}
					if (bs != null) {
						bs.close();
					}
					if (os != null) {
						os.flush();
						os.close();
					}
				} catch (IOException e) {
					LoggerUtil.error("关闭流异常", e);
				}
			}
		}
	}**

这里又一个让人头疼的问题，服务端重定向时Chrome及IE11都可以很好的发送请求，唯独IE10出错，后来考虑在发送请求时判断浏览器是否为IE10

	**function IEVersion() {
    var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 
    var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器 
    var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器 
    var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
    if(isIE) {
        var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
        reIE.test(userAgent);
        var fIEVersion = parseFloat(RegExp["$1"]);
        if(fIEVersion == 7) {
            return 7;
        } else if(fIEVersion == 8) {
            return 8;
        } else if(fIEVersion == 9) {
            return 9;
        } else if(fIEVersion == 10) {
            return 10;
        } else {
            return 6;//IE版本<=7
        }  
    } else if(isEdge) {
        return 'edge';//edge
    } else if(isIE11) {
        return 11; //IE11 
    }else{
        return -1;//不是ie浏览器
    }
}

以上，实现了一个支持IE的PDF在线预览功能

各自远扬yyy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
记录一下上周五遇到的一个小问题-----------关于返回流的PDF在线预览及IE适配的问题

@使用embed标签实现PDF在线预览直接贴代码了<body> <div id="app"> <embed v-bind:src="cldz" type="application/pdf" id="clShow" height="pixels"> </div> </body>前端用了vue框架，src...
复制链接

扫一扫