How to use LoadCanvasAsync in config.js for printing document in html

[anuj nehra]

As discussed in https://groups.google.com/forum/#!topic/pdfnet-webviewer/dJ2x3WyWGo0

I want to know how can i use LoadCanvasAsync in config.js currently using PWS

[Matt Parizeau]

Hi,

The post you're referring to is a few years old now and WebViewer actually implements this method of printing out of the box for you. When a document is being viewed just press the print button near the top right corner of the page. Let us know if you have any issues or other questions about this!

Matt Parizeau

Software Developer
PDFTron Systems Inc.

[anuj nehra]

Hi Matt,

Blank window will appear if i press ctrl+p.

I want to print my html page with document viewer by browser default print option.

I know that viewer render in canvas but i want to print html page content with document viewer content by using default browser printing not by document viewer print option.

I also want to know how to use LoadCanvasAsync in config.js

[Matt Parizeau]

See this post for triggering printing from ctrl + p https://groups.google.com/d/msg/pdfnet-webviewer/LAAmMxwxbBA/Sog8wEaGFpcJ

However you're saying that you want to print the page with the user interface around the viewer? You'll have to take a look at ReaderControl.css and change the @media print styles so that it doesn't hide the ui-display element.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[anuj nehra]

Hi Matt,

https://groups.google.com/d/msg/pdfnet-webviewer/LAAmMxwxbBA/Sog8wEaGFpcJ 

1) It will trigger only the print in the document viewer but i want to print the whole page as one using browser default print operation but pdftron viewer will be shown as blank in the print preview

2) Please brief how can i change @media of ReaderControl.css using my config.js

3) How to use LoadCanvasAsync i had tried so many times but uanle to use toDataUrl 

On Wednesday, June 3, 2015 at 10:13:30 PM UTC+5:30, anuj nehra wrote:

[anuj nehra]

Currently we are using PWS for viewing document and config.js for any changes.

As i had already told you about default browser print preview that it is not working in mac  safari i have to find a way to fix it.

So, I had decided to download  the webviewer from  https://www.pdftron.com/webviewer/download.html to investigate why print preview is not showing for safari only.

Then i came up with the following solution and their drawback

 

FIX FOR DEFAULT PRINT PREVIEW FOR ALL BROWSER :-   (Using webviewer)

 

Perform all 3 steps and then check doc viewer

 

(1)

 

Step   :   Go to file  WebViewer_Developer_Guide.html and open it in a text editor find line overflow:hidden change it to  overflow:visible

Drawback : Extra  scroll will appear in viewer

 

(2)

 

Step   :   Go to file docViewer.css and open it in a text editor find  .pageContainer make position : relative as comment    /*position : relative;*/ 

Drawback : Navigation of page stop working

 

Step   :   Go to file docViewer.css and open it in a text editor find   textarea.freetext  and comment out whole css

Drawback : None

 

(3)

 

Step   :   Go to file ReaderControl.css and open it in a text editor find @media print   and comment out whole css

Drawback : Navigation of page stop working

 

Step   :   Go to file ReaderControl.css and open it in a text editor find   #ui-display, .ui-front   andcomment out whole css

Drawback : None

 

Now, You can hit ctrl+p or check print preview in any browser it should work now.

 

Finally i want to know how can i change the ReaderControl and docViewer css using Config.js this solution is not done by config.js (currently using PWS) kindly guide me to fix it using config.js and steps to done above changes using config.js

On Wednesday, June 3, 2015 at 10:13:30 PM UTC+5:30, anuj nehra wrote:

[Matt Parizeau]

Unfortunately it isn't as completely straightforward if you're using config.js with PWS. The way you would do it is to dynamically load a new css file and then override the style definitions that are found in docViewer.css. So in your config file you could have this code:

$.extend(ReaderControl.config, {
    customStyle: 'myconfig.css'
});

Then in the css you would override the styles you want removed. For example: 

@media print {
    #ui-display, .ui-front {
        display: block !important;
    }
}

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[anuj nehra]

Hi Matt,

Thanks for the guidelines here is my few question about them :-

1) As you had already told me dynamically load a new css to change docViewer.css. Does it is same for ReaderControl.css ?

2) How can i fix this navigation issue while doing changes in css

Step   :   Go to file docViewer.css and open it in a text editor find  .pageContainer make position : relative as comment    /*position : relative;*/ 

Drawback : Navigation of page stop working

On Wednesday, June 3, 2015 at 10:13:30 PM UTC+5:30, anuj nehra wrote:

[anuj nehra]

How to fix navigation of page stop working while changing in  docViewer.css  and comment line .pageContainer  position : relative 

On Wednesday, June 3, 2015 at 10:13:30 PM UTC+5:30, anuj nehra wrote:

[anuj nehra]

Hi Matt,

This is to inform you that my navigation issue is fixed + browser default preview only two things left :-

1) How to change width and height of iframe having random id using config.js

2) How to optimise uploading time on PWS as it is taking around 30-50 sec to upload and view file in PWS using curl.

On Wednesday, June 3, 2015 at 10:13:30 PM UTC+5:30, anuj nehra wrote:

[Matt Parizeau]

1) Answered in the other post: https://groups.google.com/forum/#!topic/pdfnet-webviewer/9j9zPU4ioAY

2) This will be dependent on the user's connection upload speed so I'm not sure there is much you can do to optimize this. If possible we would recommend uploading your files ahead of time so that they're ready right away when they need to be viewed.

Matt Parizeau

Software Developer

PDFTron Systems Inc.