HTML5 : PDF is cutting from bottom

[Anish Jain]

Hi,
We are facing some issue of PDF in mobile.

When user try to put PDF Tron web viewer in landscape mode

from portrait mode, PDF is cutting from bottom.

Please let us know what's issue or where we can fix it.

May be we need to set width and height dynamically as we

are changing mobile mode on run time.

Note :

1. We have set "mobileRedirect: false" in PDFTron.WebViewer .

Thanks,
Anish Jain

[Kevin Kuo]

Hi Anish,

Are you on seeing the problem on the iPad?

The reason why we have mobileRedirect as the default is because there safari on iOS does not handle iframe window heights properly.

Can you try out the universal sample? (under samples\universal\index.html)

This samples tries to use a workaround to fix issues with iframe.

         

       $(window).on("orientationchange", function () {
                    //when using the mobile viewer in an iframe, the orientationchange event is only triggered on the top window.
                    //the desired height and width of the mobile viewer must be set explicitly.
                    //if the mobile viewer should take up 100% of the screen space, simply set the iframe content window's innerHeight and innerWidth
                    //to the top window's respective values.

                    if ($('html').hasClass("ipad ios7") && Math.abs(window.orientation) === 90) {
                        //workaround for iOS7 bug where window height is incorrect
                        //http://stackoverflow.com/questions/19012135/ios-7-ipad-safari-landscape-innerheight-outerheight-layout-issue/19449123#19449123
                        $('#viewerFrame')[0].contentWindow.innerHeight = 672;
                    } else {
                        //resize the iframe content
                        $('#viewerFrame')[0].contentWindow.innerHeight = $(window).height();
                    }
                    $('#viewerFrame')[0].contentWindow.innerWidth = $(window).width();


                });

(where #viewerFrame is an iframe loading the universal webviewer "lib/univeral")

[sd...@njit.edu]

Hi,

I am trying to integrate webviewer with my application. My application has already a HTML page in which webviewer has to be inserted in a div.

Webviewer has to be loaded with a particular page number when any page number on the HTML is clicked. Basically, my application will display a list of page numbers upon search. When clicked on any page number, the book should be loaded with that particular page number.

When i try to integrate the webviewer, I am getting lot of errors. Can you please let me know the exact procedure to display the webviewer in the one div part of my page?

We are trying to buy docpub to convert our pdf book to xod, if i can display it successfully.

Also, is there any way to disable side panel, annotations and highlight the text if i send the word to be searched dynamically from search results?

Thanks,
Shashank

[Matt Parizeau]

Hi Shashank,

For displaying WebViewer in a div on your page you can take a look at our WebViewer Controls sample which can be found in the WebViewer download under samples/webviewer-controls. You can also see a running example of the sample here. The sample also shows how to programmatically start a search. You can also take a look at the WebViewer Developer Guide under "WebViewer: The Basics".

For your other customizations you'll want to use a config file. You can read more about config files in the linked Developer Guide in the "Customization Framework" section. This section also explains how to send custom data through WebViewer to your config file which is what you could do to set the starting page number when the document is loaded. This post has an example and this post shows an alternate way to do it. If you just want to jump between pages and not reload the entire document then you could just use WebViewer's setCurrentPageNumber function.

Annotations are disabled by default when creating a WebViewer instance. Just make sure the option "enableAnnotations: true" isn't passed to WebViewer and they won't be enabled.

To hide the side panel you could add the following code to your config file:

ReaderControl.config.ui.hideSidePanel = true;

Matt Parizeau

Software Developer
PDFTron Systems Inc.

[sd...@njit.edu]

Hi Matt,

Thank you for your response. I have tried implementing the example you provided by creating a small project in my apache server. It is working fine, but, I have few questions.

1. Print button is not visible.

2.  Right click is not disabled

which are present in the example you mentioned. Please let me know what is to be done now.

Also, I tried to integrate this with our application. but, I am getting the error - "ReferenceError: PDFTron is not defined"

I am not sure what is wrong. I tried fixing it, but nothing worked. Am I missing any library files? Please let me know.

Thanks

Shashank

[Matt Parizeau]

Hi Shashank,

Make sure that you're using version 1.7 or higher which is when the printing button was added and right-click was disabled. You can download the latest version from here: http://www.pdftron.com/webviewer/download.html

You'll need to make sure that WebViewer.min.js is included and that the path to the lib folder is set correctly. See the webviewer-controls sample for how that's set.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[sd...@njit.edu]

Hi Matt,

I have now downloaded the newer version and tried. It is working fine now in the sample page.

But, when i tried to integrate it with my application, i am getting the same error. 

Below is my application does.

1. My app's index page is a jsp file in which HTML attributes are defined. Basic usage of the app is searching. When a word is typed in the textbox and click on the button, it will fetch the page numbers of a book that word contains and displays on the left side of the page. When any of those page number is clicked, our webviewer must load with that particular number as the starting page. To display the fetched page numbers, we are using a js file. I tried defining a function in this js file to display webviewer, but i am getting the below error. "ReferenceError: myWebViewer is not defined".

Below is what I did:

1. Imported the library into my application

2. Defined the paths of the WebViewer.min.js and jquery-.7.2.min.js files in my index page.

3. Initialized the webviewer in my index page.

But, i am not sure how I can access this initialized webviewer in my js file which I have used for displaying the page numbers. Please let me know on how to proceed on this.

Your help in this case is very much appreciated.

Thanks,

Shashank

[Matt Parizeau]

Hi Shashank,

When it says 'myWebViewer is not defined' it's because the js file you're including doesn't know anything about the variables defined on your index page. So there are two ways to do this. You can expose the variable on the window object so that your script has access to it like: window.myWebViewer = new PDFTron.WebViewer({...}); or it's probably simpler if you just create the WebViewer object inside your included JavaScript file.

So in your included JS file you might have something like:

$(function() {
    $('#myButton').on('click', function() {
        var viewerElement = document.getElementById('viewer');

        myWebViewer = new PDFTron.WebViewer({...}, viewerElement);

        var $viewerElement = $(viewerElement);
        $viewerElement.on('documentLoaded', function() {
            myWebViewer.setCurrentPageNumber(4);
        })
    });
}

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[sd...@njit.edu]

Hi Matt,

Thank you for your response. I am now able to display it. It loads perfectly when clicked on any fetched pagenumber first time, but on second time, it fails to load the new page number. Page numbers are displayed as text with href. On click of any page number, i am calling a function which is defined in my javascript file. That function initializes webviewer and loads the document. This is perfectly alright for the first time, but when clicked on anyother page number next time, the new page number is not being displayed.

Please let me know if there is anyway so that i can initialize webviewer once and pass the page number as well as the word to be highlighted each time.

Thanks,

Shashank

[Matt Parizeau]

Hi Shashank,

Since you're only initializing WebViewer once that means the documentLoaded event is only going to fire once. On later clicks the document will already be loaded so you can just call myWebViewer.setCurrentPageNumber(3). To search for some text you can call myWebViewer.searchText("mysearchterm"). You can find documentation on other functions you can call here: http://www.pdftron.com/webviewer/demo/doc/symbols/PDFTron.WebViewer.html

Matt Parizeau

Software Developer

PDFTron Systems Inc. 

[sd...@njit.edu]

Hi Matt,

Now I am able to display as needed. I have few more questions to be clarified.

1. Can we disable buttons which we think are not needed? like, rotate button for example.

2. Also, is there any way so that I can highlight all the words present in that page at a time. Like, if a word is present 4 times in that page, can we highlight all the 4 at a time? If so, which js file must be modified. As per my analysis, readercontrol.js need to be modified.

3. Please let me know the payment charges for conversion of pdf into xod.

4. I dont see the fullscreen button, as my div is small.. How can i modify the webviewer elements?

Thanks,

Shashank

[Matt Parizeau]

Hi Shashank,

1. You can disable buttons by hiding them through JavaScript or CSS. You could do this in a config file like our samples and the code might look like: $('#rotateButton').hide()

2. At the moment there isn't any way to highlight multiple words at the same time through text selection. You could achieve something similar to what you want using highlight annotations and our text position sample actually does exactly that. You can find the sample under samples/text-position and it finds all the instances of the word "WebViewer" on page three.

3. You can find the prices for converting to XOD with PWS here: http://www.pdftron.com/pws/index.html

4. One way is to look at ReaderControl.css as it uses a media query to hide the page zoom slider and search input box when the page is below a certain width. Alternatively you could hide them through JavaScript like #1.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[sd...@njit.edu]

Hi Matt,

I tried displaying the xod file. There are some issues with the display. I attached the screenshots of the issues.

Please let me know where to modify the code to get rid of the unnecessary buttons. In chrome, the file is displayed only in a part and in firefox, the buttons are displayed not in order. Please let me know on how to get rid of the errors.

Thanks,

Shashank

[Matt Parizeau]

Hi Shashank,

It looks like maybe you're customizing the viewer in some way for those issues to appear. Are you able to reproduce those issues when looking at the default viewer in our showcase? http://www.pdftron.com/webviewer/showcase/

To hide the buttons you can do what I mentioned above: 

You can disable buttons by hiding them through JavaScript or CSS. You could do this in a config file like our samples and the code might look like: $('#rotateButton').hide()

You can find the ids of the buttons by inspecting the elements in the browser or by looking for the buttons inside ReaderControl.html.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[sd...@njit.edu]

Hi Matt,

I made changes to the customizations and now, it is working fine. 

But, I came across one more issue, where the searched word is not being highlighted. When sent without any searchmodes, it is working fine. But, when i set the searchmode as "CaseSensitive" or WholeWord, then the highlighting is not done. I have debugged the code and found that, viewer library is not able to catch the sent mode. It says "referenceerror: searchmodes is not defined". Can you please let me know what's wrong?

[Matt Parizeau]

Hi Shashank,

There is an issue with WebViewer.js where it isn't handling the search modes correctly if they're passed as a string. The issue will be fixed in the next version but for now you could pass the search modes as an array, e.g. myWebViewer.searchText("word", ["CaseSensitive"]);

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[sd...@njit.edu]

Hi Matt,

I tried passing the search mode as an array, but i got this exception:

"Exception... "Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIChannel.asyncOpen]"  nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)"  location: "JS frame :: resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/server/main.js -> resource://gre/modules/devtools/server/actors/script.js :: fetch :: line 5218"  data: no]Line: 5218, column: 0"

What might have gone wrong? 

Also, is there anyway i can assign the textbox in the viewer with my searched term? I mean, if i search for a word, say "document", the word should be highlighted in the page and it should also come programatically in the textbox so that we can search the next term in that page.

Thanks,

Shashank

[Matt Parizeau]

Hi Shashank,

I forgot to add that for the text to be highlighted you'll want to add the "ProvideQuads" option as well. So myWebViewer.searchText("test", ["CaseSensitive", "ProvideQuads"]);

An alternative way to do the searching would be to modify the search box directly and trigger the search directly from there. This has the benefit of everything showing up in WebViewer's search box. You could do it like this:

var inner = $('iframe')[0].contentWindow;
inner.$('#fullSearchBox').val("my search term");
inner.$('#caseSensitiveSearch').prop('checked', true);
inner.$('#fullSearchButton').trigger('click');

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[sd...@njit.edu]

Hi Matt, 

Thank you for your response. It is working fine now. Is there any way to restrict the search to only one particular page instead of the whole document?

Also, we have only 1000 pages to be converted to XOD file. Is there any option to subscribe for this sort of scenario instead of a monthly subscription?

Please let me know.

Thanks,

Shashank

[Matt Parizeau]

Hi Shashank,

There isn't a way to directly do this with the searchText function. Alternatively you could use Document's LoadPageText function. Take a look at the text-position sample in the WebViewer download package as I think that would be similar to what you want.

For licensing questions you can contact sa...@pdftron.com.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[sd...@njit.edu]

Hi Matt,

Yes, I tried it. I have one more scenario like

 - When the user changes 10 pages up or down, i have to disable the prev or next page buttons. I tried handling it in my javascript function, but it doesn't show any effect to the display. Do i have to modify directly in the readercontrol.js??

Also, how to modify the color of the highlighting part?

Thanks,

Shashank

[Matt Parizeau]

Hi Shashank,

If you want to disable the next or prev page buttons in the desktop viewer you could have the following code in a config file:

// disable
$('#prevPage').button('disable');
// enable
$('#nextPage').button('enable');

To change the text highlight color you can use the SetTextHighlightColor function:

readerControl.docViewer.SetTextHighlightColor('rgba(255, 0, 0, 0.5)');

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[sd...@njit.edu]

Hi Matt,

Can you please tell me like how to pass the dynamic data to the config file.

I have tried creating the config file, but nothing seems to be working. Below is the scenario

1. I am initializing the viewer only once through my javascript function

2. I am able to pass the page number and the text to be searched through a javascript function in the same js file.

I have written functions for button disabling and loadPageText in ReaderControlConfig file. Now, suppose, if i want to pass the page number and the text to be searched to the ReaderControlConfig file, how will i be able to achieve? 

I have to pass the values from my javascript function through which i am now passing the page number (mentioned in step2). What's the procedure to achieve this? Thanks for all your help.

Thanks,

Shashank

[Matt Parizeau]

Hi Shashank,

For passing custom data to a config file see this post: https://groups.google.com/d/msg/pdfnet-webviewer/2ebPVFQvQGc/DmwewT90EJIJ

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[sd...@njit.edu]

Hi Matt,

I received the below error. What can be done in this case?

"Config script could not be loaded. The default configuration will be used"

[sd...@njit.edu]

Hi Matt,

I am stuck up with passing data to the config file from my javascript file. As I am not much aware of the js, please let me know 

1. How to configure a configuration file

2. How to pass dynamic data to handle few customizations

I want to hide the prev/next page buttons if a range of +10/ -10 pages are changed from the current page number. I have tried few ways which didn't work. Also, highlighting all the words in a page. 

I want to handle these customizations by passing data to a config file. But, i am not able to do so

Please let me know the procedure to link my javascript file with readercontrol. Your help is much appreciated.

Thanks,

Shashank

[Matt Parizeau]

Hi Shashank,

That warning means that there was an error in your JavaScript configuration file and it couldn't be run.

You can see an example of how config files are used by taking a look at the samples in the WebViewer download package. Basically you pass the config option in the PDFTron.WebViewer constructor.

var myWebViewer = new PDFTron.WebViewer({
    config: "path/to/my/config/file.js",
    ...
    ...
}, viewerElement);

For custom data you can pass the custom option as linked in my previous post: https://groups.google.com/d/msg/pdfnet-webviewer/2ebPVFQvQGc/DmwewT90EJIJ

Inside the config file you can execute any JavaScript code that you want.

To hide the prev/next buttons after a change like that you could have something like the following in your config file:

var docViewer, currentPage;

$(document).on('documentLoaded', function() {
    docViewer = readerControl.docViewer;
    currentPage = docViewer.GetCurrentPage();

    docViewer.on('pageNumberUpdated', function() {
        var newPage = docViewer.GetCurrentPage();

        if (Math.abs(newPage - currentPage) > 10) {
            // hide the buttons
        }

        currentPage = newPage;
    });
});

To be able to select all the text on a page you could refer to the sample code here: https://groups.google.com/d/msg/pdfnet-webviewer/16b14xmZWc0/QjDHF7bsipkJ. The relevant code is the second part that uses the text select tool. You'll want to set the coordinates to be the top left and bottom right of the page.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[sd...@njit.edu]

Thank you so much Matt,

I am successfully able to hide the buttons as needed. While highlighting the words returned from LoadPageText function, i am getting a warning - 'annotations could not be loaded from the server' 

I have debugged and found that, the textStatus is 'parsererror' and the errorThrown is '

'"Invalid XML: <?php /** * annotationHandler.php * This PHP script is sample of basic server-side annotation handling. * When the WebViewer makes a POST request with annotations to save, this script will save the annotations to file. * When the WebViewer makes a GET request to load the annotations, this script will fetch the annotations from file and return it. * Note that this is only a sample and does not take account of security and concurrency. * * For production, please consider the following: * 1. Your server should assign a document identifier 'did' to the WebViewer. When saving and loading annotations, use this 'did' to uniquely identify the annotation file to use. * 3. You may also want to use 'did' as a session token, in order to authenticate the client user. * 2. You may want to consider a better storage for your annotation file (e.g. save the annotatation in a database) **/ //Cookie handler if(!isset($_COOKIE['cookie_id'])){ $cookie_id = uniqid(); setcookie ("cookie_id", $cookie_id, time() +86400, "/"); }else{ $cookie_id = $_COOKIE['cookie_id']; } if (!is_dir("annotations")) { // dir doesn't exist, make it mkdir("annotations"); } //Simple annotation handler if(isset($_REQUEST['did']) && $_REQUEST['did'] != "null"){ //get the document id $did = $_REQUEST['did']; //Use did to authenticate user if (!is_dir("annotations/{$cookie_id}")) { // dir doesn't exist, make it mkdir("annotations/{$cookie_id}"); } $xfdf_file = "annotations/{$cookie_id}/".$did.".xfdf"; } else{ $xfdf_file = "annotations/default.xfdf"; } if ($_SERVER['REQUEST_METHOD'] === 'POST') { //POST request if(isset($_POST['data'])){ if (get_magic_quotes_gpc()) { $xfdfData = stripslashes($_POST['data']); } else{ $xfdfData = $_POST['data']; } if(file_put_contents($xfdf_file, $xfdfData)){ //save successful //echo $xfdf_file; }else{ header("HTTP/1.1 500 Internal Server Error"); } } } else{ //GET request if(file_exists($xfdf_file)){ header("Content-type: text/xml"); echo file_get_contents($xfdf_file); }else{ header("HTTP/1.1 204 No Content"); } } ?>"'

What can be done in this case? your help is much appreciated.

Thanks,

Shashank

For your other customizations you'll want to use a config file. You can read more about config files in the linked Developer Guide in the "Customization Framework" section. This section also explains how to send custom data through WebViewer to your config file which is what you could do to set the starting page number when the document is loaded. This post has an example and <a href="https://groups.google.com/d/msg/pdfnet-webviewer/3A9XqrYhNeE/JBAC0lTY_PAJ" target="_blank" onmousedown="this.href='https://groups.google.co

...

[sd...@njit.edu]

Also, is there any way to know that the document is fully loaded? It is taking time to load. So, is it possible to add an ajax object to notify the user that the document is still loading?

Thanks,

Shahsank

For your other customizations you'll want to use a config file. You can read more about config files in the linked Developer Guide in the "Customization Framework" section. This section also explains how to send custom data through WebViewer to your config file which is what you could do to set the starting page number when the document is loaded. This post has an example and <a href="https://groups.google.com/d/msg/pdfnet-webviewer/3A9XqrYhNeE/JBAC0lTY_PAJ" target="_blank" onmousedown="this.href='https://groups.google.co

...

[Matt Parizeau]

Hi Shashank,

It looks like maybe you don't have php enabled on your server. By default the viewer will try to load annotations using the provided php sample file, annotationHandler.php. It looks like your server is returning the contents of that php file instead of actually executing it.

You can use the documentLoaded event to know when the document has finished loading. You can refer to my previous post for an example, but basically it looks like $(document).on('documentLoaded', function() {

If you wanted to display a message while the document is loading then you could show a message from the viewerLoaded event and then hide it in the documentLoaded event. You could use a jQuery UI dialog to display the message. For example:

$(document).on('viewerLoaded', function() {
    // show loading message
});

$(document).on('documentLoaded', function() {
    // hide loading message
});

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[sd...@njit.edu]

Hi Matt,

I am able to display the loading animation perfectly. Thank you for the help. The only thing that's bothering me is the php error. 

I have done research to find why i am getting the below error, but not succeeded. - "annotations could not be loaded from the server"

Please let me know what to be done in this case.

Thanks,

Shashank

...

[Matt Parizeau]

Hi Shashank,

As I mentioned in my previous post I think the problem is that you don't have php enabled on your server:

It looks like maybe you don't have php enabled on your server. By default the viewer will try to load annotations using the provided php sample file, annotationHandler.php. It looks like your server is returning the contents of that php file instead of actually executing it.

If you don't want to use this default annotation handler then you can change the serverUrl option to point to a location on your server that will handle the annotation saving and loading.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

</block

...

[sd...@njit.edu]

Hi Matt,

Thank you so much. Everything is perfect now. Is there any way to disable text boxes in the viewer? I tried with jquery, but it isn't working.

Thanks,

Shashank

...

[sd...@njit.edu]

Also, I had to insert watermark on the textbook. I have seen PDF.NET Stamper method for adding the watermark.

Is there any way I add watermark dynamically? I have seen that ReaderControl.js has code for adding the watermarks, but its not working though.

Below is what I did in ReaderControl.js

me.docViewer.on('pageComplete', function(e, pageIndex) {

        var pageContainer = me.getPageContainer(pageIndex);

        pageContainer.append('<div style="font-weight:bold;color:red; position:relative; display:block; text-align:center; float:right; width:500px; top:50%;margin-top:-10px;left:50%;margin-left:-250px">My TextBook</div>');

Please let me know what is wrong with this.

...

[Matt Parizeau]

Hi Shashank,

For future questions could you post them in a new forum thread so that they'll be easier to locate for yourself and others instead of trying to find the specific post in this long thread :)

When you say "disable text boxes" what do you mean exactly? Do you mean set the annotation note popups to readonly or completely disable note popups?

See this post (https://groups.google.com/d/msg/pdfnet-webviewer/Kth8hiwNs6Q/Zoq-LFjV3PEJ) for adding a watermark to the page. Note the end of that post that says you need to add a z-index. I believe that's what you're missing from your code.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

Hi Shashank,

Make sure that you're using version 1.7 or higher which is when the printing button was added and right-click was disabled. You can download the latest version from here: <a href="http://www.pdftron.com/webviewer/download.html" target="_blank" onmousedown="this.href='http://www.google.com/url?q\75http%3A%2F%2Fwww.pdftron.com%2Fwebviewer%2Fdownload.html\46sa\75D\46sntz\075

...

[sd...@njit.edu]

This hopefully is the last question. I am exploring everything, trying to make modifications. Sorry for the trouble. :)

I will start a new thread if I have any questions in future :)

Anyway, I meant, making the textbox read - only, so that the user can see it, but cannot modify

Thanks,

Shashank

...

[Matt Parizeau]

Hi Shashank,

If you don't want the user to be able to edit or create annotations then you can switch to readonly mode and that will automatically make the textboxes readonly.

readerControl.docViewer.GetAnnotationManager().SetReadOnly(true);

If you wanted to disable note textareas for annotations but still allow creation of annotations you could have:

readerControl.docViewer.GetAnnotationManager().on('annotationPopupCreated', function(e, annotation, $popupel, $textarea) {
    $textarea.prop('disabled', true);
});

Matt Parizeau

Software Developer

PDFTron Systems Inc.

On Friday, April 11, 2014 8:13:05 AM UTC-7, (unknown) wrote:<blockquote s

...

[Vladimir Knobel]

Hi Anish,

Were you able to solved this issue with the proposed solution=?

Thanks for any hints.

Best regards

Vlad

On Wednesday, March 5, 2014 at 2:24:02 PM UTC+1, Anish Jain wrote:

Hi,
     We are facing some issue of PDF in mobile.

     When user try to put PDF Tron web viewer in landscape mode
     
     from portrait mode, PDF is cutting from bottom.
     
     Please let us know what's issue or where we can fix it.
   
     May be we need to set width and height dynamically as we

     are changing mobile mode on run time.

     Note :

     1. We have set "mobileRedirect: false" in PDFTron.WebViewer .

Thanks,
Anish Jain