Nativescript-PDFView-Ng

这是一个使用本地库的简单 PDF 查看器插件。

• iOS：PdfKit (https://developer.apple.com/documentation/pdfkit)
• Android：AndroidPdfViewer (https://github.com/barteksc/AndroidPdfViewer)

插件版本 2.0.0+ 与 Nativescript 7 兼容并经过测试，对于旧版本的 NS，请使用之前的插件版本。

安装

tns plugin add nativescript-pdfview-ng

或者

将 tgz 文件复制到您的项目中，并在 package.json 中引用它

使用方法

只需将其添加到您的页面中

<Page xmlns="http://schemas.nativescript.org/tns.xsd" class="page"
xmlns:ui="nativescript-pdfview-ng">
    <ui:PDFViewNg src="~/mypdf.pdf" defaultpage="1"></ui:PDFViewNg>
</Page>

或者

import { PDFViewNg } from 'nativescript-pdfview-ng';
import { registerElement } from 'nativescript-angular';
registerElement('PDFViewNg', () => PDFViewNg);

<Page xmlns="http://schemas.nativescript.org/tns.xsd" class="page">
    <PDFViewNg src="~/mypdf.pdf" defaultpage="1"></PDFViewNg>
</Page>

API

XML

类

/// Go to page by id starting from 0 as first page.
goToPage(index: number) : void;

/// Go to first page.
goToFirstPage() : void;

/// Go to last page.
goToLastPage() : void;

/// Get a list of all bookmarks in the pdf.
getBookmarks(): Bookmark[];

/// Search for bookmark that is exactly at the given position in the tree structure
/// e.g.: [1,3] would mean to first get the second root bookmark (0 based index) and
/// then get its fourth child if it exists
getBookmarkByIndexPath(indexes: number[]): Bookmark;

/// Search for all bookmarks that have the given label.
getBookmarksByLabel(label: string): BookmarkCommon[];

/// Jump to a given bookmark.
goToBookmark(bookmark: Bookmark): void;

/// Get meta information author from PDF.
getAuthor(): string;

/// Get meta information subject from PDF.
getSubject(): string;

/// Get meta information title from PDF.
getTitle(): string;

/// Get meta information creator from PDF.
getCreator(): string;

/// Get meta information creator from PDF.
getCreationDate(): string;

/// Get page count of currently loaded pdf
getPageCount(): number;

/// Load pdf from code.
/// Replaces the currently loaded pdf.
/// The promise gets resolved after loading, or rejected if something failed.
loadPDF(src: string): Promise<any>;

/// only implemented for iOS
/// Detect available programs for file extension and opens the interaction controller
/// The source should contain accessible path for the application
showExternalControler(src: string, rect: ControllerRect): void;

示例

defaultpage: 跳转到页面 4

<ui:PDFViewNg src="~/test.pdf" defaultpage="3"></ui:PDFViewNg>

bookmarklabel: 跳转到标签为 "PAGE 3" 的标签

<ui:PDFViewNg src="~/test.pdf" bookmarklabel="PAGE 3"></ui:PDFViewNg>

bookmarkpath: 跳转到第三个标签的第一个子标签（标签具有树状结构）

<ui:PDFViewNg src="~/test.pdf" bookmarkpath="2,0"></ui:PDFViewNg>

跳转到标签为 "PAGE 4" 的第一个找到的标签

<ui:PDFViewNg src="~/test.pdf" id="pdfview"></ui:PDFViewNg>

let view:PDFViewNg = page.getViewById('pdfview');
if (view){
    view.on("load",()=>{
        let items = view.getBookmarksByLabel("PAGE 4");
        console.log("found:",items);
        view.goToBookmark(items[0]);
    });
    view.on("error",()=>{
        console.error("unable to load pdf");
    });
}

使用 promises 进行动态加载，只需在 xml 中使用空的 src 标签即可

<ui:PDFViewNg id="pdfview"></ui:PDFViewNg>

let view:PDFViewNg = page.getViewById('pdfview');
if (view){
    view.loadPDF('~/test.pdf').then(()=>{
        let items = view.getBookmarksByLabel("PAGE 4");
        console.log("found:",items);
        view.goToBookmark(items[0]);
    }).catch((err)=>{
        console.error("could not load pdf: ", err);
    })
}

按钮点击时显示控制器

<ui:PDFViewNg id="pdfview"></ui:PDFViewNg>
<button text="Open external" tap="onButtonTap"></button>

let view:PDFViewNg = page.getViewById('pdfview');

function onButtonTap(args: EventData) {
  const button = <Button>args.object;
  const size = button.getActualSize();
  const position = button.getLocationOnScreen();
  const rect = {
    x: position.x,
    y: position.y,
    width: size.width,
    height: size.height
  };
  view.showExternalControler(rect);

已知问题

• Android 不支持直接跳转到标签。它只能跳转到标签所在的页面。

许可证

https://choosealicense.com/licenses/mit/