移动端嵌入PDF仅显示第一页的问题求助

嗨，我之前做移动端项目时也碰到过一模一样的问题！先把你的代码贴出来方便大家参考：

<iframe src="soz.pdf" frameborder="0" id="myiframe" style="height:100%; width:100%;">

给你几个亲测有效的解决思路，你可以挨个试试：

• 给PDF链接加显示参数：在PDF的src后面加上#toolbar=0&view=fitH，强制让PDF自适应容器宽度并完整展示内容，修改后的代码是：

  <iframe src="soz.pdf#toolbar=0&view=fitH" frameborder="0" id="myiframe" style="height:100%; width:100%;">
  

  这个参数能告诉浏览器以自适应高度的方式渲染PDF，很多时候能直接解决移动端只显示第一页的问题。

• 修复iframe的高度设置问题：移动端的height:100%经常会因为父元素没有明确高度值而失效，你可以先给iframe的父容器加上style="height:100vh; width:100%; margin:0; padding:0;"，确保iframe能拿到完整的视口高度。如果还是不行，试试用JS动态计算PDF的实际高度：

  const iframe = document.getElementById('myiframe');
  iframe.onload = function() {
    // 动态设置iframe高度为PDF的实际内容高度
    this.style.height = this.contentWindow.document.body.scrollHeight + 'px';
  }
  

• 替换成PDF.js渲染（进阶方案）：如果原生iframe的兼容性还是不好，推荐用PDF.js来渲染PDF，它对移动端的适配更稳定，能完整展示所有页面。你只需要引入PDF.js的相关文件，写几行初始化代码就能加载你的PDF文件，避开浏览器原生渲染的各种坑。

备注：内容来源于stack exchange，提问作者Alp Selvi