PaperRecommend/11mnew.html at main · liujiang157/PaperRecommend · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>检查报告</title>
<!-- 引入 PDF.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.min.js"></script>
<style>
    #pdfViewer {
        width: 100%;
        height: 100vh;
    }
</style>
</head>
<body>
<div id="pdfViewer"></div>

<script>
// 当页面加载完全后执行 PDF.js 相关代码
window.onload = function() {
    // 获取 PDF 元素
    const pdfViewer = document.getElementById('pdfViewer');

    // PDF.js 配置
    const pdfjsLib = window['pdfjs-dist/build/pdf'];

    // 指定 PDF 文件路径
    const pdfPath = 'https://maybelence.cn/PaperRecommend/11m.pdf';

    // 异步加载 PDF 文件
    pdfjsLib.getDocument(pdfPath).promise.then(pdf => {
        // 获取第一页
        return pdf.getPage(1);
    }).then(page => {
        // 设置缩放比例
        const scale = 1.5;

        // 获取页面视口
        const viewport = page.getViewport({ scale });

        // 创建 Canvas 元素
        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');

        // 设置 Canvas 元素尺寸
        canvas.width = viewport.width;
        canvas.height = viewport.height;

        // 添加 Canvas 元素到 PDF 视图中
        pdfViewer.appendChild(canvas);

        // 渲染 PDF 页面到 Canvas 元素
        page.render({
            canvasContext: context,
            viewport: viewport
        });
    });
};
</script>
</body>
</html>