Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

A full-featured PDF SDK for React Native that lets you quickly add PDF viewing, editing, and annotation to Android and iOS apps.

License

NotificationsYou must be signed in to change notification settings

ComPDFKit/compdfkit-pdf-sdk-react-native

Repository files navigation

About

ComPDFKit for React Native, developed byComPDF, enables developers to quickly and seamlessly integrate advanced PDF features, such as viewing, annotating, editing, and signing PDFs, into any iOS and Android application. And we provide a 30-day free trial license to test your projects

For more information, please visit ourdeveloper guides.

Contents

Prerequisites

Before starting the integration, please ensure the following prerequisites are met:

Get ComPDFKit License Key

ComPDF offers a30-day free trial license for testing your project. Get one online without contacting sales.

If you require advanced PDF features beyond the free trial license, pleasecontact us to obtain a commercial license.

Download the PDF SDK

Download the ComPDFKit ReactNative PDF SDK fromGithub orNPM.

System Requirements

Android

Please install the following required packages:

Operating Environment Requirements:

  • Android minSdkVersion of 21 or higher.
  • ComPDFKit SDK 2.0.1 or higher.

iOS

Please install the following required packages:

Operating Environment Requirements:

  • ComPDFKit SDK 2.0.1 or higher.
  • React Native dependency to version 3.0.0 or higher.
  • iOS 12.0 or higher.

Build a React Native PDF Viewer with ComPDFKit PDF SDK

image

Creating a New Project

Let's create a simple app that integrates ComPDFKit for React Native.

  1. In the terminal app, change the current working directory to the location you wish to save your project. In this example, we’ll use the~/Documents/ directory:

    cd~/Documents

  2. Create the React Native project by running the following command:

    react-native init MyApp

  3. In the terminal app, change the location of the current working directory inside the newly created project:

    cd MyApp

Expo

If you’re using Expo, refer to the guides post that explainshow to use ComPDFKit ReactNative SDK with Expo.

Installing-the-ComPDFKit-Dependency

You can integrate the SDK in two ways:

  • ThroughComPDFKit GitHub repo:

    InMyApp folder, install@compdfkit_pdf_sdk/react_native by calling:

    yarn add github:ComPDFKit/compdfkit-pdf-sdk-react-native

  • ThroughComPDFKit npm package:

    InMyApp folder, install run the following commands:

    yarn add @compdfkit_pdf_sdk/react_native

Android

  1. openandroid/app/src/main/AndroidManifest.xml , addInternet Permission andStorage Permission：
<manifest xmlns:android="http://schemas.android.com/apk/res/android"    package="com.compdfkit.flutter.example">+    <uses-permission android:name="android.permission.INTERNET"/>    <!-- Required to read and write documents from device storage -->+    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>+    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/><!-- Optional settings -->+    <uses-permission android:name="android.permission.MANAGE_EXTERNAL_STORAGE" />    <application+    android:requestLegacyExternalStorage="true"        ...>...    </application></manifest>
  1. Copy the sample pdf file to theassets directory

demo-android-2

  1. ReplaceApp.js (orApp.tsx) with what is shown forUsage-Example
  2. Finally in the root project directory, runreact-native run-android.

iOS

  1. Open your project’s Podfile in a text editor:
open ios/Podfile
  1. Add the following line to thetarget 'MyApp' do ... end block:
target 'MyApp' do    # ...+  pod "ComPDFKit", podspec:'https://file.compdf.com/cocoapods/ios/compdfkit_pdf_sdk/2.5.1/ComPDFKit.podspec'+  pod "ComPDFKit_Tools", podspec:'https://file.compdf.com/cocoapods/ios/compdfkit_pdf_sdk/2.5.1/ComPDFKit_Tools.podspec'    # ...end

Note: If SSL network requests fail to download theComPDFKit library when you runpod install, you can use the following method instead.

target 'MyApp' do    # ...+  pod 'ComPDFKit', :git => 'https://github.com/ComPDFKit/compdfkit-pdf-sdk-ios-swift.git', :tag => '2.5.1'+  pod 'ComPDFKit_Tools', :git => 'https://github.com/ComPDFKit/compdfkit-pdf-sdk-ios-swift.git', :tag => '2.5.1'    # ...end

  1. In theios folder, runpod install.

  2. Open your project’s Workspace in Xcode:

    open ios/MyApp.xcworkspace

    Make sure the deployment target is set to 12.0 or higher:

    1-1

  3. Add the PDF document you want to display to your application by dragging it into your project. On the dialog that’s displayed, select Finish to accept the default integration options. You can use"PDF_Document.pdf" as an example.

<key>NSCameraUsageDescription</key><string>Your consent is required before you could access the function.</string><key>NSMicrophoneUsageDescription</key><string>Your consent is required before you could access the function.</string><key>NSPhotoLibraryAddUsageDescription</key><string>Your consent is required before you could access the function.</string><key>NSPhotoLibraryUsageDescription</key><string>Your consent is required before you could access the function.</string><key>NSAppTransportSecurity</key><dict><key>NSAllowsArbitraryLoads</key><true/></dict>
  1. ReplaceApp.js (orApp.tsx) with what is shown forUsage-Example
  2. Finally in the root project directory, runreact-native run-ios.

Apply the License Key

If you haven't get a license key, please check outhow to obtain a license key.

ComPDFKit PDF SDK currently supports two authentication methods to verify license keys: online authentication and offline authentication.

Learn about:

What is the authentication mechanism of ComPDFKit's license?

What are the differences between Online Authentication and Offline Authentication?

Accurately obtaining the license key is crucial for the application of the license.

Android

  1. In the email you received, locate theXML file containing the license key.
  2. Copy thelicense_key_rn.xml file into the following directory:android/app/src/main/assets/

  1. Initialize the SDK:
ComPDFKit.initWithPath('assets://license_key_rn.xml');

iOS

  1. Use Xcode to copy thelicense_key_rn.xmlfile into your project’s ios/directory.

  1. Initialize the SDK:
// Copy the license_key_rn_ios.xml file into your iOS project directory (or a readable location):ComPDFKit.initWithPath('license_key_rn.xml');

Alternative Method

You can also store the License file in the device’s local storage and initialize the SDK using its file path:

// Obtain the License file through the local storage path of the device for initializationComPDFKit.initWithPath('/data/data/0/your_packages/files/license_key_rn.xml');

Usage-Example

After installing from NPM or GitHub, replaceApp.tsx with the following code.

Make sure to follow the above steps to copy the sample document into your Android or iOS project.

Here is the sample code forApp.tsx:

/** * Copyright © 2014-2025 PDF Technologies, Inc. All Rights Reserved. * * THIS SOURCE CODE AND ANY ACCOMPANYING DOCUMENTATION ARE PROTECTED BY INTERNATIONAL COPYRIGHT LAW * AND MAY NOT BE RESOLD OR REDISTRIBUTED. USAGE IS BOUND TO THE ComPDFKit LICENSE AGREEMENT. * UNAUTHORIZED REPRODUCTION OR DISTRIBUTION IS SUBJECT TO CIVIL AND CRIMINAL PENALTIES. * This notice may not be removed from this file. */importReact,{Component}from'react';import{SafeAreaView}from'react-native';import{ComPDFKit,CPDFReaderView}from'@compdfkit_pdf_sdk/react_native';import{Platform}from'react-native';typeProps={};exportdefaultclassAppextendsComponent<Props>{state={versionCode:''}constructor(props:Props){super(props)this.initialize()this.getVersionCode()}asyncgetVersionCode(){// Get the version code of ComPDFKit SDKvarversion=awaitComPDFKit.getVersionCode()this.setState({versionCode:version})}asyncinitialize(){// use license filevarresult=awaitComPDFKit.initWithPath(Platform.OS=="android" ?"assets://license_key_rn.xml" :"license_key_rn.xml")console.log("ComPDFKitRN","init_:",result)}/**     * Open the sample document embedded in Android or iOS project.     */openSample(){varsamplePDF:string=Platform.OS=='android' ?'file:///android_asset/PDF_Document.pdf' :'PDF_Document.pdf'// We provide default UI and PDF property related configurations here, you can modify configuration options according to your needs.varconfig=ComPDFKit.getDefaultConfig({})ComPDFKit.openDocument(samplePDF,'',config)}samplePDF=Platform.OS==='android'  ?'file:///android_asset/PDF_Document.pdf'  :'PDF_Document.pdf';constonPageChanged=(pageIndex :number)=>{// console.log('ComPDFKitRN --- onPageChanged:', pageIndex);}constsaveDocument=()=>{console.log('ComPDFKitRN saveDocument');}render(){return(<SafeAreaViewstyle={{flex:1}}><CPDFReaderViewdocument={this.samplePDF}onPageChanged={onPageChanged}saveDocument={saveDocument}configuration={ComPDFKit.getDefaultConfig({})}style={{flex:1}}/></SafeAreaView>);}}
  • (Android) For local storage file path:
document='/storage/emulated/0/Download/PDF_document.pdf'
  • (Android) For content Uri:
document='content://...'
  • (Android) For assets path:
document="file:///android_asset/..."
  • (iOS) For app bundle file path:
document="document.pdf"
  • (iOS) for URL path:
document="file://xxxx/document.pdf"

Configuration

When rendering a PDF view using theComPDFKit.openDocument method or theCPDFReaderView UI component , you have the flexibility to enable or disable certain features or adjust default attribute values for PDF annotations, forms, and more through theCPDFConfiguration settings.

For your convenience, you can obtain default attribute values by using theComPDFKit.getDefaultConfig({}) method.

The following example demonstrates the configuration settings for some aspects. For more detailed configuration options, refer toCONFIGURATION for further information.

  1. Set the initial display mode and the list of available modes. The following code shows enabling only the viewer mode and annotations mode:
import{ComPDFKit,CPDFViewMode}from'@compdfkit_pdf_sdk/react_native';varconfig=ComPDFKit.getDefaultConfig({modeConfig:{initialViewMode:CPDFViewMode.VIEWER,availableViewModes:[CPDFViewMode.VIEWER,CPDFViewMode.ANNOTATIONS]}})// Use in Modal ViewComPDFKit.openDocument(samplePDF,'',config)// Use in UI components<CPDFReaderViewdocument={this.samplePDF}configuration={config}style={{flex:1}}/>
  1. Set the list of enabled annotation types and default annotation attribute values. For example, enable only highlight annotations and set the color and transparency for highlight annotations:
import{ComPDFKit,CPDFAnnotationType,CPDFConfigTool}from'@compdfkit_pdf_sdk/react_native';varconfig=ComPDFKit.getDefaultConfig({annotationsConfig:{availableType:[CPDFAnnotationType.NOTE],availableTools:[CPDFConfigTool.SETTING,CPDFConfigTool.UNDO,CPDFConfigTool.REDO,],initAttribute:{note:{color:'#1460F3',alpha:255}}}})// Use in Modal ViewComPDFKit.openDocument(samplePDF,'',config)// Use in UI components<CPDFReaderViewdocument={this.samplePDF}configuration={config}style={{flex:1}}/>
  1. Set the display mode and page flipping direction:
import{ComPDFKit,CPDFDisplayMode}from'@compdfkit_pdf_sdk/react_native';varconfig=ComPDFKit.getDefaultConfig({readerViewConfig:{displayMode:CPDFDisplayMode.DOUBLE_PAGE,verticalMode:false}})// Use in Modal ViewComPDFKit.openDocument(samplePDF,'',config)// Use in UI components<CPDFReaderViewdocument={this.samplePDF}configuration={config}style={{flex:1}}/>

API

APIs are available on theAPI

Support

ComPDFKit has a professional R&D team that produces comprehensive technical documentation and guides to help developers. Also, you can get an immediate response when reporting your problems to our support team.

  • For detailed information, please visit ourGuides page.
  • Stay updated with the latest improvements through ourChangelog.
  • For technical assistance, please reach out to ourTechnical Support.
  • To get more details and an accurate quote, please contact ourSales Team.

Thanks for readingTheComPDF Team

About

A full-featured PDF SDK for React Native that lets you quickly add PDF viewing, editing, and annotation to Android and iOS apps.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors2

  •  
  •  
[8]ページ先頭
©2009-2025 Movatter.jp