pdf.js怎么控制横竖屏

PDF.js如何控制横竖屏：使用CSS媒体查询、JavaScript事件监听、布局调整

要在PDF.js中控制横竖屏，可以通过CSS媒体查询、JavaScript事件监听和布局调整来实现。其中，使用CSS媒体查询是最直接的方法，通过定义不同的样式来适应横屏和竖屏状态；JavaScript事件监听可以实时监控设备的方向变化，并动态调整布局；布局调整则可以确保PDF内容在不同屏幕方向上的最佳显示效果。下面将详细描述如何实现这些方法。

一、使用CSS媒体查询

CSS媒体查询是网页设计中常用的技术，可以根据设备的屏幕尺寸、分辨率和方向等属性来应用不同的样式。通过媒体查询，可以轻松实现PDF.js在横竖屏状态下的不同布局。

/* 竖屏样式 */
@media screen and (orientation: portrait) {
  #pdf-container {
    width: 100%;
    height: auto;
  }
}
/* 横屏样式 */
@media screen and (orientation: landscape) {
  #pdf-container {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

上述CSS代码定义了在竖屏和横屏两种状态下的样式，确保PDF内容在不同的屏幕方向上都能得到良好的展示效果。

二、JavaScript事件监听

除了使用CSS媒体查询外，JavaScript事件监听也是一种有效的方法。通过监听屏幕方向的变化，可以动态调整PDF的布局和样式。

function handleOrientationChange() {
  if (window.matchMedia("(orientation: portrait)").matches) {
    // 竖屏
    document.getElementById('pdf-container').style.width = '100%';
    document.getElementById('pdf-container').style.height = 'auto';
  } else {
    // 横屏
    document.getElementById('pdf-container').style.width = '100%';
    document.getElementById('pdf-container').style.height = 'auto';
    document.getElementById('pdf-container').style.display = 'flex';
    document.getElementById('pdf-container').style.justifyContent = 'center';
    document.getElementById('pdf-container').style.alignItems = 'center';
  }
}
window.addEventListener('orientationchange', handleOrientationChange);
window.addEventListener('load', handleOrientationChange);

通过上述JavaScript代码，可以实时监控设备的方向变化，并根据不同的方向调整PDF容器的样式，确保最佳的用户体验。

三、布局调整

在实际应用中，除了使用CSS媒体查询和JavaScript事件监听，还需要对PDF.js的布局进行合理的调整，以确保PDF内容在不同屏幕方向上的最佳显示效果。

1、竖屏布局

在竖屏状态下，通常需要确保PDF内容能够以全屏宽度展示，并且保持良好的可读性。可以通过调整容器的宽度和高度来实现这一点。

@media screen and (orientation: portrait) {
  #pdf-container {
    width: 100%;
    height: 100vh;
    overflow-y: scroll;
  }
}

上述CSS代码定义了竖屏状态下的容器样式，确保PDF内容能够在竖屏状态下以全屏宽度展示，并且支持垂直滚动。

2、横屏布局

在横屏状态下，通常需要确保PDF内容能够以全屏高度展示，并且保持良好的可读性。可以通过调整容器的宽度和高度来实现这一点。

@media screen and (orientation: landscape) {
  #pdf-container {
    width: 100vw;
    height: 100%;
    overflow-x: scroll;
  }
}

上述CSS代码定义了横屏状态下的容器样式，确保PDF内容能够在横屏状态下以全屏高度展示，并且支持水平滚动。

四、综合应用

在实际项目中，可以将上述方法综合应用，以实现更为灵活和全面的横竖屏控制。以下是一个综合示例，展示了如何在PDF.js中控制横竖屏。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PDF.js横竖屏控制</title>
  <style>
    /* 通用样式 */
    #pdf-container {
      width: 100%;
      height: 100%;
    }
    /* 竖屏样式 */
    @media screen and (orientation: portrait) {
      #pdf-container {
        width: 100%;
        height: 100vh;
        overflow-y: scroll;
      }
    }
    /* 横屏样式 */
    @media screen and (orientation: landscape) {
      #pdf-container {
        width: 100vw;
        height: 100%;
        overflow-x: scroll;
      }
    }
  </style>
</head>
<body>
  <div id="pdf-container"></div>
  <script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
  <script>
    const url = 'path/to/your/pdf/file.pdf';
    // 加载PDF文件
    const loadingTask = pdfjsLib.getDocument(url);
    loadingTask.promise.then(pdf => {
      console.log('PDF loaded');
      // 获取第1页
      pdf.getPage(1).then(page => {
        console.log('Page loaded');
        const scale = 1.5;
        const viewport = page.getViewport({ scale: scale });
        // 准备canvas
        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        // 渲染PDF页到canvas
        const renderContext = {
          canvasContext: context,
          viewport: viewport
        };
        page.render(renderContext).promise.then(() => {
          console.log('Page rendered');
          document.getElementById('pdf-container').appendChild(canvas);
        });
      });
    });
    function handleOrientationChange() {
      if (window.matchMedia("(orientation: portrait)").matches) {
        // 竖屏
        document.getElementById('pdf-container').style.width = '100%';
        document.getElementById('pdf-container').style.height = 'auto';
      } else {
        // 横屏
        document.getElementById('pdf-container').style.width = '100%';
        document.getElementById('pdf-container').style.height = 'auto';
        document.getElementById('pdf-container').style.display = 'flex';
        document.getElementById('pdf-container').style.justifyContent = 'center';
        document.getElementById('pdf-container').style.alignItems = 'center';
      }
    }
    window.addEventListener('orientationchange', handleOrientationChange);
    window.addEventListener('load', handleOrientationChange);
  </script>
</body>
</html>

在这个示例中，综合应用了CSS媒体查询和JavaScript事件监听，通过调整PDF容器的样式和布局，实现了PDF.js在横竖屏状态下的最佳显示效果。

结语

通过使用CSS媒体查询、JavaScript事件监听和布局调整，可以有效地控制PDF.js在横竖屏状态下的显示效果，从而提供更好的用户体验。在实际应用中，可以根据具体需求灵活应用上述方法，以实现最佳的PDF展示效果。

在项目管理中，选择适合的项目管理工具是成功的关键。推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile，以提高项目管理的效率和协作的效果。这些工具能够帮助团队更好地管理任务、协调资源，并确保项目的顺利进行。