在網(wǎng)頁(yè)開發(fā)中，經(jīng)常有需要在網(wǎng)頁(yè)中展示PDF文件的需求。為了實(shí)現(xiàn)在網(wǎng)頁(yè)中加載PDF文件，我們可以使用<div>標(biāo)簽來實(shí)現(xiàn)。
下面是幾個(gè)示例代碼，詳細(xì)說明了如何使用<div>標(biāo)簽來加載PDF文件。
示例一：
<!DOCTYPE html>
<html>
<head>
<title>加載PDF文件</title>
</head>
<body>
<div>
<embed src="example.pdf" width="500" height="600" type='application/pdf'>
</div>
</body>
</html>在上面的示例代碼中，我們使用了<embed>標(biāo)簽來嵌入PDF文件，將PDF文件的路徑指定為了"example.pdf"。我們還可以通過設(shè)置<embed>標(biāo)簽的width和height屬性來調(diào)整PDF文件的展示大小。
示例二：
<!DOCTYPE html>
<html>
<head>
<title>加載PDF文件</title>
<style>
#pdf-container {
width: 100%;
height: 600px;
}
</style>
</head>
<body>
<div id="pdf-container"></div>
<br>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.5.207/pdf.min.js"></script>
<script>
(function() {
var url = 'example.pdf';
var pdfjsLib = window['pdfjs-dist/build/pdf'];
<br>
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.5.207/pdf.worker.min.js';
<br>
var loadingTask = pdfjsLib.getDocument(url);
loadingTask.promise.then(function(pdf) {
var pageNum = 1;
pdf.getPage(pageNum).then(function(page) {
var scale = 1.5;
var viewport = page.getViewport({scale: scale});
<br>
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
canvas.width = viewport.width;
canvas.height = viewport.height;
document.getElementById('pdf-container').appendChild(canvas);
<br>
var renderContext = {
canvasContext: context,
viewport: viewport
};
var renderTask = page.render(renderContext);
renderTask.promise.then(function() {
console.log('Page rendered');
});
});
}, function(reason) {
console.error(reason);
});
})();
</script>
</body>
</html>上述示例代碼中使用了PDF.js庫(kù)來加載和渲染PDF文件。，我們需要在<script>標(biāo)簽中引入PDF.js庫(kù)的JavaScript文件。然后，我們使用pdfjsLib對(duì)象的getDocument方法來打開PDF文件。接下來，我們可以使用getPage方法獲取PDF的指定頁(yè)碼，并使用render方法將頁(yè)面渲染到<canvas>元素中。
通過以上兩個(gè)示例，我們可以看到使用<div>標(biāo)簽加載PDF文件的兩種常見方法。第一種方法簡(jiǎn)單直接，適合簡(jiǎn)單的PDF文件展示需求；而第二種方法則更加靈活，可以實(shí)現(xiàn)更多自定義的功能，如翻頁(yè)、縮放等。
參考文章：<a >https://www.pdftron.com/blog/webviewer/how-to-display-a-pdf-in-html/#how-do-i-display-a-pdf-as-an-iframe</a>