Một thành phần Xem PDF Hiện đại và Linh hoạt cho React Native

react-native-view-pdf

Thư viện để hiển thị PDF documents trong react-native

• android – sử dụng Android PdfViewer. Mục tiêu minSdkVersion 21 (yêu cầu bởi setClipToOutline) trở lên. Theo mặc định, phiên bản ổn định 2.8.2 được sử dụng. Cũng có thể ghi đè và sử dụng 3.1.0-beta.1 (phiên bản này cho phép xử lý liên kết, vv. và sẽ được sử dụng khi phiên bản ổn định của Android PdfViewer được phát hành). Để thay đổi phiên bản, xác định nó trong tệp build của bạn:

  buildscript {
  ext {
  …
  pdfViewerVersion = “3.1.0-beta.1”
  }
  …
  }

Barteksc PdfViewer sử dụng JCenter, nó nên được read-only indefinitely, nhưng trong trường hợp dự án host không sử dụng nó, có khả năng sử dụng mhiew/AndroidPdfViewer là một nhánh được xuất bản trên mavenCentral. Để sử dụng nó, xác định cấu hình sau trong tập lệnh gradle của bạn:

buildscript {
 ext {
   ...
   pdfViewerVersion = "3.2.0-beta.1"
   pdfViewerRepo = "com.github.mhiew"
 }
 ...
}

ios – sử dụng WKWebView. Mục tiêu iOS 9.0 và cao hơn

Không có phụ thuộc NPM

Bắt đầu

$ npm install react-native-view-pdf --save

Liên kết

Từ RN 0.60 không cần phải liên kết – Native Modules are now Autolinked

Cài đặt tự động phần lớn

$ react-native link

Nếu nó không hoạt động, làm theo official react native documentation

Sử dụng CocoaPods

Trong thư mục dự án Xcode của bạn, mở tệp Podfile và thêm dòng sau:

pod 'RNPDF', :path => '../node_modules/react-native-view-pdf'

Và cài đặt:

pod install

Android

. Mở tệp android/app/src/main/java/[...]/MainApplication.java

• Thêm import com.rumax.reactnative.pdfviewer.PDFViewPackage; vào các lệnh nhập ở đầu tệp
• Thêm new PDFViewPackage() vào danh sách được trả về bởi phương thức getPackages()

. Thêm các dòng sau vào khối phụ thuộc trong android/app/build.gradle:

include ':react-native-view-pdf'
project(':react-native-view-pdf').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-view-pdf/android')

. Chèn các dòng sau vào khối phụ thuộc trong android/app/build.gradle:

compile project(':react-native-view-pdf')

Lưu ý cho Android

Dự án Android cố gắng truy xuất các thuộc tính sau:

• compileSdkVersion
• buildToolsVersion
• minSdkVersion
• targetSdkVersion

từ đối tượng ext nếu bạn đã định nghĩa một trong dự án Android của bạn (bạn có thể đọc thêm về nó tại here). Nếu không, nó sẽ trở lại phiên bản hiện tại của nó (kiểm tra the gradle file để biết thông tin bổ sung).

Windows

ReactWindows

Không có

Demo

Android	iOS

Bắt đầu nhanh

// With Flow type annotations (https://flow.org/)
import PDFView from 'react-native-view-pdf';
// Without Flow type annotations
// import PDFView from 'react-native-view-pdf/lib/index';

const resources = {
  file: Platform.OS === 'ios' ? 'downloadedDocument.pdf' : '/sdcard/Download/downloadedDocument.pdf',
  url: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
  base64: 'JVBERi0xLjMKJcfs...',
};

export default class App extends React.Component {
  render() {
    const resourceType = 'url';

    return (
      <View style={{ flex: 1 }}>
        {/* Some Controls to change PDF resource */}
        <PDFView
          fadeInDuration={250.0}
          style={{ flex: 1 }}
          resource={resources[resourceType]}
          resourceType={resourceType}
          onLoad={() => console.log(`PDF rendered from ${resourceType}`)}
          onError={(error) => console.log('Cannot render PDF', error)}
        />
      </View>
    );
  }
}

Sử dụng dự án demo để:

• Kiểm tra thành phần trên cả android và iOS
• Hiển thị PDF bằng cách sử dụng URL, dữ liệu BASE64 hoặc tệp cục bộ
• Xử lý trạng thái lỗi

Thuộc tính

Phương thức

reload

Cho phép tải lại tài liệu PDF. Điều này có thể hữu ích trong các trường hợp như sự cố mạng, tài liệu đã hết hạn, v.v. Để tải lại tài liệu, bạn sẽ cần một ref đến thành phần:

...

render() {
  return (
    <PDFView
      ...
      ref={(ref) => this._pdfRed = ref} />
  );
}

Và kích hoạt nó bằng cách gọi reloadPDF:

reloadPDF = async () => {
  const pdfRef = this._pdfRef;

  if (!pdfRef) {
    return;
  }

  try {
    await pdfRef.reload();
  } catch (err) {
    console.err(err.message);
  }
}

Hoặc kiểm tra demo project cũng bao gồm chức năng này.

Mẹo phát triển

Trên Android, đối với loại file, cần yêu cầu quyền đọc/ghi. Bạn có thể tìm hiểu thêm thông tin trong phần PermissionsAndroid từ react native hoặc Request App Permissions từ tài liệu Android. Dự án Demo cung cấp ví dụ về cách thực hiện nó bằng Java, kiểm tra các tệp MainActivity.java và AndroidManifest.xml.

Trước khi thử loại file trong demo project, hãy mở thư mục sdcard/Download trong Trình duyệt tệp Thiết bị và lưu một số tài liệu downloadedDocument.pdf bạn muốn hiển thị.

Trên iOS, khi sử dụng tài nguyên file, bạn có thể chỉ định nơi tìm kiếm tệp với fileFrom. Nếu bạn không truyền bất kỳ giá trị nào, thành phần sẽ tìm kiếm ở hai nơi. Trước hết, nó sẽ cố gắng tìm tệp trong Bundle. Nếu không tìm thấy ở đó, nó sẽ tìm kiếm trong thư mục Documents. Để biết thêm thông tin về quyền truy cập hệ thống tệp iOS trong thời gian chạy ứng dụng, vui lòng tham khảo the official documentation. Lưu ý rằng tài nguyên luôn cần phải là đường dẫn tương đối từ thư mục Documents, ví dụ, và ĐỪNG đặt kế hoạch vào đường dẫn (ví dụ, không có file://.....).

Bạn có thể tìm thấy ví dụ về cả hai cách sử dụng Bundle và thư mục Documents để hiển thị một tệp PDF từ file trên iOS trong dự án thử nghiệm.

Trong dự án demo, bạn cũng có thể chạy máy chủ đơn giản để phục vụ tệp PDF. Để làm điều này, điều hướng đến demo/utils/ và bắt đầu máy chủ node server.js. ( Đừng quên thiết lập địa chỉ IP chính xác của máy chủ trong _demo/App.js_)

Giấy phép

MIT

Tác giả

• sanderfrenken
• rumax

Thông tin khác

• Được tạo ra với react-native-create-library
• Không có phụ thuộc JavaScript. Điều này có nghĩa là bạn không cần đưa các phụ thuộc khác vào dự án của bạn
• Nếu bạn nghĩ rằng có điều gì đó thiếu hoặc muốn đề xuất tính năng mới, hãy thảo luận với tác giả
• Xin vui lòng ⭐️ dự án này. Điều này cho chúng tôi biết rằng bạn thích nó và chúng tôi đã làm một công việc tuyệt vời khi xuất bản và hỗ trợ nó 🤩
• If you are using ProGuard, add following rule to proguard config file:

  -keep class com.shockwave.**
  

Chi tiết tải về:

Tác giả: rumax
Nguồn: https://github.com/rumax/react-native-PDFView

Giấy phép: MIT license