实现方式
前端使用iframe,地址直接指向pdf的下载地址,后端直接将文件内容写入到HttpServletResponse的输出流中,前端就会自动使用chrome浏览器在iframe中显示pdf内容
后端注意事项
需要指定响应头信息,如下:
resp.setHeader("Content-Disposition", "filename=" + URLEncoder.encode(attm.getOriginName(), "UTF-8"));
需要注意三点:
- 必须指定Content-Disposition,如果不指定的话,chrome也会正确预览,但是下载时自动填充的文件名为页面的访问地址,而不是正常的文件名
- Content-Disposition,值直接使用“filename=”,而不要写成“attachment;filename=”,如果带有attachment的话,iframe访问时会直接触发浏览器的下载动作
- 文件名必须使用URLEncoder进行转码,否则chrome或firefox填充文件名时会是乱码
前端注意事项
chrome打开pdf时,有时默认的缩放大小会很小,需要点击自适应按钮,去适应屏幕大小
在网上查询后,找到解决方案如下:
pdf的预览地址后边可以跟一些控制参数,如#page=2,打开自动跳到第2页,view=Fit视图直接自适应等
经过测试,view=FitH,top 可以实现直接在iframe中全屏展示
注意:如果要加多个参数,按如下格式
http://xxxx.com/xxxx#page=1&view=FitH,top
打开pdf时,会按照参数的顺序执行,所以有的参数必须放到前边,如上例,page必须在view前边
更详细的参数支持,看附件中的文档
参考链接
所有支持的参数,第二个链接的文档里都有,并且可以直接在这个链接的地址上测试这些参数
经测试,有些参数在chrome中并不生效,如:pagemode=thumbs,应该是展示缩略图,但是并没有展示缩略图,但是page 或 view参数是生效的