NativeScript-Appic-PdfView

这是一个使用原生库的简单 PDF 阅读器插件。

• Android: AndroidPdfViewer (https://github.com/appiclogics/AndroidPdfViewer)

安装

tns plugin add nativescript-appic-pdfview

或者

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

用法

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

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

或者

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

<Page xmlns="http://schemas.nativescript.org/tns.xsd" class="page">
    <AppicPdfView src="~/mypdf.pdf" defaultpage="1"></AppicPdfView>
</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:AppicPdfView src="~/test.pdf" defaultpage="3"></ui:AppicPdfView>

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

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

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

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

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

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

let view:AppicPdfView = 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");
    });
}

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

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

let view:AppicPdfView = 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:AppicPdfView id="pdfview"></ui:AppicPdfView>
<button text="Open external" tap="onButtonTap"></button>

let view:AppicPdfView = 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/

致谢

https://market.nativescript.cn/plugins/nativescript-pdfview-ng