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为对应图片格式即可