使用chrome直接预览pdf,并控制显示模式

实现方式

前端使用iframe,地址直接指向pdf的下载地址,后端直接将文件内容写入到HttpServletResponse的输出流中,前端就会自动使用chrome浏览器在iframe中显示pdf内容

后端注意事项

需要指定响应头信息,如下:

resp.setHeader("Content-Disposition", "filename=" + URLEncoder.encode(attm.getOriginName(), "UTF-8"));

需要注意三点:

  1. 必须指定Content-Disposition,如果不指定的话,chrome也会正确预览,但是下载时自动填充的文件名为页面的访问地址,而不是正常的文件名
  2. Content-Disposition,值直接使用“filename=”,而不要写成“attachment;filename=”,如果带有attachment的话,iframe访问时会直接触发浏览器的下载动作
  3. 文件名必须使用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前边
更详细的参数支持,看附件中的文档

参考链接

stackoverflow 搜到的问题

adobe官方文档

所有支持的参数,第二个链接的文档里都有,并且可以直接在这个链接的地址上测试这些参数

经测试,有些参数在chrome中并不生效,如:pagemode=thumbs,应该是展示缩略图,但是并没有展示缩略图,但是page 或 view参数是生效的

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容