文章/答案/技术大牛

发布

社区首页 >问答首页 >未捕获ReferenceError:未定义PDFObject

问未捕获ReferenceError:未定义PDFObject
EN

Stack Overflow用户

提问于 2021-11-04 17:43:52

回答 1查看 167关注 0票数 0

使用下面的HTML，我正在尝试将PDF文件发布到网页中。这篇文章标题中的错误是我在查看页面时看到的。PDF文件未发布。这是将PDF发布到网页的最佳方式吗？我更感兴趣的是实现涉及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;
}

/* 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 - toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed). The sticky value is not supported in IE or Edge 15 and earlier versions. However, for these versions the navbar will inherit default position */
.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;
}

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
  .row {   
    flex-direction: column;
  }
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@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>
<script>PDFObject.embed("C:\Users\pramo\Desktop\Work\PwP\MiiR_Impact_Report_2020.pdf", "#example1");</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>

</body>
</html>

html

css

pdf

frontend

backend

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-11-04 18:06:38

我刚刚创建了你正在尝试做的事情的一个模拟版本，它工作得很好。尽管我链接的示例because the frame into which the plugin is loading is sandboxed.不会出现在SO代码片段中，因为如果您在实时或本地服务器中打开它，或者有另一个您可以使用的PDF，那么它将工作得很好。

我会检查你的PDFObject脚本的相对路径，因为它似乎没有作为插件读取到你的HTML中，这意味着路径是不正确的。您可以随时使用CDN，它是插件/脚本的直接链接：

<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>

下面是我在本地服务器上运行这段代码时的样子：

body {
  font-family: Arial, Helvetica, sans-serif;
}
/*Center the PDF Object and Center Align  */

.pdfobject-container {
  width: 840px;
  height: auto;
  margin: auto;
}

/* 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 - toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed). The sticky value is not supported in IE or Edge 15 and earlier versions. However, for these versions the navbar will inherit default position */
.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;
}

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
  .row {   
    flex-direction: column;
  }
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
  .navbar a {
    float: none;
    width: 100%;
  }
}

<!DOCTYPE html>
<html>
    <head>

    </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>  

    </body>
            <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>
    <script>
    
     PDFObject.embed("https://unec.edu.az/application/uploads/2014/12/pdf-sample.pdf", "#example1");   
    </script>
</html>

最后，作为一个好的实践，尝试在</body>标记结束之前加载脚本，这样HTML DOM就可以在JS加载之前加载。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69843606

复制

相似问题

问未捕获ReferenceError:未定义PDFObject
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问未捕获ReferenceError:未定义PDFObjectEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问未捕获ReferenceError:未定义PDFObject
EN