如何使用pdfjs在整个pdf中旋转单页？答案

【问题标题】：How to rotate single page in whole pdf using pdfjs?如何使用pdfjs在整个pdf中旋转单页？
【发布时间】：2018-01-30 12:12:19
【问题描述】：

我从 mozilla 下载了 pdf.js 库。它非常适合打开我的 pdf 文件并查看它们。问题是当我单击旋转页面时，它会旋转所有页面，而不仅仅是选定的页面。我尝试用谷歌搜索并阅读了 pdf.js 的手册，但在 pdf.js 中找不到有关旋转 SINGLE pdf 页面的相关资源，请帮助

【问题讨论】：

标签： javascript rotation pdf.js

【解决方案1】：

取决于您可能想要花费多少工作以及您想要达到的目的：

手动旋转单页：

将transform: rotate(90deg) 或transform: rotate(-90deg) 应用于指定页面的容器元素——这可以在当前主流浏览器中使用内置的开发者工具完成。

我使用了 Mozilla Firefox 附带的内置查看器 - 页面放置在 div 容器中，这些容器由属性 data-page-number 标识。

以编程方式旋转单个页面：

function rotateSinglePage(pageNum, degree)
{
  var viewerMain = document.getElementById("viewer");
  var pageContainer = viewerMain.querySelector("div[data-page-number='" + pageNum + "']");
  pageContainer.style.transform = "rotate(" + degree + "deg)";
}

您可以从浏览器的开发人员工具中调用此函数，也可以构建自己的界面（按钮/热键）。

如果您希望能够多次旋转，可以使用以下方式访问当前旋转：

function getCurrentRotation(pageNum)
{
  var viewerMain = document.getElementById("viewer");
  var pageContainer = viewerMain.querySelector("div[data-page-number='" + pageNum + "']");
  var rotationStyle = pageContainer.style.transform;

  //try to strip everything but the number
  //we assume number to be integer (without fraction)
  var rotation = rotationStyle.replace(/rotate\(([-]?[0-9]{0,3})deg\)/,"$1");
  var rotationDegree = Number.parseInt(rotation);

  //if parseInt fails, it returns NaN - this happens on empty string as well
  //by default an unrotated page (0 degree) has no transform style, so
  //we return 0 degree in this case
  if (Number.isNaN(rotationDegree)) { rotationDegree = 0; }
  return rotationDegree;
}

由于当前页面存储在document.getElementById("pageNumber").value中，您可以构建自己的界面来旋转当前页面。

【讨论】：

我试过你的代码，它可以工作，但是有一个问题。如果我的文档有横向页面，并且您将一页旋转 90 度，则旋转页面的顶部将覆盖前一页，旋转页面的底部将被下一页覆盖。所以旋转后的页面和后面的所有页面都需要向下移动 y 方向。您对如何做到这一点有什么建议吗？

【解决方案2】：

您可以试试这个脚本，它允许您逐步旋转所有页面并在必要时重置所有页面。

代码在每个页面DOM元素上添加一个数据属性rotation。

    const rotatePages = (deg: number, force: boolean = false) => {
        const pageContainer = document.getElementById('viewer')
        if (pageContainer) {
          const pagesDOM: ReadonlyArray<HTMLDivElement> = Array.from(
            pageContainer.querySelectorAll(`div[data-page-number]`),
          )
          pagesDOM.forEach(pageDOM => {
            const datasetRotation = pageDOM.dataset.rotation
            let targetRotation = deg
            if (datasetRotation) {
              targetRotation = force ? deg : deg + Number(datasetRotation)
            }
            pageDOM.dataset.rotation = String(targetRotation)
            pageDOM.style.transform = `rotate(${targetRotation}deg)`
          })
        }

将其用作：

// incremental rotation    
rotatePages(90) // rotate all pages of 90 deg
rotatePages(90) // rotate all pages of +90 deg (now they are all rotated of 180 deg)

// reset rotation for all pages to 0 degree
rotatePages(0, true)

如果您有兴趣获取页面的当前旋转，而不是使用 .replace(/rotate$([-]?[0-9]{0,3})deg$/,"$1");

您可以简单地在 dom 中查询特定的数据属性 rotation。

【讨论】：