Uncaught ReferenceError: PDFObject is not defined报错及PDF嵌入方案问询

错误原因 #

• JS执行时机错误：你将PDFObject.embed的执行代码放在了<head>标签内，执行时页面<body>内的#example1挂载节点还未渲染，同时如果本地用file协议打开HTML，浏览器安全策略会阻止第三方CDN脚本加载，导致PDFObject对象未被初始化，触发未定义报错。
• PDF路径非法：你使用了本地磁盘绝对路径C:\Users\pramo\Desktop\Work\PwP\MiiR_Impact_Report_2020.pdf，浏览器出于安全限制禁止网页直接访问本地文件系统资源，路径无法被正常读取。
• 挂载节点未设置高度：PDF默认会继承父容器高度，#example1未设置高度时会出现渲染高度为0的问题，看不到PDF内容。

修复步骤（基于PDFObject实现） #

1. 将PDFObject.embed执行逻辑移到<body>标签末尾，保证执行时DOM节点和PDFObject脚本都已加载完成。
2. 将PDF文件放到和HTML文件同级的目录下，用相对路径引用，比如你把PDF和HTML放在同一个文件夹里，直接写PDF文件名即可。
3. 给#example1设置固定高度，保证PDF显示区域正常撑开。

完整可运行代码 #

<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

/* Style the body */
body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
}

/* Header/logo Title */
.header {
  padding: 80px;
  text-align: center;
  background: #1abc9c;
  color: white;
}

/* Increase the font size of the heading */
.header h1 {
  font-size: 40px;
}

/* Sticky navbar */
.navbar {
  overflow: hidden;
  background-color: #333;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
}

/* Style the navigation bar links */
.navbar a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
}


/* Right-aligned link */
.navbar a.right {
  float: right;
}

/* Change color on hover */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}

/* Active/current link */
.navbar a.active {
  background-color: #666;
  color: white;
}

/* Footer */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
}

/* PDF挂载容器样式 */
#example1 {
  width: 100%;
  height: 800px;
}

/* Responsive layout - when the screen is less than 700px wide */
@media screen and (max-width: 700px) {
  .row {   
    flex-direction: column;
  }
}

/* Responsive layout - when the screen is less than 400px wide */
@media screen and (max-width: 400px) {
  .navbar a {
    float: none;
    width: 100%;
  }
}
</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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfobject/2.2.7/pdfobject.min.js" integrity="sha512-g16L6hyoieygYYZrtuzScNFXrrbJo/lj9+1AYsw+0CYYYZ6lx5J3x9Yyzsm+D37/7jMIGh0fDqdvyYkNWbuYuA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>

<div class="header">
  <h1>My Website</h1>
  <p>A <b>responsive</b> website created by me.</p>
</div>

<div class="navbar">
  <a href="#" class="active">Home</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#" class="right">Link</a>
</div>

<div class="main">
    <h2>TITLE HEADING</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>
<div id="example1"> 
</div>

<div class="footer">
  <h2>Footer</h2>
</div>

<!-- 把PDF加载逻辑放到body末尾，保证DOM和依赖都加载完成 -->
<script>
// 请将PDF文件放到和HTML同目录下，这里直接写文件名即可
PDFObject.embed("MiiR_Impact_Report_2020.pdf", "#example1");
</script>
</body>
</html>

方案说明 #

PDFObject是网页内嵌PDF场景下的成熟通用方案，它会自动检测浏览器的PDF渲染支持能力，优先调用浏览器原生PDF阅读器渲染，无需额外依赖，兼容性覆盖绝大多数主流浏览器，对于单纯的PDF展示场景属于最优选择之一。如果需要自定义PDF操作能力比如批注、自定义翻页控件等，可以搭配PDF.js实现。

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