记录一下上周五遇到的一个小问题-----------关于返回流的PDF在线预览及IE适配的问题_embed可以预览本地文件但是不能预览servlet

作者：笔触狂放9 | 2024-06-16 06:41:13

踩

embed可以预览本地文件但是不能预览servlet

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

直接贴代码了

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

前端用了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"));
		}
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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

 /**
     * 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;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

/**
	 * 为了复用
	 * @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);
				}
			}
		}
	}**
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

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

	**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浏览器
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/725553