@grapecity-software/gcdocs.pdfviewer
Version:
GcDocs PDF Viewer
263 lines (220 loc) • 10.8 kB
Markdown
# GcDocs.PDF Viewer
一个随 [GcDocs.PDF](https://www.nuget.org/packages/GcDocs.Pdf) 一同提供的功能全面的JavaScript PDF查看器和编辑器。
[GcDocs PDF Viewer](https://www.grapecity.com.cn/developer/grapecitydocuments/pdf)是基于JavaScript的PDF查看器，在Web应用程序客户端读取和显示PDF文件。您还可以使用后端API编辑PDF文件。
该查看器可用作跨平台解决方案，以在Windows、MAC、Linux、iOS和Android设备上查看（或修改 - 请参阅下方的 _Support API_）PDF文档。
GcPdfViewer 提供了一个丰富的客户端JavaScript对象模型，详情请见 __docs/index.html__ 以获取客户端API文档。
产品亮点：
- 在所有现代浏览器中运行，包括 Edge、Chrome、FireFox、Opera、Safari
- 通过 _Support API_ 与服务器上的 _GcPdf_ 连接时，提供：
- 可定制且对移动设备友好的表单填写功能
- 实时协作模式
- 注释和表单编辑器
- 利用次级工具栏进行快速编辑
- PDF文本删除功能
- 签名验证
- 其他编辑特性
- 兼容React、Preact、Angular等框架
- 支持表单填写；填写的表单可以打印或提交表单数据至服务器
- 支持XFA（XML Forms Architecture）表单
- 提供文本选择/复制的光标，包括垂直和从右至左的文字
- 包含缩略图、文本搜索、大纲、附件、文章、图层和结构标签面板
- 允许从本地磁盘打开PDF文件
- 支持注释，包括文本、自由文本、富文本等
- 支持文本删除注释（包括外观流），允许用户隐藏或显示文本删除标记
- 支持声音注释
- 允许旋转及打印旋转后的文档
- 支持文章线程导航
- 完全支持文件附件（包括附件注释和文档级别的附件）
- 内置多种主题，可以添加新的自定义主题
- 支持外部CMaps
- ...还有更多功能。
## 如何安装
```sh
npm i @grapecity-software/gcdocs.pdfviewer
```
## 产品信息
请参阅下面的价格和许可证。
- [产品信息](https://www.grapecity.com.cn/developer/grapecitydocuments/pdf)
## 授权许可
GcDocs.PDFViewer 是一款商业授权产品，其与 GcDocs.PDF 一起进行授权和分发。请[访问此页面](https://www.grapecity.com.cn/developer/grapecitydocuments/pdf)了解 GcPDF 的详细信息。
## 获取更多帮助
GcDocs.PDFViewer 是作为 GcDocs.PDF 的一部分分发的。
您可以通过[GcDocs.PDF 公共论坛](https://gcdn.grapecity.com.cn/showforum-262-1.html)提出任何关于查看器的问题，或报告发现的错误。
## 使用查看器的更多细节
### 将查看器添加到HTML页面：
```HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Limit content scaling to ensure that the viewer zooms correctly on mobile devices: -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="theme-color" content="#000000" />
<title>Document Solutions PDF Viewer</title>
<script type="text/javascript" src="lib/gcpdfviewer.js"></script>
<script>
function loadPdfViewer(selector) {
var viewer = new GcPdfViewer(selector,
{
/* Specify options here */
renderInteractiveForms: true
});
// Skip the 'report list' panel:
// viewer.addReportListPanel();
viewer.addDefaultPanels();
// Optionally, open a PDF (will only work if this runs from a server):
viewer.open('HelloWorld.pdf');
// Change default viewer toolbar:
viewer.toolbarLayout.viewer.default = ['$navigation', '$split', 'text-selection', 'pan', '$zoom', '$fullscreen',
'save', 'print', 'rotate', 'view-mode', 'doc-title'];
viewer.applyToolbarLayout();
}
</script>
</head>
<body onload="loadPdfViewer('#root')">
<div id="root"></div>
</body>
</html>
```
### 如何授权：
在创建和初始化 GcPdfViewer 之前，将 GcPdfViewer 部署密钥设置为 GcPdfViewer.License 属性。
这必须在引用 js 文件的代码之前完成。
```javascript
// Add your license
GcPdfViewer.LicenseKey = 'xxx';
// Add your code
const viewer = new GcPdfViewer("#viewer1", { file: 'helloworld.pdf' });
viewer.addDefaultPanels();
```
### <a id="support_api"></a>Support API
_Support API_ 是我们的PDF处理引擎，它为 GcPdfViewer 提供了 PDF 编辑功能。在使用 _Support API_ 配置查看器时，有两种方式可供选择：
- **服务器端的Support API**：需要使用 [GcDocs.Pdf.ViewerSupportApi](https://www.nuget.org/packages/GcDocs.Pdf.ViewerSupportApi/) NuGet包，该包需在.NET服务器上运行。查看器通过 _supportApi_ 属性连接到它，并利用此连接执行所有编辑操作。
``` javascript
var viewer = new GcPdfViewer('#root', { supportApi: 'api/pdf-viewer' } );
// Contact server and get Support API version.
viewer.serverVersion.then(function(ver) {
alert("The SupportApi version is " + ver);
});
```
它需要您设置一个 Support API 服务器并查看其实际效果 [ViewerSupportApi](https://www.nuget.org/packages/GcDocs.Pdf.ViewerSupportApi/) 的完整 C# 源代码以及针对 .NET8 和 Web Forms 的演示项目都包含在 NuGet 包的 `src/` 文件夹内（为 Web Forms 目标定义了 **WEB_FORMS** 常量）。在您的服务器解决方案中，您可以引用该包，或者包含源项目并引用它。
- **客户端的Support API**：使用在客户端浏览器中运行 `GcPdf.wasm` WebAssembly。这种配置不需要服务器连接，所有编辑都在客户端完成。您也不需要下载任何额外组件，因为 Wasm 二进制文件已包含在此包中。
如要尝试 Wasm 选项，只需在文件管理器中双击 `index-wasm.html` 文件（包含在此包中）。此外还包含有`run_wasm.cmd`，它使用 [http-server](https://www.npmjs.com/package/http-server) 加载`index-wasm-server.html`，展示了使用Wasm选项的更灵活的方法，详情请参阅`index-wasm-server.html`中的注释。
因为是在客户端中，所以 Wasm 的配置中无法提供协作功能。并且，在此版本（v7.2）中，以下功能尚不支持，如果使用Wasm配置，这些功能将在查看器UI中禁用：
- 添加/应用校对
- 电子签名
- 导出为光栅或SVG图像
- 将注释转换为内容
请注意，你需要拥有 GcDocs.PDF Professional 许可证才能在你的应用中使用 Support API。
### 键盘快捷键
#### 查看模式
- `Ctrl +` - 放大
- `Ctrl -` - 缩小
- `Ctrl 0` - 恢复至100%大小
- `Ctrl 9` - 调整至窗口大小
- `Ctrl A` - 全选
- `R` - 顺时针旋转
- `Shift R` - 逆时针旋转
- `H` - 启用平移工具
- `S` - 启用选择工具
- `V` - 启用选择工具
- `Ctrl O` - 打开本地PDF文件
- `Ctrl F` - 文本搜索
- `Ctrl P` - 打印
- `Home` - 移动到行首
- `Ctrl Home` - 移动到文档开头
- `Shift Home` - 选中到行首
- `Shift Ctrl Home` - 选中到文档开头
- `End` - 移动到行尾
- `Ctrl End` - 移动到文档末尾
- `Shift End` - 选中到行尾
- `Shift Ctrl End` - 选中到文档末尾
- `Left` - 左移
- `Shift Left` - 向左选中
- `Alt Left` - 历史后退
- `Right` - 右移
- `Shift Right` - 向右选中
- `Alt Right` - 历史前进
- `Up` - 上移
- `Shift Up` - 向上选中
- `Down` - 下移
- `Shift Down` - 向下选中
- `PgUp` - 页面向上滚动
- `PgDown` - 页面向下滚动
- `Shift PgUp` - 选中页面向上滚动
- `Shift PgDown` - 选中页面向下滚动
#### 编辑模式
- ```Delete``` - 删除选定的注释/字段
- ```Esc``` - 取消选择注释/字段
- ```Ctrl Z``` - 撤消
- ```Ctrl Y``` - 重做
- ```Ctrl Shift Z``` - 重做
### 工具栏项目
默认查看器工具栏项目布局（以'$'开头的项目是从基本查看器继承的，其他项目是PDF查看器特定的。）：
```
['open', '$navigation', '$split', 'text-selection', 'pan', '$zoom', '$fullscreen', 'rotate', 'view-mode', 'theme-change', 'download', 'print', 'save', 'hide-annotations', 'doc-title', 'doc-properties', 'about']
```
PDF观看器特定工具栏项目的完整列表：
```
'text-selection', 'pan', 'open', 'save', 'download', 'print', 'rotate', 'theme-change', 'doc-title', 'view-mode', 'single-page', 'continuous-view'
```
基本查看器工具栏项目的完整列表：
```
'$navigation' '$refresh', '$history', '$mousemode', '$zoom', '$fullscreen', '$split'
```
您可以使用 getDefaultToolbariTems() 方法来获取默认的基本查看器项目，例如：
```javascript
const toolbar: Toolbar = viewer.toolbar;
let buttons = toolbar.getDefaultToolbarItems();
buttons = buttons.filter(b => b !== '$refresh');
```
要指定自定义的工具栏项目，请使用工具栏属性和 applyToolBarlayout() 方法，例如：
```javascript
viewer.toolbarLayout.viewer = {
default: ["$navigation", 'open', '$split', 'doc-title'],
fullscreen: ['$fullscreen', '$navigation'],
mobile: ["$navigation", 'doc-title']
};
viewer.toolbarLayout.annotationEditor = {
default: ['edit-select', 'save', '$split', 'edit-text'],
fullscreen: ['$fullscreen', 'edit-select', 'save', '$split', 'edit-text'],
mobile: ['$navigation']
};
viewer.toolbarLayout.formEditor = {
default: ['edit-select-field', 'save', '$split', 'edit-widget-tx-field', 'edit-widget-tx-password'],
fullscreen: ['$fullscreen', 'edit-select-field', 'save', '$split', 'edit-widget-tx-field', 'edit-widget-tx-password'],
mobile: ['$navigation']
};
viewer.applyToolbarLayout();
```
这是如何创建自己的自定义工具栏按钮的示例：
```javascript
const toolbar: Toolbar = viewer.toolbar;
toolbar.addItem({
key: 'my-custom-button',
iconCssClass: 'mdi mdi-bike',
title: 'Custom button',
enabled: false,
action: () => {
alert("Custom toolbar button clicked");
},
onUpdate: (args) => ({ enabled: viewer.hasDocument }),
});
viewer.toolbarLayout.viewer.default = ['$navigation', 'my-custom-button'];
viewer.applyToolbarLayout();
```
### 在诸如React，preact，Angular等的框架中使用查看器。
添加对查看器脚本的参考：
```HTML
<body>
<script type="text/javascript" src="/lib/gcpdfviewer/gcpdfviewer.js"></script>
...
```
将占位符添加到您的应用模板中，例如：
```HTML
<section id="pdf"></section>
```
渲染 Viewer：
```javascript
let viewer = new GcPdfViewer('section#pdf');
viewer.addDefaultPanels();
```