百度360必应搜狗淘宝本站头条
vba高级教程svn连接scheduledtaskmybatis plus结构体数组
当前位置：网站首页 > 编程网 > 正文

借助DeepSeek实现了一个PDF阅读器

yuyutoo 2025-05-02 14:25 4 浏览 0 评论

1、简介

使用 pdf.js 库加载和显示 PDF 文件。
实现了翻页、缩放功能。
提供了基本的错误处理。
功能特点：
支持选择本地 PDF 文件。
可以逐页查看 PDF 内容。
支持放大缩小功能。
界面简洁，易于使用。

2、使用方法

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>PDF 阅读器@编码小哥</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        .upload-area {
            padding: 20px;
            border: 2px dashed #ccc;
            text-align: center;
            margin-bottom: 20px;
        }
        #pdfContainer {
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        canvas {
            max-width: 100%;
            height: auto;
        }
        .controls {
            margin-top: 20px;
            text-align: center;
        }
        button {
            padding: 5px 15px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            margin: 0 5px;
        }
        button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>PDF 阅读器</h1>
        
        <!-- 文件上传区域 -->
        <div class="upload-area">
            <input type="file" id="pdfInput" accept=".pdf" style="display: none;">
            <button onclick="document.getElementById('pdfInput').click()">选择 PDF 文件</button>
        </div>

        <!-- PDF 显示区域 -->
        <div id="pdfContainer"></div>

        <!-- 控制按钮 -->
        <div class="controls">
            <button onclick="previousPage()">上一页</button>
            <button onclick="nextPage()">下一页</button>
            <button onclick="zoomIn()">放大</button>
            <button onclick="zoomOut()">缩小</button>
        </div>
    </div>

    <!-- 引入 pdf.js 库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.7.570/pdf.min.js"></script>
    
    <script>
        let pdfDoc = null;
        let currentPage = 1;
        let scale = 1; // 初始缩放比例
        
        // 加载 PDF 文件
        document.getElementById('pdfInput').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    loadPdf(e.target.result);
                };
                reader.readAsArrayBuffer(file);
            }
        });

        // 加载 PDF 内容
        async function loadPdf(arrayBuffer) {
            try {
                pdfDoc = await pdfjsLib.getDocument(arrayBuffer).promise;
                displayPage(currentPage);
            } catch (error) {
                console.error('无法加载 PDF 文件:', error);
            }
        }

        // 显示指定页码的内容
        async function displayPage(pageNum) {
            const page = await pdfDoc.getPage(pageNum);
            
            const viewport = page.getViewport({ scale: scale });
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');

            canvas.width = viewport.width;
            canvas.height = viewport.height;

            // 渲染页面
            await page.render({
                canvasContext: ctx,
                viewport: viewport
            });

            // 清除之前的 PDF 内容并添加新的
            const pdfContainer = document.getElementById('pdfContainer');
            pdfContainer.innerHTML = '';
            pdfContainer.appendChild(canvas);
        }

        // 上一页
        function previousPage() {
            if (currentPage > 1) {
                currentPage--;
                displayPage(currentPage);
            }
        }

        // 下一页
        function nextPage() {
            if (currentPage < pdfDoc.numPages) {
                currentPage++;
                displayPage(currentPage);
            }
        }

        // 放大
        function zoomIn() {
            scale += 0.2;
            if (scale > 2) { // 设置最大缩放比例
                scale = 2;
            }
            displayPage(currentPage);
        }

        // 缩小
        function zoomOut() {
            scale -= 0.2;
            if (scale < 0.1) {
                scale = 0.1;
            }
            displayPage(currentPage);
        }
    </script>
</body>
</html>

将上述代码保存为一个 HTML 文件（例如 pdf-reader.html）。
打开浏览器，加载该文件。
选择 PDF 文件进行查看。
使用控制按钮进行翻页和缩放操作。

3、功能展示

相关推荐

对volatile，synchronized,AQS的加锁解锁原理的一些理解

一、为什么要加锁，要实现同步多线程编程中，有可能会出现多个线程同时访问同一个共享、可变资源的情况，这个资源我们称之其为临界资源；这种资源可能是：对象、变量、文件等。...

注意，不能错过的CAS+volatile实现同步代码块

前言：最近看到有人说可以使用CAS+volatile实现同步代码块。心想，确实是可以实现的呀！因为AbstractQueuedSynchronizer（简称AQS）内部就是通过CAS+...

面试并发volatile关键字时，我们应该具备哪些谈资?

提前发现更多精彩内容，请访问https://dayarch.top/提前发现更多精彩内容，请访问https://dayarch.top/提前发现更多精彩内容，请访问https://dayarch...

无锁同步-JAVA之Volatile、Atomic和CAS

1、概要本文是无锁同步系列文章的第二篇，主要探讨JAVA中的原子操作，以及如何进行无锁同步。关于JAVA中的原子操作，我们很容易想到的是Volatile变量、java.util.concurrent....

C/C++面试题(二):std::atomic与volatile

volatile是C/C++中的一个关键字，用于告知编译器某个变量的值可能会在程序的控制之外被意外修改（例如被硬件、中断服务程序、多线程环境或其他外部代理）。为了防止编译器对代码进行某些可能破坏...

VOCs(Volatile Organic Compounds)挥发性有机化合物及测试方法

经常看到一些三防漆、涂料、油漆类产品的介绍中提到VOC、VOCs等概念，那么什么是VOC、VOCs和TVOC，VOCs主要包括哪些物质？VOCs的来源有哪些？VOCs的危害及国家标准是什么?一、V...

对volatile 及happen—before的理解

happen—before规则介绍Java...

这一篇我们来了解Synchronized、Volatile、Final关键字

题外话：蓝银王觉醒了！！--来自于一个斗罗大陆动漫爱好者（鹅，打钱！）湿兄这两天回家了，办了点大事，回来的时候我弟弟还舍不得我，哭着不愿意让我回京（我弟还是小学），我也心里很不舍，但是还是要回京奋斗...

关于 Java 关键字 volatile 的总结

1什么是volatilevolatile是Java的一个关键字，它提供了一种轻量级的同步机制。相比于重量级锁synchronized，volatile更为轻量级，因为它不会引起线程上下文...

大白话聊聊Java并发面试问题之volatile到底是什么?

用最简单的大白话，加上多张图给大家说一下，volatile到底是什么？...

为什么要有volatile关键字（volatile 关键字为什么不能保证原子性）

在嵌入式编程和多线程编程中，我们常会见到volatile关键字声明的变量。下面说一下volatile关键字的作用：1.保持变量内存可见简而言之就是用volatile声明的变量会告诉编译器和处理器，这个...

Java的volatile到底怎么理解?（java volatitle）

我们都知道，在Java中有很多的关键字，比如synchronize比如volatile，这些都是一些比较关键的，还有final，今天我们就来聊一下这个volatile因为这个vo...

Java多线程编程中的volatile关键字:解密神秘的共享内存

Java多线程编程中的volatile关键字：解密神秘的共享内存在Java多线程编程的世界里，volatile关键字就像一位低调却至关重要的守护者。它默默无闻地站岗放哨，确保多个线程之间能够正确地共享...

你了解volatile关键字的作用吗?（关键字volatile有什么含意?并举出三个不同的例子?）

【死记硬背】volatile关键字主要用于保持内存的变量可见性和禁止重排序。变量可见性：当一个线程改变了变量的值，那么新的值对于其他线程也是可以立即获取到的。禁止重排序：...

谈谈你对volatile 关键字作用和原理的理解

一位6年工作经验的小伙伴，在某里二面的时候被问到“volatile”关键字。然后，就没有然后了…同样，还有一位4年的小伙伴，去某团面试也被问到“volatile关键字“。然后，也没有然后了…...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表