pdf.js如何记录阅读进度

PDF.js 记录阅读进度的方法包括：使用浏览器的本地存储、使用服务器端存储、结合书签功能。本文将详细介绍如何使用这些方法记录阅读进度。本文将详细描述如何实现上述方法。

一、使用浏览器的本地存储

利用浏览器的本地存储是一种简便且有效的方式来记录PDF阅读进度。通过在用户的浏览器中存储页面信息，可以在用户重新打开PDF时恢复到上次阅读的位置。

1.1 设置本地存储

首先，需要在用户每次翻页时记录当前页码。可以使用JavaScript的localStorage功能来实现这一点。

// 保存当前页码到本地存储
function savePageNumber(pageNumber) {
    localStorage.setItem('currentPage', pageNumber);
}
// 获取保存的页码
function getSavedPageNumber() {
    return localStorage.getItem('currentPage') || 1; // 默认返回第一页
}

1.2 在PDF.js中集成

在PDF.js的文档加载完成后，将PDF跳转到保存的页码。可以在pagechange事件中调用保存页码的函数。

PDFViewerApplication.eventBus.on('pagechange', function (e) {
    savePageNumber(e.pageNumber);
});
// 在PDF加载完成后跳转到保存的页码
PDFViewerApplication.initializedPromise.then(function () {
    var savedPage = getSavedPageNumber();
    PDFViewerApplication.page = savedPage;
});

二、使用服务器端存储

对于需要跨设备同步阅读进度的情况，可以将阅读进度存储在服务器端。通过向服务器发送和接收用户的阅读进度来实现这一点。

2.1 服务器端设置

服务器端可以使用数据库来存储每个用户的阅读进度。例如，使用Node.js和Express构建一个简单的API。

const express = require('express');
const app = express();
const bodyParser = require('body-parser');
app.use(bodyParser.json());
let userProgress = {}; // 模拟数据库
app.post('/saveProgress', (req, res) => {
    const { userId, pageNumber } = req.body;
    userProgress[userId] = pageNumber;
    res.sendStatus(200);
});
app.get('/getProgress/:userId', (req, res) => {
    const userId = req.params.userId;
    const pageNumber = userProgress[userId] || 1;
    res.json({ pageNumber });
});
app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

2.2 客户端集成

在客户端，每次翻页时将当前页码发送到服务器，并在PDF加载完成后请求服务器获取保存的页码。

// 保存页码到服务器
function savePageNumber(userId, pageNumber) {
    fetch('/saveProgress', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ userId, pageNumber })
    });
}
// 获取保存的页码
function getSavedPageNumber(userId) {
    return fetch(`/getProgress/${userId}`)
        .then(response => response.json())
        .then(data => data.pageNumber);
}
const userId = 'user123'; // 示例用户ID
PDFViewerApplication.eventBus.on('pagechange', function (e) {
    savePageNumber(userId, e.pageNumber);
});
PDFViewerApplication.initializedPromise.then(function () {
    getSavedPageNumber(userId).then(savedPage => {
        PDFViewerApplication.page = savedPage;
    });
});

三、结合书签功能

通过书签功能，用户可以手动保存和恢复阅读进度。虽然不如前两种方法自动化，但对于某些用户来说，这种方法更加直观和灵活。

3.1 创建书签功能

在PDF.js的界面中添加一个按钮，点击按钮时保存当前页码为书签。

<button id="bookmarkButton">保存书签</button>

3.2 保存和恢复书签

通过JavaScript实现点击按钮时保存当前页码，并在页面加载时检查并恢复书签。

document.getElementById('bookmarkButton').addEventListener('click', function() {
    const currentPage = PDFViewerApplication.page;
    localStorage.setItem('bookmark', currentPage);
    alert('书签已保存');
});
PDFViewerApplication.initializedPromise.then(function () {
    const bookmark = localStorage.getItem('bookmark');
    if (bookmark) {
        PDFViewerApplication.page = bookmark;
    }
});

四、总结

通过上述三种方法，您可以在PDF.js中记录和恢复用户的阅读进度。使用浏览器的本地存储适用于单一设备上的阅读记录，使用服务器端存储适用于跨设备同步阅读进度，而结合书签功能则为用户提供了手动保存和恢复进度的灵活性。这些方法可以根据具体需求进行选择和组合，以提供最佳的用户体验。