Continuous Scrolling in Edge Pdf Viewer
Available only in PRO Edition
PDF Viewer
Since 3.0
The widget is available in the Webix Pro edition.
API Reference
- Methods, properties and events
- Samples
Overview
PDFViewer is a tool for displaying the content of PDF files on the screen.
Related sample: Pdf Viewer
The viewer is recommended for use with the dedicated toolbar that contains buttons for paging and zooming. Viewer and toolbar are initialized in separate layout rows:
- the first one with the toolbar;
- the second one with the viewer itself.
Thus, the default constructor of PDF viewer with toolbar looks as follows:
webix.ui ( { rows: [ { view: "pdfbar" , id: "toolbar" } , { view: "pdfviewer" , id: "pdf" , toolbar: "toolbar" , url: "binary->files/WebixDocs.pdf" } ] } ) ;
Configuration parameters are:
- toolbar:
- id - (string) the id of the PDF toolbar;
- viewer:
- id (string) - the id of the viewer;
- toolbar (string) - the id of the related PDF toolbar;
- url (string) - the URL of the PDF file to browse in the viewer prefixed by "binary" keyword that refers to the loading proxy.
PDFbar Structure
Toolbar is supplied with the following fully functional controls:
- navigation arrows (previous and next page);
- current page label;
- "all pages" label;
- zoom in and out icons;
- zoom mode selector;
- download button.
If you need, you can use the viewer and the toolbar separately, by using their public API methods.
PDF Toolbar API Reference
setMasterPage()
sets the page to show in the viewer
- page - (string, number) the value of the page that should be displayed in the viewer
Possible values are "prev", "next" or page number.
$$( "toolbar" ).setMasterPage ( "prev" ) ; // or $$( "toolbar" ).setMasterPage ( 3 ) ;
setMasterScale()
applies a new scale value to the viewer
parameters:
- scale - (string, number) a new scale value
The possible values of the "scale" parameter coincide with the same parameter of the setScale() method.
$$( "toolbar" ).setMasterScale ( 0.3 ) ; // or $$( "toolbar" ).setMasterScale ( 'page-actual' ) ;
setPage()
sets the current page in the toolbar
parameters:
- page - (number) the number of the page that should be displayed
$$( "toolbar" ).setPage ( 2 ) ;
setScale()
sets a new value for the toolbar scale
parameters:
- scale - (string, number) a new scale value. For legal values check scale property above.
$$( "toolbar" ).setScale ( 0.4 ) ; // or $$( "toolbar" ).setScale ( 'page-width' ) ;
setValues()
sets values of toolbar controls, namely the number of pages in the document and the scale in use
parameters:
- pages - (number) the number of pages
- scale - (string, number) the scale value
$$( "toolbar" ).setValues ( 15 , "auto-width" ) ; //or $$( "toolbar" ).setValues ( 10 , "page-actual" ) ;
zoom()
applies zooming to the viewer (in or out); it is called on a toolbar button click ("+" or "-")
parameters:
- direction - (string) the direction of zooming - "in" or "out"
$$( "toolbar" ).zoom ( "in" ) ;
download()
applies downloading to the viewer to get its contents as PDF file
$$( "toolbar" ).download ( ) ;
Loading Data to PDF Viewer
There are three possible ways of loading data to PDF viewer:
- specifying the needed file directly in the viewer constructor by using the url parameter:
{ view: "pdfviewer" , url: "binary->files/data.pdf" }
Related sample: Pdf Viewer
- calling the load method with the file name as a parameter
{ view: "pdfviewer" , id: "pdf" } , ... $$( "pdf" ).load ( "binary->files/data.pdf" ) ;
Related sample: PDF::File Loading
Binary proxy is used for loading the file, which allows getting its contents as ArrayBuffer.
- parsing uploaded file data with the help of the parse method
{ view: "uploader" , width: 200 , height: 45 , value: "Choose a PDF file to upload" , accept: "application/pdf" , on: { onBeforeFileAdd: function (upload) { $$( "pdf" ).parse (upload.file ) ; return false ; } } }
Related sample: PDF File Uploading and Downloading
Working with PDF Viewer Offline
The dependencies which are necessary for working with PDF Viewer are generally taken from Webix CDN online catalog. If you need to view and download files via PDF Viewer offline, you should complete the following steps:
- download the package with CDN-files from https://github.com/webix-hub/cdn-extras
- rename the folder to "extras" and move it to the desired directory
- set the path to the local CDN repository as
webix.env.cdn = "/local_folder" ;
Note that specifying the path to the local CDN repository has some peculiarities:
1) in case you set the path relative to the current page, it should be specified as:
webix.env.cdn = "../../../../local_folder" ;
2) the absolute path to the repository should be specified as follows:
webix.env.cdn = "http://localhost/local_folder" ;
Back to top
lombardibothe1936.blogspot.com
Source: https://docs.webix.com/desktop__pdfviewer.html
0 Response to "Continuous Scrolling in Edge Pdf Viewer"
Post a Comment