美文网首页
使用chrome直接预览pdf,并控制显示模式

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

作者: 程阳阳_e86e | 来源:发表于2019-03-08 11:49 被阅读0次

实现方式

前端使用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参数是生效的

相关文章

网友评论

      本文标题:使用chrome直接预览pdf,并控制显示模式

      本文链接:https://www.haomeiwen.com/subject/gwxrpqtx.html