HTML和PDF是兩種不同的文檔格式，二者的預覽方式也有所不同。在HTML中，我們可以通過一些標簽和屬性來實現PDF預覽的功能。 首先，我們需要在HTML中引入PDF.js庫，這是一個開源的JavaScript庫，可以實現在網頁上預覽PDF文檔。引入方法如下：

<script src="pdf.js"></script>
<script src="pdf.worker.js"></script>

注意，這兩個文件需要放在同一目錄下。 接下來，我們需要在HTML中創建一個用于預覽PDF的容器。通常我們使用iframe標簽來實現這一功能。代碼如下：

<iframe id="pdfpreview" src="yourpdf.pdf"></iframe>

其中id屬性用于標識該iframe，src屬性用于指定要預覽的PDF文件。 接下來，我們需要編寫一些JavaScript代碼，來實現PDF的加載和預覽功能。代碼如下：

var pdfpreviewer = document.getElementById("pdfpreview");
pdfjsLib.getDocument(pdfpreviewer.src).promise.then(function(pdf) {
pdf.getPage(1).then(function(page) {
var viewport = page.getViewport({scale: 1});
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.height = viewport.height;
canvas.width = viewport.width;
pdfpreviewer.parentElement.replaceChild(canvas, pdfpreviewer);
page.render({canvasContext: ctx, viewport: viewport});
});
});

以上代碼會創建一個canvas元素，用于在網頁上繪制PDF頁面。Page對象的render方法可用于將PDF頁面渲染到canvas上。這樣，我們就可以在網頁上預覽PDF文檔了。 值得注意的是，PDF.js庫有一些限制，如不能實現PDF的全部功能和更好的兼容性。因此，在實際開發中，我們需要根據具體需求選擇合適的方案。 總之，通過以上的HTML和JavaScript代碼，我們可以簡單地實現PDF預覽的功能，豐富了網站的交互和用戶體驗。