移动端Chrome内嵌PDF提示不支持，求全移动端浏览器兼容方案

你当前使用的PDFObject依赖浏览器原生内嵌PDF渲染能力，而绝大多数移动端浏览器（包括移动端Chrome）默认关闭了该能力，因此会出现不支持的提示。我们改用纯JS实现的PDF渲染方案，完全在前端解析渲染PDF，不需要依赖浏览器原生支持，可兼容几乎所有移动端浏览器，用户无需下载即可直接在页面内查看。

修改后的完整代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>企业影响力报告</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* 全局样式 */
body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
}

/* 头部banner样式 */
.header {
  padding: 80px;
  text-align: center;
  background: #1abc9c;
  color: white;
}

/* 头部标题字号 */
.header h1 {
  font-size: 40px;
}

/* 粘性导航栏 */
.navbar {
  overflow: hidden;
  background-color: #333;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
}

/* 导航栏链接样式 */
.navbar a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
}

/* 右对齐导航链接 */
.navbar a.right {
  float: right;
}

/* 导航链接 hover 效果 */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}

/* 当前选中导航链接样式 */
.navbar a.active {
  background-color: #666;
  color: white;
}

/* 页脚样式 */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
}

/* 响应式布局：屏幕宽度小于700px时列堆叠 */
@media screen and (max-width: 700px) {
  .row {   
    flex-direction: column;
  }
}

/* 响应式布局：屏幕宽度小于400px时导航链接堆叠 */
@media screen and (max-width: 400px) {
  .navbar a {
    float: none;
    width: 100%;
  }
}

.main {
  padding: 20px 5%;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- 引入PDF渲染库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
</head>
<body>

<div class="header">
  <h1>企业官网</h1>
  <p>我们的<b>影响力报告</b>正式发布</p>
</div>

<div class="navbar">
  <a href="#" class="active">首页</a>
  <a href="#">产品中心</a>
  <a href="#">关于我们</a>
  <a href="#" class="right">联系我们</a>
</div>

<div class="main">
    <h2>2020年度影响力报告</h2>
    <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>

<!-- PDF容器 -->
<div id="pdf-container" style="width: 90%; max-width: 840px; height: 70vh; margin: 20px auto; border: 1px solid #666; overflow: auto;">
  <div id="loading" style="text-align: center; padding: 50px;">PDF加载中，请稍候...</div>
  <canvas id="pdf-render"></canvas>
</div>

<div class="footer">
  <h2>页脚</h2>
</div>

<script>
// 配置PDF渲染所需的worker路径
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';

// 替换为你的PDF文件路径
const pdfPath = 'MiiR_Impact_Report_2020.pdf';
const container = document.getElementById('pdf-container');
const loadingText = document.getElementById('loading');
const canvas = document.getElementById('pdf-render');
const ctx = canvas.getContext('2d');

let pdfDoc = null;
let pageRendering = false;
let scale = 1.5;

// 渲染PDF页面
function renderPage(num) {
  pageRendering = true;
  pdfDoc.getPage(num).then(function(page) {
    const viewport = page.getViewport({scale: scale});
    canvas.height = viewport.height;
    canvas.width = viewport.width;

    const renderContext = {
      canvasContext: ctx,
      viewport: viewport
    };
    const renderTask = page.render(renderContext);

    renderTask.promise.then(function() {
      pageRendering = false;
      loadingText.style.display = 'none';
    });
  });
}

// 加载PDF文件
pdfjsLib.getDocument(pdfPath).promise.then(function(pdfDoc_) {
  pdfDoc = pdfDoc_;
  // 根据容器宽度自动调整缩放比例，适配移动端
  const containerWidth = container.clientWidth;
  pdfDoc.getPage(1).then(page => {
    const viewport = page.getViewport({scale: 1});
    scale = containerWidth / viewport.width;
    renderPage(1);
  });
}).catch(function(error) {
  loadingText.textContent = 'PDF加载失败，请刷新页面重试';
  console.error('PDF加载错误:', error);
});
</script>

</body>
</html>

核心改动说明 #

• 移除了原有依赖浏览器原生能力的PDFObject方案，替换为纯JS实现的PDF渲染逻辑，兼容所有支持H5的移动端浏览器
• PDF容器改为响应式设计，移动端会自动适配屏幕宽度，不会出现横向溢出滚动
• 新增了PDF加载状态提示和异常提示，提升用户体验
• 保留了原有页面的所有导航、头部、页脚的样式和结构，无需调整其他业务逻辑
• 如需支持多页滚动查看，可直接在现有渲染逻辑基础上扩展，不需要修改基础架构

内容的提问来源于stack exchange，提问作者CodeForGood