[英]How to rotate single page in whole pdf using pdfjs?
我从mozilla下载了pdf.js库。 打开我的pdf文件并查看它们非常有用。 问题是,当我单击旋转页面时,它将旋转所有页面,而不只是所选页面。 我试着用google搜索并阅读了pdf.js的手册,但在pdf.js的旋转SINGLE pdf页面中找不到相关资源
根据您可能要花费多少工作以及您要达到的目的:
将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
,因此您可以构建界面来旋转当前页面。
您可以尝试使用此脚本,该脚本允许您逐步旋转所有页面并在必要时重置所有页面。
该代码在每个页面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
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.