未捕獲的ReferenceError：未定義PDFObject-有解無憂

使用下面的 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>

uj5u.com熱心網友回復：

我剛剛創建了一個你正在嘗試做的模擬版本，它作業得很好。雖然我鏈接的示例 PDF 不會出現在 SO 片段中，因為because the frame into which the plugin is loading is sandboxed.如果您在實時或本地服務器中打開它，或者有另一個可以使用的 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>

這是我在本地服務器上運行此代碼時的樣子：

未捕獲的 ReferenceError：未定義 PDFObject

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 加載之前加載。

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/348823.html

標籤：html css pdf 前端后端

上一篇：.NetCore5.0.cshtmlRazor頁面“if”阻止打開的HTML標簽而不關閉它

下一篇：無法將單擊事件添加到創建物件之前未創建的按鈕