@embedpdf/angular (英语)

用 EmbedPDF 构建自己的 PDF 查看器的角服务和组件 .

快开始

本指南构建一个小型 PDF 查看器: 页面、 文本人员可以选择、 缩放按钮、 a 高亮和保存按钮。 每个步骤都添加一个插件或一个控件,这样您就可以停止任何 台阶并有一个工作查看器.

1. 安装

你需要两个包:一个是框架,一个是引擎.

npm install @embedpdf/angular @embedpdf/engine

每个特性都是从框架包中单独导入的,例如 @embedpdf/angular/stage, (中文(简体) ), 所以,你不用的东西 从来没有达到你的捆绑.

2. 显示 PDF

一次创建引擎,然后把它给 provideEmbedPdf() 您想要的插件和文档 打开. <epdf-stage> 显示页面,以及 <epdf-render-layer> 绘制每个 :

basic.ts

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { EpdfDocumentGate, provideEmbedPdf } from '@embedpdf/angular/runtime';
import type { OpenInput } from '@embedpdf/angular/runtime';
import { EpdfPageTemplate, EpdfStage, withStage } from '@embedpdf/angular/stage';
import { EpdfRenderLayer, withRender } from '@embedpdf/angular/render';
import { localEngine } from '@embedpdf/engine';

// The local engine opens bytes: fetch lazily, under the loading tab.
const welcome = async (): Promise<OpenInput> => {
  const response = await fetch('https://www.embedpdf.com/pdfs/welcome.pdf');
  return { kind: 'bytes', id: 'welcome', bytes: new Uint8Array(await response.arrayBuffer()) };
};

// The component that provides the viewer renders it: the engine is created in the browser,
// and costs nothing until the first document opens, so the page renders at once.
@Component({
  selector: 'demo-root',
  imports: [EpdfDocumentGate, EpdfStage, EpdfPageTemplate, EpdfRenderLayer],
  providers: [
    provideEmbedPdf(
      { engine: () => localEngine(), initialDocuments: [{ source: welcome }] },
      withStage(),
      withRender(),
    ),
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div style="height: 500px">
      <!-- Document UI is defined over a document: gate it on having one. -->
      <epdf-stage *epdfDocumentGate="let document; fallback: loading" style="height: 100%">
        <ng-template epdfPage>
          <epdf-render-layer />
        </ng-template>
      </epdf-stage>
    </div>

    <ng-template #loading><p>Loading…</p></ng-template>
  `,
})
export class App {}

localEngine() 在它被使用之前,没有付出任何代价, 所以它的安全在你的组件,即使与 服务器侧渲染 。 浏览器在浏览器中开始: PDFium 靴子装入 Web Worker in the 背景,第一页显示文档打开后立即显示。 引擎的Web大会是 从您所在的站点开始的建筑和负载部分;见 设置。 。 。 .

*epdfDocumentGate 显示其 fallback 直到文档打开为止,所以舞台永远不会变成 没有一个.

每个插件

每个插件为一导入行 。 注册插件并导入其组件来自 同一个地方:

文档

• 快开始: 一步一步地构建一个PDF取景器,其中包含文本选择,缩放按钮,亮点和保存按钮.
• 设置:服务器侧渲染,捆绑,字体,并亲自主持引擎.
• 如何运作:插件,你的用户界面如何与它们交谈,层层,以及哪个组件的谈话文件.
• 滚动、缩放和布局:布局,缩放模式,页面导航和触摸.

许可证

阿帕奇 - 2.0