add/remove pages

516 views
Skip to first unread message

Yizhou TANG

unread,
Jul 7, 2016, 1:51:40 PM7/7/16
to PDFTron WebViewer
Is it possible to add/remove pages or change order of pages from a pdf file using WebViewer? 
I saw some apis in the corecontrol documentation, can you provide some codes about how to use them?

Matt Parizeau

unread,
Jul 8, 2016, 4:16:46 PM7/8/16
to PDFTron WebViewer
Sure, here are some examples. Note that this only for PDF files as the APIs aren't supported with XOD files. The code should be executed in a config file.

For all samples first get the document object:
var doc = readerControl.docViewer.getDocument();

Removing pages:
doc.removePages([1, 2]);

This will remove pages 1 and 2.

Inserting blank pages:
var locationsToInsert = [1, 1];
doc
.insertBlankPages(locationsToInsert);

This will insert two blank pages, each will be before the first page.

Inserting pages from another document:
var newDoc = new CoreControls.Document('filename.pdf', 'pdf'); // note that the filename here doesn't really matter

CoreControls.getDefaultPdfBackendType().then(function(backendType) {
   
var options = {
        workerTransportPromise
: CoreControls.initPDFWorkerTransports(backendType, {}, /* license key here */)
   
};
   
var partRetriever = new CoreControls.PartRetrievers.ExternalPdfPartRetriever('path/to/pdf/file.pdf');
    newDoc
.loadAsync(partRetriever, function() {
       
var pagesToInsert = [1];
       
var locationToInsert = 5;
        doc
.insertPages(newDoc, pagesToInsert, locationToInsert);
   
}, options);
});

Note that there currently seem to be issues with the insertion location when inserting multiple pages, but we're going to look into this. Inserting a single page at a time should be working fine.

Now when you download the file from the viewer it will appear as it does in the viewer with the pages removed or inserted.

Let us know if you have any other questions about the APIs!

Matt Parizeau
Software Developer
PDFTron Systems Inc.

Yizhou TANG

unread,
Jul 18, 2016, 12:51:59 PM7/18/16
to PDFTron WebViewer
Thanks for your support, the remove and add pages api works great for me.

I inserted some buttons in the control bar, but when i use these apis with buttons, the changes doesn't display in the thumbnail view and/or in the main view. So do I have a way to refresh the thumbnail/outline view or the whole webviewer?

Still, if i delete the third page, the annotations that i created after the third page will be dislocated one page. I want to know how to match the annotation and the page.

Sometimes a error "can't refer parameter 'width' in the CoreControls.js" occures but it doesn't influence other fonctions.

I was able to save annotations through xfdf files to the server, but I also want to know how to export (not through the downloader) changed pdf files to the server.

Thank you again and sory for the english.

在 2016年7月7日星期四 UTC+2下午7:51:40,Yizhou TANG写道:

Matt Parizeau

unread,
Jul 21, 2016, 4:15:08 PM7/21/16
to PDFTron WebViewer
We're having trouble reproducing the problems you're seeing. When you delete or add pages the viewer should automatically update the view and update the thumbnails. The annotations that are on later pages should also remain on the same pages even though the pages have shifted positions.

Would you be able to provide a sample of the code that you're using so that we can reproduce the issue?

You can use the getFileData function on the document object to get the current data of the pdf file. You can refer to the code in PDFReaderControl.js that calls getFileData and turns the result into a blob object and then you can find examples online of how to upload a blob to your server.

Matt Parizeau
Software Developer
PDFTron Systems Inc.

Yizhou TANG

unread,
Jul 22, 2016, 1:00:17 PM7/22/16
to PDFTron WebViewer
Here's a sample of the config code attached, it's not finish yet but "save annotation" "insert blank page" and "delete page" buttons (in the top left of the control bar) should work.


Here's a screenshot that I deleted the first page of the document (with the custom minus button on the top control bar). You can see the first page displayed in the main view is correct but in the thumbnail view it shows still the original page. Btw, mind the scroll bar in the right, it's not at top, if you drag it to the top, it will show the deleted page. But if you download the file or change the layout mode, you can see the first page was actually deleted.

I added a blank page at the end of the document (with the "right arrow" button in the dropdown menu under the custom "plus" button), this time the thumbnail view refreshed but not the main view. No matter I click the thumbnail or the "next page" button, I can't see the second page.

As for annotation problem, perhaps it was my mistake cuz i can't repruduce it anymore. I think i might not save the annotations before adding pages.

You can see i'm also trying to make "sort" functions, should I use a combination of add and delete page or there's an individual api? 

在 2016年7月21日星期四 UTC+2下午10:15:08,Matt Parizeau写道:
default.js

Matt Parizeau

unread,
Jul 25, 2016, 5:11:03 PM7/25/16
to PDFTron WebViewer
Thanks for sending the config file!

Unfortunately we're still having problems reproducing the issues using WebViewer 2.2. What version of WebViewer are you using? Would it be possible to send a complete sample that you're using that can reproduce the problem?

For "sorting" pages you can use the movePages function to move pages around inside a document. For example the following will move the second page before the first page:
doc.movePages([2], 1);

Matt Parizeau
Software Developer
PDFTron Systems Inc.

Yizhou TANG

unread,
Jul 26, 2016, 1:14:39 PM7/26/16
to PDFTron WebViewer
I'm using version 2.2.0.

For make sure, I just re-downloaded the webviewer via the link marked on the top of the forum (http://www.pdftron.com/webviewer/download.html) and covered my old folder, but the problem still exist. I tried with chrome51 and ie11. And the starter:

$(function() {
var viewerElement = document.getElementById("viewer");
myWebViewer = new PDFTron.WebViewer({
path: "../WebViewer/lib",
type: "html5",
documentType: "pdf",
enableAnnotations: true,
annotationAdmin: true,
config:"PDFTronConfig/default.js",
}, viewerElement);
});

To reproduce the problem, try load my config file and charge a single-paged pdf file, add a page in front of the page with the button i made and see if you can switch between two pages without changing layout mode?


在 2016年7月25日星期一 UTC+2下午11:11:03,Matt Parizeau写道:

Matt Parizeau

unread,
Jul 27, 2016, 4:02:10 PM7/27/16
to PDFTron WebViewer
Ah I see, the problem was that we had been testing in our stable 2.2 branch where the issue has been fixed. We'll be releasing a 2.2.1 version sometime soon, but for now you can use this build http://www.pdftron.com/ID-zJWLuhTffd3c/WebViewer/WebViewer_2.2.0.47456.zip.

Matt Parizeau
Software Developer
PDFTron Systems Inc.
Reply all
Reply to author
Forward
0 new messages