@embedpdf/vue (英语)
Vue 3 组件和可堆放器,用于使用 EmbedPDF 构建自己的 PDF 查看器.
快开始
本指南构建一个小型 PDF 查看器: 页面、 文本人员可以选择、 缩放按钮、 a 高亮和保存按钮。 每个步骤都添加一个插件或一个控件,这样您就可以停止任何 台阶并有一个工作查看器.
1. 安装
你需要两个包:一个是框架,一个是引擎.
npm install @embedpdf/vue @embedpdf/engine
每个特性都是从框架包中单独导入的,例如 @embedpdf/vue/stage, (中文(简体) ),
所以,你不用的东西 从来没有达到你的捆绑.
2. 显示 PDF
一次创建引擎,然后把它给 <Viewer> 您想要的插件和文档
打开. <Stage> 显示页面,以及 <RenderLayer> 绘制每个 :
App.vue
<script setup lang="ts">
import { DocumentGate, Viewer } from '@embedpdf/vue/runtime';
import type { OpenInput } from '@embedpdf/vue/runtime';
import { Stage, stagePlugin } from '@embedpdf/vue/stage';
import { RenderLayer, renderPlugin } from '@embedpdf/vue/render';
import { localEngine } from '@embedpdf/engine';
// The engine is created synchronously and costs nothing until first use, so
// a module-level `const engine = …` is safe, even with server-side rendering.
// Only opening a document does real work: the UI renders at once.
const engine = localEngine();
const plugins = [stagePlugin(), renderPlugin()];
// 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()) };
};
</script>
<template>
<Viewer :engine="engine" :plugins="plugins" :initial-documents="[{ source: welcome }]">
<div style="height: 500px">
<!-- Document UI is defined over a document: gate it on having one. -->
<DocumentGate>
<template #fallback><p>Loading…</p></template>
<Stage style="height: 100%">
<template #page><RenderLayer /></template>
</Stage>
</DocumentGate>
</div>
</Viewer>
</template>
localEngine() 所以在模块顶部创建它很安全,甚至
带有服务器侧渲染。 浏览器在挂载时启动它: 在 Web Worker in
背景,第一页在文档打开后立即显示。 发动机的
WebAssembly 是您自网站创建和加载的一部分 设置。 。 。 .
<DocumentGate> 显示其 fallback 直到文档打开为止,所以舞台永远不会变成
没有一个.
每个插件
每个插件为一导入行 。 注册插件并导入其组件来自 同一个地方:
| 插件 | 它给你什么 | 从 |
|---|---|---|
| 阶段 | 滚动、缩放、布局、页面导航 | @embedpdf/vue/stage |
| 渲染器 | 每个缩放、深角瓦片的清晰页 | @embedpdf/vue/render |
| 链接 | 可点击的网页和网站链接 | @embedpdf/vue/link |
| 选择 | 选择和复制文本 | @embedpdf/vue/selection |
| 搜索 | 查找文本, 并显示每个匹配 | @embedpdf/vue/search |
| 说明 | 突出显示、注解、形状、自由文本和你自己的工具 | @embedpdf/vue/annotation |
| 邮票 | 邮票图书馆,通过点击或编码放置 | @embedpdf/vue/stamp |
| 计量 | 实际规模的距离、周边和地区 | @embedpdf/vue/measurement |
| 编辑 | 永远删除内容 | @embedpdf/vue/redaction |
| 表单 | 填充和建造PDF表格 | @embedpdf/vue/form |
| 签署 | 签署文件和检查签名 | @embedpdf/vue/signature |
| 页面编辑 | 旋转、重排、插入和删除页面 | @embedpdf/vue/page-edit |
| 元数据 | 文件的标题、作者和您自己的字段 | @embedpdf/vue/metadata |
| 字体 | 文档的字体可以写入, 绘制为引擎写入的字体 | @embedpdf/vue/fonts |
| 大纲 | 文档的大纲(其书签),用于显示、跟踪和编辑 | @embedpdf/vue/outline |
| 附录 | 包含 PDF 文件: 列出、保存、附加和删除 | @embedpdf/vue/attachment |
| 行动 | PDF 本身做什么:按钮、脚本、打印 | @embedpdf/vue/actions |
| 查看管理器 | 几个文件并存 | @embedpdf/vue/view-manager |
| 互动 | 活动工具、光标和触摸 | @embedpdf/vue/interaction |
| 图标 | 用标签、图标和快捷键命名动作 | @embedpdf/vue/commands |
| 贝壳 | 打开哪些面板、对话框和菜单 | @embedpdf/vue/shell |
| 翻译 | 您的用户语言UI | @embedpdf/vue/i18n |
文档
- 快开始: 一步一步地构建一个PDF取景器,其中包含文本选择,缩放按钮,亮点和保存按钮.
- 设置:服务器侧渲染,捆绑,字体,并亲自主持引擎.
- 如何运作:插件,你的用户界面如何与它们交谈,层层,以及哪个组件的谈话文件.
- 滚动、缩放和布局:布局,缩放模式,页面导航和触摸.
许可证
阿帕奇 - 2.0