PM 說: 怎麼在網頁上嵌入 PDF?

2024 iThome 鐵人賽

DAY 22

JavaScript

PM說: RD大大，這個功能要怎麼寫啊?系列第 22 篇

16th鐵人賽

YUAN

2024-09-19 21:44:58

53 瀏覽

分享至

前言

不知道讀者們有沒有用過筆記軟體Notion
其中有個功能叫做 Embed => 可以嵌入 pdf檔案

今天來做一個在網頁上嵌入pdf的MVP

我們會用到一個平常比較少看到的標籤叫做 <object>
它很神奇可以透過data屬性來引入

圖片 example
html example
影片or聲音 example
外部資源

建議:

圖片還是要用 <img>
html還是要用 <iframe>
video還是要用 <video>
audio還是要用 <audio>
語意上比較清楚

成果

網頁上嵌入pdf_demo

補充

不是所有網址的pdf都能被嵌入
ex: https://ieeexplore.ieee.org/stamp/stamp.jsp?arnumber=10380712
像上面這個網址是先經過 java寫的後端再返回pdf檔案
如果用postman GET 會被阻擋

2.文件有寫usemap屬性但是實際測試沒效果
拿昨天的影像地圖來改寫成obeject但沒作用
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object#usemap
https://www.w3schools.com/TAgs/tag_object.asp

3.若想要透過html按鈕控制pdf內容
ex: 跳頁
需要用其他套件才能實現

推薦套件:pdfjs

PDF.js Previous/Next example

程式碼

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>object tag demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        background-color: black;
      }
      .wrapper {
        height: 99dvh;
        border: 2px solid white;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <object
        type="application/pdf"
        data="https://interactive-examples.mdn.mozilla.net/media/examples/In-CC0.pdf"
        width="100%"
        height="100%"
      ></object>
    </div>
  </body>
</html>