PDFJS在线预览PDF

1. PDFJS简介

2. 单页面简单示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PDF.js Preview</title>
    <!-- 加载 PDF.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
    <!-- 样式 -->
    <style>
        #pdfContainer {
            width: 100%;
            max-width: 800px; /* 设置最大宽度以适应手机端 */
            margin: 0 auto;
        }
        canvas {
            display: block;
            margin: 10px auto;
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
<div id="pdfContainer"></div>
<script>
    // PDF.js 配置
    const pdfUrl = 'https://oss-dev.xxx.com/cmyang/SkyWalking.pdf'; // 替换为你的 PDF 文件 URL
	const scale = 1.5;

    // 初始化 PDF.js
    function renderPages(pdfDoc) {
        const numPages = pdfDoc.numPages;
        for (let pageNum = 1; pageNum <= numPages; pageNum++) {
            pdfDoc.getPage(pageNum).then(function(page) {
                let canvas = document.getElementById("pdf-canvas-" + pageNum);
                const context = canvas.getContext('2d');
                const viewport = page.getViewport({ scale });
                canvas.height = viewport.height;
                canvas.width = viewport.width;

                const renderContext = {
                    canvasContext: context,
                    viewport: viewport
                };
                page.render(renderContext);
            });
        }
    }

    function createCanvas(numPages) {
        for (let pageNum = 1; pageNum <= numPages; pageNum++) {
		let pdfContainer = document.getElementById('pdfContainer');
            const canvas = document.createElement('canvas');
            canvas.id = 'pdf-canvas-' + pageNum;
            pdfContainer.appendChild(canvas);
        }
    }

    // 加载 PDF
    pdfjsLib.getDocument(pdfUrl).promise.then(function(pdfDoc) {
        const numPages = pdfDoc.numPages;
        createCanvas(numPages);
        renderPages(pdfDoc);
    }).catch(console.error);
</script>
</body>
</html>
  • 如果要引用本地的js，需要同时下载pdf.js和pdf.worker.js
  • 加载pdf时，添加pdfjsLib.GlobalWorkerOptions.workerSrc = 'scripts/pdf.worker.min.js';