turn.js与 PHP 结合使用来实现 PDF 文件的页面切换效果

diygwcom

于 2025-05-17 15:39:07 发布

阅读量342

点赞数 4

文章标签： php pdf 开发语言

本文链接：https://blog.csdn.net/luck332/article/details/148029238

版权

将 Turn.js 与 PHP 结合使用来实现 PDF 文件的页面切换效果，你需要一个中间步骤将 PDF 转换为 Turn.js 可以处理的格式（如 HTML 页面或图片）。以下是实现这一功能的步骤和示例代码：

步骤 1: 安装必要的库

首先，你需要一个 PHP 库来将 PDF 转换为图片。一个常用的库是 imagick，它可以通过 PHP 的扩展来处理图像。

安装 Imagick
- 确保你的服务器上安装了 imagick 扩展。你可以通过以下命令安装：
```
sudo apt-get install php-imagick
```
- 确保 PHP 的 imagick 扩展在 php.ini 中启用。
安装 Ghostscript
- Ghostscript 是一个用于处理 PDF 文件的工具，imagick 依赖它来读取 PDF 文件。
```
sudo apt-get install ghostscript
```
- 安装 Ghostscript：

步骤 2: 编写 PHP 脚本将 PDF 转换为图片

以下是一个简单的 PHP 脚本，将 PDF 文件转换为图片：

<?php

function pdfToImages($pdfPath, $outputDir) {
    $imagick = new Imagick();
    $imagick->setResolution(150, 150);  // 设置分辨率
    $imagick->readImage($pdfPath);
    $imagick->setImageFormat('jpg');

    // 确保输出目录存在
    if (!file_exists($outputDir)) {
        mkdir($outputDir, 0777, true);
    }

    foreach ($imagick as $page) {
        $page->setImageCompressionQuality(100);
        $page->writeImage($outputDir . '/page_' . $page->getIteratorIndex() . '.jpg');
    }

    $imagick->clear();
    $imagick->destroy();
}

$pdfPath = 'path/to/your/file.pdf';
$outputDir = 'path/to/output/directory';

pdfToImages($pdfPath, $outputDir);

echo "PDF converted to images successfully!";

?>

步骤 3: 使用 Turn.js 显示转换后的图片

一旦 PDF 被转换为图片，你可以使用 Turn.js 来显示这些图片，并实现翻页效果

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Turn.js PDF 翻页示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/turn.js/4.1.0/turn.min.js"></script>
  <style>
    #flipbook {
      width: 800px;
      height: 600px;
      margin: 0 auto;
    }
    .page {
      width: 400px;
      height: 600px;
      background: white;
      text-align: center;
      line-height: 600px;
      font-size: 24px;
      border: 1px solid #ccc;
    }
    .hard {
      background: #333 !important;
      color: white;
    }
  </style>
</head>
<body>
  <div id="flipbook">
    <div class="hard">封面</div>
    <?php
    $outputDir = 'path/to/output/directory';
    $files = glob($outputDir . '/page_*.jpg');
    sort($files); // 确保图片按顺序排列

    foreach ($files as $file) {
        $pageNumber = basename($file, '.jpg');
        echo '<div class="page"><img src="' . $file . '" style="max-width: 100%; max-height: 100%;"></div>';
    }
    ?>
    <div class="hard">封底</div>
  </div>

  <script>
    $(document).ready(function() {
      $('#flipbook').turn({
        width: 800,
        height: 600,
        autoCenter: true,
        acceleration: true,
        gradients: true,
        duration: 1000,
        display: 'double',
        when: {
          turned: function(e, page) {
            console.log('当前页码:', page);
          }
        }
      });
    });
  </script>
</body>
</html>