pdf-reorganizer
v0.4.3
Published
Web Component for PDF reorganization
Downloads
7
Readme
pdf-reorganizer
pdf-reorganizer is a web component to help rearrange and split PDFs. It does not modify PDF documents itself, but creates a processing instruction that can be implemented independent of PDF processing APIs or programming languages. pdf-reorganizer is heavily inspired by PDF-Arranger and is based on PDF.js.
Reorganization supports:
- Splits
- Removals
- Movements
- Rotations
- Comments
Integration
Install the package:
npm i pdf-reorganizerImport the package in your code:
<html>
<head>
<script type="module">
import 'pdf-reorganizer';
</script>
</head>
<body>
<pdf-reorganizer url="example.pdf"></pdf-reorganizer>
</body>
</html>See the demo folder for example implementations.
Usage
Key Bindings
In Reorganizer Viewport:
| Key | Modifier | Command | |--------|------------|---------| | right | | Move cursor to next page | | left | | Move cursor to previous page | | top | | Move cursor to page above in viewport | | down | | Move cursor to page below in viewport | | right | Ctrl | Rotate page on cursor position 90deg clockwise | | left | Ctrl | Rotate page on cursor position 90deg counter clockwise | | right | Ctrl+Shift | Rotate selected pages 90deg clockwise | | left | Ctrl+Shift | Rotate selected pages 90deg counter clockwise | | right | Alt | Choose preceding target to move selected pages (requires confirmation) | | left | Alt | Choose following target to move selected pages (requires confirmation) | | Delete | | Remove page on cursor position (If no cursor exists, remove all selected) | | Delete | Shift | Remove all selected pages | | Space | | Add page on cursor to the selection or remove from it | | s | Ctrl | Add split before page on cursor (If no cursor exists, add split before selected pages) | | s/S | Ctrl+Shift | Add split before selected pages | | + | Ctrl | Open magnified view on cursor | | a | Ctrl | Select all pages | | d | Ctrl | Unselect all pages | | i/I | Ctrl+Shift | Inverse select all pages | | c | Ctrl | Add comment to the page on cursor or edit | | Enter | | Confirm moving selected pages |
In magnified view:
| Key | Modifier | Command | |--------|------------|---------| | right | | Move viewport right | | left | | Move viewport left | | top | | Move viewport up | | down | | Move viewport down | | right | Ctrl | Move viewport to the right | | left | Ctrl | Move viewport to the left | | top | Ctrl | Move viewport to up | | down | Ctrl | Move viewport to bottom | | Escape | | Leave magnifier view |
Processing instructions
After reorganizing all pages into new documents, the processed custom event is dispatched.
This event can be listened on and contains a docs list and a src list in its detail
object.
{
"src" : [
"mysimple.pdf"
],
"docs" : [
[1, 2],
[3, { "p":5, "r":90 }],
[{
"p":6,
"c":"This is a comment"
}]
]
}The docs array contains a list of documents resulting from the reorganization of the
source documents (listed in src). Each document is represented by a list of page
numbers.
If pages were modified or annotated, they are represented as a map with the following keys supported:
p: Mandatory. The page number.
r: Optional. The page was rotated (clockwise by 90, 180 or 270 degrees).
c: Optional. A comment on the page.
s: Optional. The index to the source document in the src list. Defaults to 0.
See pdf-reorganizer-service for an example implementation.
Customization
Configuration
The following parameters can be defined as part of the pdf-reorganizer element.
| Attribute | Description |
|--------------|-------------|
| url | The url of the PDF document. Can alos be represented as a Int array. Mandatory.|
| filename | The file name for source attribution. Uses the URL base name if not given.|
| fit | Boolean attribute. When present, the PDF viewport fits to 100% width and height of its container.|
| zoomfactor | The scale for the magnifier view. Defaults to 6.|
| scrollstep | The number of pixels to scroll by arrow keys in magnifier view. Defaults to 14.|
| split-before-button | Bind an alternative button to split-before. |
| rotate-left-button | Bind an alternative button to rotate-left. |
| rotate-right-button | Bind an alternative button to rotate-right. |
| select-button | Bind an alternative button to select. |
| select-all-button | Bind an alternative button to select-all. |
| comment-button | Bind an alternative button to comment. |
| remove-button | Bind an alternative button to remove. |
| magnify-button | Bind an alternative button to magnify. |
| process-button | Bind an alternative button to process. |
When binding an alternative button to an action by passing an element identifier,
the original button won't be listed in the toolbar anymore.
If the element identifier is empty or fails to be resolved, there won't be
a button binding anymore (key bindings will still work though).
Active buttons will get the class active. Numerical information will
be stored in a data-count attribute.
Styling
The following CSS variables can be overwritten and are respected by the web component.
It's best to overwrite them in a pdf-reorganizer selector rule.
pdf-reorganizer {
/* Main color for fonts and borders */
--pdfro-main-color: #555;
/* Background color of the viewport */
--pdfro-viewport-bg-color: #bbb;
/* Colors for selected pages */
--pdfro-selected-color: #fff;
--pdfro-selected-bg-color: #07d;
/* Colors for the split marker */
--pdfro-split-marker-border-color: #696;
--pdfro-split-marker-bg-color: #6b6;
--pdfro-split-marker-counter-color: #fff;
/* Color of the load spinner */
--pdfro-loader-color: blue;
/* Color of removed pages */
--pdfro-removed-bg-color: #777;
/* Color of highlighted pages for mouseover */
--pdfro-hover-bg-color: #aaa;
/* Color of dragged pages and drag-markers */
--pdfro-dragged-color: #7bf;
/* Colors for navigation menu */
--pdfro-nav-bg-color: #fff;
--pdfro-nav-color: var(--pdfro-main-color);
}Planned Features
- Copy instead of moving
- Add files per drag and drop (if embedded in a service)
- Add select mode on long press (mousedown and touchstart)
Known issues
- When height and width of a page are switches after rotation, the magnified view has an empty offset at the bottom of a page.
License
This software bundles Material Symbols from Google, published under the Apache License 2.0.