cordova pdf preview plugin with Foxit Pdf sdk
npm install cordova-plugin-foxitpdf
bash
cordova plugin add cordova-plugin-foxitpdf
`
It is also possible to install via repo url directly ( unstable )
`bash
cordova plugin add https://github.com/foxitsoftware/cordova-plugin-foxitpdf.git
`
Large files in the plugin may cause your update to fail. If that is the case, please try again following the steps below:
1. Clone this project
2. Add plugin from local using this command :
`bash
cordova plugin add ~/xxx/cordova-plugin-foxitpdf (This address is replaced by your own)
`
Integration for iOS
The iOS version of the cordova plugin only needs a few simple steps to deploy
1. Unzip Foxit PDF SDK for iOS and copy libs folder into the component’s ios folder.
(/xxx/platforms/ios/)
Please use foxitpdfsdk_(version_no)_ios.zip from https://developers.foxitsoftware.com/pdf-sdk/ios/
2. Target -> General -> Embedded Binaries
Add dynamic framework "FoxitRDK.framework" 、"uiextensionsDynamic.framework" and "FoxitPDFScanUI.framework"
to Xcode’s Embedded Binaries
3. Target -> General -> Linked Frameworks and Libraries -> + -> WebKit.framework
> Note Do not forget to add pdf files
You can add the PDF to Copy Bundle Resources directly. Just left-click the project, find 'Copy Bundle Resources' in the 'Build Phases' tab, click on the + button, and choose the file to add. You can refer to any PDF file, just add it to the Xcode’s Copy Bundle Resources.
Or,you can use the pdf file under Document directory in sandbox
Now that the preparatory work has been completed，you can use this plugin everywhere in your project.
- JS API Reference
Integration for Android
1. Migrating to AndroidX, Add the following configuration to xxx/platforms/android/gradle.propertie：
`xml
android.useAndroidX=true
android.enableJetifier=true
`
2. Download foxitpdfsdk_(version_no)_android.zip from https://developers.foxitsoftware.com/pdf-sdk/android/ (Please use the latest version 9.1)
3. Unzip foxitpdfsdk_(version_no)_android.zip and copy libs folder into the component’s android folder.
/xxx/platforms/android/
- JS API Reference
How to use this plugin for cordova developer
> 1. Initialize
`javascript
var sn = 'foxit_sn';
var key = 'foxit_key';
window.FoxitPdf.initialize(sn,key);
`
> 2. Open Pdf File
`javascript
var path = 'Your file path';
var password = 'password'; // If the PDF document is not encrypted by password, just pass an empty string.
window.FoxitPdf.openDocument(path, password);
`
How to change the UI of PDF viewer control?
For Foxit PDF SDK for iOS. The UI is handled within the "FoxitRDK.framework" and "uiextensionsDynamic.framework." The files that comes with the evaluation package, however, they also comes with the source, which you can compile and replace accordingly. The UI source can be located at "libs\uiextensions_src" You can find the uiextensions.xcodeproj in the same directory. Just open this project with xcode, modified it to your needs, build, and replace them accordingly in step 2 of the instruction at https://github.com/foxitsoftware/cordova-plugin-foxitpdf#integration-for-ios.
For Android, the UI is located at the binary at libs\FoxitRDKUIExtensions.aar. You can find the source for this binary in the package at foxitpdfsdk_XXX_android.zip at libs\uiextensions_src. You can open this project with Android Studio, modified it, and replaced the FoxitRDKUIExtensions.aar file accordingly. Step 2 of https://github.com/foxitsoftware/cordova-plugin-foxitpdf#integration-for-android is where the instructions on the github page indicates that it is being used.
JS API Reference
$3
> window.FoxitPdf.initialize(sn,key);
- __options__: Initialization options.
- __foxit_sn__: the foxit_sn string
- __foxit_key__: the foxit_key string
foxit_sn and foxit_key are required, otherwise the initialization will fail. rdk_key and rdk_sn can be found in the libs folder of foxitpdfsdk_(version_no)_ios.zip.
`javascript
var sn = 'foxit_sn';
var key = 'foxit_key';
window.FoxitPdf.initialize(sn,key);
`
$3
> window.FoxitPdf.enableAnnotations(enable);
- __enable__: A boolean value whether to enable or disable annotation modules.
Note: To make it work, this function should be called before opening a document.
`js
var enable = false;
window.FoxitPdf.enableAnnotations(enable);
`
$3
> window.FoxitPdf.openDocument(path, password);
- __path__: Document path you wish to open
- __password__: The password used to load the PDF document content. It can be either user password or owner password.
If the PDF document is not encrypted by password, just pass an empty string.
Note: The document can only be opened if the initialization is successful.
`javascript
var path = 'Your file path';
var password = 'password'; // If the PDF document is not encrypted by password, just pass an empty string.
window.FoxitPdf.openDocument(path, password);
`
$3
> window.FoxitPdf.setSavePath(savePath);
- __savePath__: Document path that prevents overwriting on the preview file _(if set)_
`js
var savePath = 'Your file path';// Document path that prevents overwriting on the preview file _(if set)_
window.FoxitPdf.setSavePath(savePath);
`
$3
> window.FoxitPdf.importFromFDF(fdf_doc_path, data_type, page_range);
- __fdf_doc_path__: A valid fdf file path, from which form fields and annotations will be imported.
- __data_type__: Used to decide which kind of data will be imported. this can be one or a combination of as following values:
1. 0x0001 : Form fields are imported from or exported to FDF/XFDF document.
2. 0x0002 : Annotations (except Movie, Widget, Screen, PrinterMark and TrapNet, link) are imported from or exported to FDF/XFDF document.
3. 0x0004 : links are imported from or exported to XFDF document.Not supported right now
- __page_range__: A integer range array that specifies some pages. Data (in specified types) from FDF/XFDF document will be imported to these specified pages range for importing. In this array, 2 numbers are a pair: the first integer is the starting page index, and the second integer is the page count. Default value: an empty range by default and not set any value.It only support annotations.
`js
var fdf_doc_path = 'Your file path';// FDF file path
var data_type = 0x0002;
var page_range = [[0,1],[2,3]]//[[start1, count1], [start2, count2]....]
window.FoxitPdf.importFromFDF(fdf_doc_path, data_type, page_range);
`
$3
> window.FoxitPdf.exportToFDF(export_path, data_type, fdf_doc_type, page_range);
- __export_path__: A valid path to which form fields and annotations will be exported.
- __data_type__: Used to decide which kind of data will be imported. this can be one or a combination of as following values:
1. 0x0001 : Form fields are imported from or exported to FDF/XFDF document.
2. 0x0002 : Annotations (except Movie, Widget, Screen, PrinterMark and TrapNet, link) are imported from or exported to FDF/XFDF document.
3. 0x0004 : links are imported from or exported to XFDF document.Not supported right now
- __fdf_doc_type__: FDF document type. 0 means FDF, and 1 means XFDF.
- __page_range__: A integer range array that specifies some pages. Data (in specified types) from FDF/XFDF document will be imported to these specified pages range for importing. In this array, 2 numbers are a pair: the first integer is the starting page index, and the second integer is the page count. Default value: an empty range by default and not set any value.It only support annotations.
`js
var fdf_doc_type = 0;
var export_path = '/Documents/annot_export.fdf';
var page_range = [[0,1],[2,3]]//[[start1, count1], [start2, count2]....]
var data_type = 0x0002;
window.FoxitPdf.exportToFDF(export_path, data_type, fdf_doc_type, page_range);
`
$3
> window.FoxitPdf.addEventListener(eventname,callback);
- __eventname__: The name of the event to listen for _(String)_
- __onDocWillSave__: This event fires when the document will be saved.
- __onDocSaved__: This event fires when the document is saved.
- __onDocOpened__: This event fires when the document is Opened.
- __callback__: This function is executed when the event fires. The function is passed an object as a parameter.
Add a listener for an event
`javascript
window.FoxitPdf.addEventListener('onDocSaved',function(data){
console.log('onDocSaved callback ',data);
});
window.FoxitPdf.addEventListener('onDocOpened',function(data){
console.log('onDocOpened callback ',data);
});
`
$3
> window.FoxitPdf.setTopToolbarItemVisible(index, visible);
Set top toolbar item hide/show, and it only works for the default top toolbat item.
NOTE：It should be called before opening document.
- __index__: the item index of the top toolbar. Valid range: from 0 to (count -1), now, the top bar can have a maximum of 6 items, and it may differ between phone and tablet
0 - Back
1 - Panel
2 - Thumbnail
3 - Bookmark
4 - Search
5 - More
- __visible__: true means to show the specified item, false means to hide the specified item.
`js
window.FoxitPdf.setTopToolbarItemVisible(0, false);
`
$3
> window.FoxitPdf.setBottomToolbarItemVisible(index, visible);
Set bottom toolbar item hide/show, and it only works for the default bottom toolbat item.
NOTE：It should be called before opening document.
- __index__: the item index of the bottom toolbar.Valid range: from 0 to (count -1),now, the bottom bar can have a maximum of 4 items, and it may differ between phone and tablet
0 - Panel
1 - View
2 - Thumbnail
3 - Bookmark
- __visible__: true means to show the specified item, false means to hide the specified item.
`js
window.FoxitPdf.setBottomToolbarItemVisible(0, false);
`
$3
> window.FoxitPdf.setToolbarItemVisible(index, visible);
Set show/hide tool items on the top/bottom, including the tabs.
NOTE：It should be called before opening document.
- __index__: the item index of the toolbar.
0 - Back
1 - More
2 - Search
3 - Panel
4 - View It has the same effect as setting 11 because the view behaves differently on phones and tablets. If this is set, it will hide the view item on the bottom bar on phones and the view tab on tablets.
5 - Thumbnail
6 - Bookmark
7 - Home Tab
8 - Edit Tab
9 - Comment Tab
10 - Drawing Tab
11 - View Tab Reference index 4
12 - Form Tab
13 - Fill & Sign Tab
14 - Protect Tab
- __visible__: true means to show the specified item, false means to hide the specified item.
Remove Home Tab
`js
window.FoxitPdf.setToolbarItemVisible(7, false);
`
$3
> window.FoxitPdf.setPrimaryColor(light, dark);
Sets the primary color.
NOTE：It should be called before opening document.
- __light__: The primary color for the light theme.
- __dark__: The primary color for the dark theme.
__Supported formats are__:
- __0xAARRGGBB__:
- __0xRRGGBB__:
- __#AARRGGBB__:
- __#RRGGBB__:
- __rgb()__:
- __rgba()__:
`js
window.FoxitPdf.setPrimaryColor("#ff0000", "#ff0000");
`
$3
> window.FoxitPdf.setToolbarBackgroundColor(position, light, dark);
Sets the background color of a toolbar based on its position.
NOTE：It should be called before opening document.
- __position__: The toolbar position.
0 - Top bar
1 - Tab action bar
2 - Bottom bar
- __light__: The background color to be used in light mode.
- __dark__: The background color to be used in dark mode.
__Supported formats are__:
- __0xAARRGGBB__:
- __0xRRGGBB__:
- __#AARRGGBB__:
- __#RRGGBB__:
- __rgb()__:
- __rgba()__:
`js
window.FoxitPdf.setToolbarBackgroundColor(0, "#ff0000", "#00ff00");
`
$3
> window.FoxitPdf.setTabItemSelectedColor(light, dark);
Sets the selected tab item color for the tab action bar, supporting both light and dark modes.
NOTE：It should be called before opening document.
- __light__: The background color to be used in light mode.
- __dark__: The background color to be used in dark mode.
__Supported formats are__:
- __0xAARRGGBB__:
- __0xRRGGBB__:
- __#AARRGGBB__:
- __#RRGGBB__:
- __rgb()__:
- __rgba()__:
`js
window.FoxitPdf.setTabItemSelectedColor("#ff0000", "#00ff00");
`
$3
> window.FoxitPdf.setAutoSaveDoc(enable);
Sets whether the document should be automatically saved.
NOTE：It should be called before opening document.
- __enable__: true to enable auto-save, false to disable it.
`js
window.FoxitPdf.setAutoSaveDoc(true);
`
$3
> Form.getAllFormFields();
Return: An array of dictionaries will be returned, which contains all the form fields in the document, each field is represented as a dictionary, the following are the key/value pairs for the dictionary. Please refer to Foxit PDF SDK for iOS / Foxit PDF SDK for Android for more detail information about parameters such as fieldType, fieldFlag.... (Use keyword "Field" to search)
- __alignment__: Alignment is a property for variable text and it is only useful for text field and list box,which may contain variable text as their content.
- __alternateName__: An alternate field name to be used in place of the actual field name wherever the field must be identified in the user interface (such as in error or status messages referring to the field).
- __defValue__: The default value of form field.
- __value__: The value of form field.
- __fieldFlag__: Field flags specifies various characteristics of a form field.
- __fieldIndex__: The index of form field in the document.
- __fieldType__: The Form field type, 0 for Unknown, 1 for PushButton, 2 for CheckBox, 3 for RadioButton, 4 for ComboBox, 5 for ListBox, 6 for TextField, 7 for Signature...
- __mappingName__: The mapping name is to be used when exporting interactive form field data from the document.
- __maxLength__: The maximum length of the field's text, in characters.
- __name__: Get field name.
- __topVisibleIndex__: Get top index of option for scrollable list boxes.
- __choiceOptions__: Get the options array of list box or combo box. Return an array of dictionaries, which key/value pairs for the dictionary are:
- __defaultSelected__:Used to indicate whether the option would be selected by default or not.
- __optionLabel__ : The displayed string value for the option.
- __optionValue__ : The option string value.
- __selected__ : Used to indicate whether the option is selected or not.
- __defaultAppearance__: An dictionary will be returned, The following are the key/value pairs for the dictionary.
- __flags__:Flags to indicate which properties of default appearance are meaningful.Please refer to values starting from @link DefaultAppearance::e_FlagFont @endlink and this can be one or a combination of these values.
- __textColor__:Text color for default appearance. Format: 0xRRGGBB.
- __textSize__: Font size for default appearance. Please ensure this is above 0 when parameter flags includes @link DefaultAppearance::e_FlagFontSize @endlink.
$3
> Form.getForm();
Return: An dictionary will be returned, which contains the form related info. The following are the key/value pairs for the dictionary.
- __alignment__: Get the alignment value which is used as document-wide default value. Left alignment:0, Center alignment:1, Right alignment:2
- __needConstructAppearances__: Check whether to construct appearance when loading form controls.
- __defaultAppearance__: Return an dictionary, which key/value pairs for the dictionary are the following: (Please refer to Foxit PDF SDK for iOS / Foxit PDF SDK for Android for more details.)
- __flags__: Flags to indicate which properties of default appearance are meaningful.
- __textSize__: Font size for default appearance. Please ensure this is above 0 when parameter flags includes @link DefaultAppearance::e_FlagFontSize @endlink.
- __textColor__: Text color for default appearance. Format: 0xRRGGBB.
$3
> Form.updateForm(formInfo);
Parameters:The parameter for this API is a dictionary, and following are the key/value pairs for the dictionary.
- __alignment__: Get the alignment value which is used as document-wide default value, it's only valid for text field and list box. Left alignment:0, Center alignment:1, Right alignment:2
- __needConstructAppearances__: Check whether to construct appearance when loading form controls.
- __defaultAppearance__: Return an dictionary, which key/value pairs for the dictionary are the following: (Please refer to Foxit PDF SDK for iOS / Foxit PDF SDK for Android for more details.)
- __flags__: Flags to indicate which properties of default appearance are meaningful.
- __textSize__: Font size for default appearance. Please ensure this is above 0 when parameter flags includes @link DefaultAppearance::e_FlagFontSize @endlink.
- __textColor__: Text color for default appearance. Format: 0xRRGGBB.
$3
> Form.validateFieldName(fieldType,fieldName);
Parameters:
- __fieldType__: Field type, for which the input field name will be validated. 0 for Unknown, 1 for PushButton, 2 for CheckBox, 3 for RadioButton, 4 for ComboBox, 5 for ListBox, 6 for TextField, 7 for Signature...
- __fieldName__: A string value. It should not be an empty string.
Return: true means the input field name is valid for the specified field type, false means not.
$3
> Form.renameField(fieldIndex,newFieldName);
Parameters:
- __fieldIndex__: The index of form field in the document.
- __newFieldName__: A new field name. It should not be an empty string.
Return: true means success, while false means failure.
$3
> Form.removeField(fieldIndex);
Parameters:
- __fieldIndex__: The index of form field in the document.
$3
> Form.reset();
Reset data of all fields (except signature fields) to their default value.
Return true means success, while false means failure.
$3
> Form.exportToXML(filePath);
Export the form data to an XML file.
Parameters:
- __filePath__: The xml file path.
Return true means success, while false means failure.
$3
> Form.importFromXML(filePath);
Import the form data from an XML file.
Parameters:
- __filePath__: The xml file path.
Return true means success, while false means failure.
$3
> Form.getPageControls(pageIndex);
Parameters:
- __pageIndex__: The page index, which start from 0 for the first page.
Return: An array of dictionaries will be returned, each dictionary contains the form related info. The following are the key/value pairs for the dictionary.
- __controlIndex__: The index of current form control among all the controls of the specified page.
- __exportValue__: export mapping name when related form field is check box or radio button.
- __isChecked__: Check if the current form control is checked when related form field is check box or radio button.
- __isDefaultChecked__: Check if the current form control is checked by default when related form field is check box or radio button.
$3
> Form.removeControl(pageIndex, controlIndex);
Parameters:
- __pageIndex__: The page index, which start from 0 for the first page.
- __controlIndex__: The index of current form control among all the controls of the specified page.
$3
> Form.addControl(pageIndex,fieldName,fieldType,rect);
Parameters:
- __pageIndex__: The page index, which start from 0 for the first page.
- __fieldName__: The name of the form field.
- __fieldType__: The type of the form field. 0 for Unknown, 1 for PushButton, 2 for CheckBox, 3 for RadioButton, 4 for ComboBox, 5 for ListBox, 6 for TextField, 7 for Signature...
- __rect__: Rectangle of the new form control which specifies the position in PDF page.It should be in [PDF coordinate system]
Return: An dictionary will be returned, which contains the form related info. The following are the key/value pairs for the dictionary.
- __controlIndex__: The index of current form control among all the controls of the specified page.
- __exportValue__: export mapping name when related form field is check box or radio button.
- __isChecked__: Check if the current form control is checked when related form field is check box or radio button.
- __isDefaultChecked__: Check if the current form control is checked by default when related form field is check box or radio button.
$3
> Form.updateControl(pageIndex,controlIndex, control);
This API is only valid for field type of checkbox and radiobutton.
Parameters:
- __pageIndex__: The page index, which start from 0 for the first page.
- __controlIndex__: The index of current form control among all the controls of the specified page.
- __control__: An dictionary contains the control info. The following are the key/value pairs for the dictionary.
- __exportValue__: export mapping name when related form field is check box or radio button.
- __isChecked__: Check if the current form control is checked when related form field is check box or radio button.
- __isDefaultChecked__: Check if the current form control is checked by default when related form field is check box or radio button.
$3
> Form.getFieldByControl(pageIndex,controlIndex);
Parameters:
- __pageIndex__: The page index, which start from 0 for the first page.
- __controlIndex__: The index of current form control among all the controls of the specified page.
Return: Please refer to the return info of Form.getAllFormFields
$3
> Field.updateField(fieldIndex,field);
Parameters:
- __fieldIndex__: The index of form field in the document.
- __field__: Please refer to the return info of Form.getAllFormFields
$3
> Field.reset(fieldIndex);
Parameters:
- __fieldIndex__: The index of form field in the document.
$3
> Field.getFieldControls(fieldIndex);
Parameters:
- __fieldIndex__: The index of form field in the document.
Return: An array of dictionaries will be returned, each dictionary contains the form related info. The following are the key/value pairs for the dictionary.
- __controlIndex__: The index of current form control among all the controls of the specified field.
- __exportValue__: export mapping name when related form field is check box or radio button.
- __isChecked__: Check if the current form control is checked when related form field is check box or radio button.
- __isDefaultChecked__: Check if the current form control is checked by default when related form field is check box or radio button.
$3
> ScanPdf.initializeScanner(serial1,serial2);
Initialize the scan module with additional parameters.
This function must be called before any App Framework SDK object can be instantiated.
Successful initialization of the SDK requires a valid serial number.
- __serial1__: First part of the serial number.
- __serial2__: Second part of the serial number.
$3
> ScanPdf.initializeCompression(serial1,serial2);
Initialize the Mobile Compression SDK.
- __serial1__: First part of the serial number.
- __serial2__: Second part of the serial number.
$3
> ScanPdf.createScanner();
Show scan file list
Note: The scan list can only be create if the initializeScanner & initializeCompression successful.
$3
> ScanPdf.addEventListener(eventname,callback);
- __eventname__: The name of the event to listen for _(String)_
- __onDocumentAdded__: This event fires when the scan doc added successed.
- __callback__: This function is executed when the event fires. The function is passed an object as a parameter.
Add a listener for an event
`javascript
ScanPdf.addEventListener('onDocumentAdded',function(data){
console.log('onDocumentAdded callback ',data);
var errorCode = data.error;
if(errorCode == 0){
var filePath = data.info;
window.FoxitPdf.openDocument(filePath, null);
}
});
`
YOUTUBE
iOS Screen Shot
Android Screen Shot
Supported Platforms
- iOS
- Android
iOS Quicks
1. The first argument in the preview method currently only supports absolute paths for incoming files.
You can obtain the absolute path to the file using the method provided by the [cordova-plugin-file] (https://github.com/apache/cordova-plugin-file) plugin.
Use the following command to add the [cordova-plugin-file] (https://github.com/apache/cordova-plugin-file) plugin to your project
`bash
cordova plugin add cordova-plugin-file
`
2. Note: in some cases the resource folders are not added correctly and the number of items is the same because of XCode bug.（e.g. Xcode 8.3.3）
In that case, remove the added reference from the project tree and add the Resource using the project tree - Add files to "YourProjectName". Remember to enable the option of "copy items if needed" and "create groups" when using this method.
If an error similar to the one in the following picture appears, try the method in step 2
Quick Example
A PDF file needs to be placed in the project beforehand. The location is in the project root by default
`javascript
var filePathSaveTo = cordova.file.documentsDirectory + 'getting_started_ios_2.pdf'
window.FoxitPdf.setSavePath(filePathSaveTo);
var filePath cordova.file.applicationDirectory + 'getting_started_ios.pdf';
window.FoxitPdf.openDocument(filePath,'');
window.FoxitPdf.addEventListener('onDocOpened',function(data){
console.log('onDocOpened callback ',data);
console.log('onDocOpened callback info',data.info);
if (data.error == 0){
var data_type = 0x0002;
window.FoxitPdf.importFromFDF(cordova.file.documentsDirectory + 'Annot_all.fdf',data_type, [[0, 1]]);
}
});
``