教程的家>HTML5 > 在文档中显示文件查看器——NodeJS和打印稿

在这个话题▼

在文档中显示文件查看器——NodeJS和打印稿

本教程展示了如何创建一个与打印稿NodeJS Web应用程序,使用HTML5的LEADTOOLS SDK文档加载JavaScript文件查看器。

概述
总结	本教程介绍了如何使用LEADTOOLS SDK文档查看器技术与打印稿NodeJS Web应用程序。
完成时间	15分钟
Visual Studio项目	下载教程项目(30 KB)
平台	NodeJS NPM项目
IDE	Visual Studio代码——客户端
运行许可证	下载LEADTOOLS
试试用另一种语言	c#:net框架(WinForms),net 6 +,WPF,Xamarin的 HTML5:HTML5 JavaScript,HTML5打印稿,HTML5 JS反应,HTML5 node . js

所需的知识

熟悉基本的步骤创建一个项目的审查添加引用和设置许可证——NodeJS和打印稿教程在工作之前在文档中显示文件查看器——NodeJS和打印稿教程。

本教程使用一个文本编辑器,如Visual Studio代码来创建和修改必要的脚本文件。

执行命令在本教程中使用PowerShell / CommandPrompt(如果使用Windows)或一个终端窗口(如果使用基于unix的系统)。

创建项目并安装所需的开发依赖关系

从项目中创建的副本添加引用和设置许可证——NodeJS和打印稿教程。如果项目是不可用,按照这个教程中的步骤创建它。

确保所需的依赖关系是通过运行安装npm安装命令。

重命名lt.MyModule在。\ ts \ App \ SetLicense.ts和\ ts \ Index.ts脚本lt.DocumentViewer。

添加LEADTOOLS引用

的引用需要取决于项目的目的。可以通过添加引用. js文件位于< INSTALL_DIR > \ LEADTOOLS22 \ Bin \ JS。

对于这个项目,还需要以下引用:

Leadtools.Annotations.Automation.js
Leadtools.Annotations.Designers.js
Leadtools.Annotations.Engine.js
Leadtools.Annotations.Rendering.JavaScript.js
Leadtools.js
Leadtools.Controls.js
Leadtools.Document.js
Leadtools.Document.Viewer.js

将这些文件复制到项目的网站。\ \常见文件夹中。

对于一个完整的列表的JS应用程序所需文件,请参考文件包含在您的应用程序

此外,以下类型定义文件需要使用打字稿:

Leadtools.Annotations.Automation.d.ts
Leadtools.Annotations.Designers.d.ts
Leadtools.Annotations.Engine.d.ts
Leadtools.Controls.d.ts
Leadtools.d.ts
Leadtools.Document.d.ts
Leadtools.Document.Viewer.d.ts

这些可以在相同的文件夹中找到. js文件在< INSTALL_DIR > \ LEADTOOLS22 \ Bin \ JS

将这些文件复制到项目的\ leadtools_modules \ @types文件夹中。

的Leadtools.Document.d.ts类型定义脚本还需要jQuery类型定义,这些都是包含在工具包< INSTALL_DIR > \ LEADTOOLS22 \ Bin \ JS \第三方\ jquery。复制jquery.d.ts项目的文件\ leadtools_modules \ @types并将其放在一个文件夹第三方\ jquery子文件夹。

复制类型定义脚本文件之后,编辑\ ts \ tsconfig.json文件,并将文件添加到类型值:

{“compilerOptions”:{“目标”:“es5”,“模块”:“没有”,“outDir”:“. . /网站”,“类型”:【“. . / leadtools_modules / @types / Leadtools.Annotations.Automation”,“. . / leadtools_modules / @types / Leadtools.Annotations.Designers”,“. . / leadtools_modules / @types / Leadtools.Annotations.Engine”,“. . / leadtools_modules / @types / Leadtools.Controls”,“. . / leadtools_modules / @types / Leadtools”,“. . / leadtools_modules / @types / Leadtools.Document”,“. . / leadtools_modules / @types / Leadtools.Document.Viewer”,“. . / leadtools_modules / @types /第三方/ jquery / jquery”]}}

添加和设置许可文件

许可解锁项目需要的特性。它必须设置工具箱函数被调用之前。细节包括教程不同的平台,请参考设置一个运行时许可。

有两种类型的运行时许可证:

评估许可,评估工具包时下载获得。它允许评估工具包。
部署许可证。如果部署许可证文件和开发人员的关键是需要的,请参考获得许可证。

复制粘贴的LEADTOOLS.lic.txt许可证文件到\ \ LEADTOOLS网站文件夹中。注意,许可证的结局. txtJavaScript。许可文件,不会结束. txt服务器和桌面应用程序。许可文件中可以找到以下目录:< INSTALL_DIR > \ LEADTOOLS22 \ \共同支持\许可证

取代的键值LEADTOOLS.lic.key.txt文件。\ ts \ App \ SetLicense.ts脚本。

文档查看器添加HTML元素

与项目创建、依赖关系添加和许可,可以开始编码。

打开网站。\ \ index . html文件在编辑器中。使用以下行导入JS文件和高度的依赖性index . html页面。

<——外部. js文件><脚本src = " https://code.jquery.com/jquery-2.2.4.min.js "诚信= crossorigin“sha256-BbhdlvQf / xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44 =”=“匿名”></脚本><——! Leadtools . js文件><脚本src = "常见/ Leadtools.js”></脚本><脚本src = "常见/ Leadtools.Controls.js”></脚本><脚本src = "常见/ Leadtools.Annotations.Engine.js”></脚本><脚本src = "常见/ Leadtools.Annotations.Designers.js”></脚本><脚本src = "常见/ Leadtools.Annotations.Rendering.JavaScript.js”></脚本><脚本src = "常见/ Leadtools.Annotations.Automation.js”></脚本><脚本src = "常见/ Leadtools.Document.js”></脚本><脚本src = "常见/ Leadtools.Document.Viewer.js”></脚本><!——. js主题是外商投资企业><脚本src = " App / SetLicense.js "></脚本><脚本src = " App / DocumentViewerApp.js "></脚本><脚本src = " Index.js "></脚本>

添加HTML元素,将被用作容器以下组件的文档查看器:

的thumbnailsControl,缩略图文档查看器的一部分
的bookmarksControl,书签文档查看器的一部分
的imageViewerContainer,文档查看器视图的一部分

此外,添加一个navigationbar元素将包含按钮在缩略图和书签容器之间切换。

<div id = " navigationbar " class = " navigationbar”><按钮id = " showThumbnails " class = " navigationbarBtn”><跨类= "图标thumbnailsIcon "></跨度></按钮><按钮id = " showBookmarks " class = " navigationbarBtn”><跨类= "图标bookmarksIcon "></跨度></按钮></ div><div id = " thumbnailsControl " class = " affectedContainers”><div类= " controlHeader "><标签>页面</标签></ div><div id =“缩略图”></ div></ div><div id = " bookmarksControl " class = " affectedContainers”><div类= " controlHeader "><标签>书签</标签></ div><div id =“书签”></ div></ div><div id = " imageViewerContainer " class = " affectedContainers”><!——观众将动态创建内部imageViewerDiv—><div id = " imageViewerDiv "></ div></ div>

的affectedContainers类是用来选择元素,将调整显示根据浏览器窗口的大小。的navigationbar类中使用类似的方式调整的显示imageViewerContainer当书签或缩略图切换控制。

修改样式表文件

创建一个CSS文件夹中网站目录,并创建一个新的CSS样式表文件documentViewer.css。

使用这个文件来指定显示样式的HTML元素的文档查看器使用下面的代码:

/ *文件查看器风格- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - * /身体{高度:100%;背景:白色;溢出:隐藏;颜色:# 4 d5f82;高度:100%;保证金:0;-webkit-text-size-adjust:没有;字体类型:helvetica;字体大小:10 pt;margin-bottom: 60 px;显示:块;}.navigationbar {溢出:隐藏;位置:固定;background - color: # DFE1E5;显示:块;宽度:40像素;左:0 px;底部:0 px;上图:0 px;边境:1 px固体;border-right-color: # D4D6DB;-webkit-box-shadow: 2 px 0 px 7 px rgba (0, 0, 0, 0.3);不必:2 px 0 px 7 px rgba (0, 0, 0, 0.3);z - index: 1;}.navigationbar .icon {宽度:34 px;}.navigationbarBtn {填充:7 px 0 px 8 px 0 px;宽度:100%;背景颜色:透明;边界:1 px固体透明;边境:0;大纲:没有;宽度:39 px;高度:45 px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}.activeNavigationbarBtn {background - color: # D4D6DB;边框颜色:darkgray;}.icon {位置:相对;显示:inline-block;平铺方式:不再重演;背景位置:中心;宽度:35 px;高度:25 px;上图:3 px;}.thumbnailsIcon {背景图片:url(. . /资源/图像/图标/ Thumbnails.png”);}.bookmarksIcon {背景图片:url(. . /资源/图像/图标/ Bookmarks.png”);}# imageViewerContainer {溢出:隐藏;位置:固定;显示:块;左:0 px;右:0 px;底部:0 px;上图:0 px;}# imageViewerDiv {位置:相对;宽度:100%;高度:100%;background - color: # C2C2C2;}# thumbnailsControl, # bookmarksControl {宽度:195 px;background - color: # D4D6DB;z - index: 1;位置:固定;左:39 px;底部:0 px;上图:0 px;-webkit-box-shadow: 5 px 4 px 5 px 5 px # 333;不必:5 px 4 px 5 px 5 px # 333;边界:1 px固体darkgray;显示:没有;}# thumbnailsControl>。controlHeader # bookmarksControl>.controlHeader {填充:继承;text-align:继承;padding-top: 13 px;padding-left: 5 px;}#缩略图,#{书签溢出:隐藏;上图:43 px;左:5 px;右:5 px;底部:5 px;位置:绝对!重要;边界:1 px固体darkgray;}#{缩略图background - color: # fafdff;}#{书签背景颜色:白色;溢出:汽车!重要;字体:正常正常12 px / 20 px Helvetica, Arial,无衬线;}

链接中使用这个CSS文件页面/ index.chtml文件:

<——是样式表><链接rel = "样式表" href = " ~ / CSS /主题是。css " />

添加图标的图像资源

的navigationbar元素为每个按钮使用图标图像包含的切换显示缩略图或书签容器。

创建一个资源文件夹下的网站然后创建目录的项目图片\图标子文件夹。

添加Bookmarks.png和Thumbnails.png这个文件夹图标的图像。这些图像可以发现< INSTALL_DIR > \ LEADTOOLS22 \ \常见例子\ JS \ \ \图标图像资源

添加文件查看器应用程序代码

创建一个DocumentViewerApp.ts文件\ ts \ App文件夹中。

声明和导出一个新的DocumentViewerApp类将包含属性和函数用于文档查看器web应用程序的配置和操作。

使用下面的代码来定义公共和私人的属性DocumentViewerApp以及配置构造函数。

模块lt.DocumentViewer {出口类DocumentViewerApp {/ /文档查看器私人_documentViewer: lt.Document.Viewer。是=零;/ / HTML元素公共navigationbarContainer: HTMLElement = . getelementbyid (“navigationbar”);公共navigationbar = {showThumbnailsBtn: < HTMLButtonElement > . getelementbyid (“showThumbnails”),showBookmarksBtn: < HTMLButtonElement > . getelementbyid (“showBookmarks”)};公共imageViewerContainerDiv: HTMLElement = . getelementbyid (“imageViewerContainer”);公共thumbnailsContainer: HTMLElement = . getelementbyid (“thumbnailsControl”);公共bookmarksContainer: HTMLElement = . getelementbyid (“bookmarksControl”);公共affectedContainers:NodeListOf HTMLElement > < = document.querySelectorAll (“.affectedContainers”);构造函数(){窗口。onunload = ((e:事件)= >这。onUnload (e));窗口。onresize = ((e:事件)= >这。onResize (e));}私人onUnload (e:事件):无效{如果(这。_documentViewer ! =零){这._documentViewer。dispose ();}}

添加onResize()代码配置容器显示

使用下面的代码来动态更新显示的文档查看器元素根据浏览器窗口大小的页眉和页脚在项目的元素。

这段代码还调整视图的显示容器如果缩略图或书签容器是可见的。

私人onResize (e:事件){这。updateContainers ();}公共updateContainers ():无效{/ /检查可见性让visibleThumbnails:布尔=窗口。getComputedStyle (这。thumbnailsContainer)。显示! = =“没有”;让visibleBookmarks:布尔=窗口。getComputedStyle (这。bookmarksContainer)。显示! = =“没有”;让navigationbarContainerWidth:数量=这.navigationbarContainer.offsetWidth;/ /缩略图、书签和附件容器有相同的宽度/ /使用缩略图容器一样常见让containerWidth:数量=方法(window.getComputedStyle (这。thumbnailsContainer) .width);/ /现在更新浏览器容器让imageViewerContainerDivLeft:数量= navigationbarContainerWidth;如果(visibleThumbnails | | visibleBookmarks)imageViewerContainerDivLeft + = containerWidth;这。imageViewerContainerDiv.style。左= imageViewerContainerDivLeft.toString () +“像素”;/ /查看器容器的大小可能会改变;叫onSizeChanged这._documentViewer.view。imageViewer.onSizeChanged ();如果(这。_documentViewer。缩略图! =零){这._documentViewer.thumbnails。imageViewer.onSizeChanged ();这._documentViewer.thumbnails。imageViewer.invalidate (lt.LeadRectD.empty);}}

运行()代码添加到初始化是应用

使用下面的代码DocumentViewer.run ()将初始化查看器,验证服务连接,加载一个PDF文档。

的PDF文档加载是一个示例Leadtools.pdf文件,可在https://demo.leadtools.com/images/pdf/leadtools.pdf

公共run ():无效{/ /初始化导航栏按钮这.navigationbar.showThumbnailsBtn。addEventListener (“点击”()=>这。showContainer (这.thumbnailsContainer,真正的));这.navigationbar.showBookmarksBtn。addEventListener (“点击”()=>这。showContainer (这.bookmarksContainer,真正的));/ /初始化文档查看器这。initDocumentViewer ();/ /初始化UI这。updateAppUIState ();/ /验证服务连接lt.Document.DocumentFactory。serviceHost =“http://localhost: 40000”;lt.Document.DocumentFactory。servicePath =”“;lt.Document.DocumentFactory。serviceApiPath =“api”;lt.Document.DocumentFactory.verifyService ().done (() = > {lt.LTHelper.log (“服务连接验证!”);})fail (() = > {lt.LTHelper.log (“服务连接不可用。”);});/ /加载文档常量url =“https://demo.leadtools.com/images/pdf/leadtools.pdf”;lt.Document.DocumentFactory.loadFromUri (url,零).done ((doc) = > {这。setDocument (doc);这。updateAppUIState ();});}

添加showContainer()代码

使用下面的代码导航栏按钮用于控制缩略图的可见性和书签的容器中。

/ /切换缩略图/书签容器的可见性公共showContainer(容器,flipState:布尔):无效{让visibleThumbnails:布尔=窗口。getComputedStyle (这。thumbnailsContainer)。显示! = =“没有”;让visibleBookmarks:布尔=窗口。getComputedStyle (这。bookmarksContainer)。显示! = =“没有”;/ /显示缩略图如果(容器= =这.thumbnailsContainer) {如果(! visibleThumbnails) {如果(visibleBookmarks) {这。bookmarksContainer.style。显示=“没有”;这.navigationbar.showBookmarksBtn。类List.remove (“activeNavigationbarBtn”);}这.navigationbar.showThumbnailsBtn。类List.add (“activeNavigationbarBtn”);这。thumbnailsContainer.style。显示=“块”;}其他的{如果(flipState) {这.navigationbar.showThumbnailsBtn。类List.remove (“activeNavigationbarBtn”);这。thumbnailsContainer.style。显示=“没有”;}}这。updateContainers ();返回;}/ /显示书签如果(容器= =这.bookmarksContainer) {如果(! visibleBookmarks) {/ /隐藏别人如果(visibleThumbnails) {这。thumbnailsContainer.style。显示=“没有”;这.navigationbar.showThumbnailsBtn。类List.remove (“activeNavigationbarBtn”);}这.navigationbar.showBookmarksBtn。类List.add (“activeNavigationbarBtn”);这。bookmarksContainer.style。显示=“块”;}其他的{如果(flipState) {这.navigationbar.showBookmarksBtn。类List.remove (“activeNavigationbarBtn”);这。bookmarksContainer.style。显示=“没有”;}}这。updateContainers ();返回;}}

初始化和创建文档查看器

使用下面的代码来配置文档查看器。的createOptions对象配置的创建查看器和钩子的HTML元素。

后创建的文档查看器DocumentViewerFactory对象,也可以配置文档查看器设置。在本教程中,应用以下设置:

喜欢浏览页面的加载使用SVG文档数据,如果支持
延迟加载的缩略图和加载页面
呈现错误的日志

/ /创建文档查看器私人initDocumentViewer ():无效{/ /文档查看器创建选项让createOptions: lt.Document.Viewer。DocumentViewerCreateOptions =新lt.Document.Viewer.DocumentViewerCreateOptions ();createOptions.viewCreateOptions。useElements =假;createOptions.thumbnailsCreateOptions。useElements =假;/ /设置显示主视图的UI部分createOptions。viewContainer = . getelementbyid (“imageViewerDiv”);/ /设置显示缩略图的UI部分createOptions。thumbnailsContainer = . getelementbyid (“缩略图”);/ /设置UI的一部分显示书签(设置书签容器将向他们简单的列表)createOptions。bookmarksContainer = . getelementbyid (“书签”);createOptions。useAnnotations =假;/ /创建查看器试一试{这。_documentViewer = lt.Document.Viewer.DocumentViewerFactory.createDocumentViewer (createOptions);/ /文档查看器设置/ / SVG偏好显示这._documentViewer。view。preferredItemType = lt.Document.Viewer.DocumentViewerItemType.svg/ /延迟加载这._documentViewer。view。lazyLoad =真正的;如果(这._documentViewer.thumbnails)这._documentViewer。thumbnails。lazyLoad =真正的;/ /日志呈现错误让imageview: lt.Controls。imageview =这._documentViewer.view.imageViewer;让logRenderErrors: lt.Controls。ImageViewerRenderEventHandler =函数(发送者:任何艾凡:lt.Controls.ImageViewerRenderEventArgs) {让项目:数量=e。项! =零吗?e.item.imageViewer.items.indexOf (e.item): 1;让信息:字符串=在渲染项目“错误”+项目+“部分”+ (e.part) +”:“+ (e.error.message);lt.LTHelper。logError({信息:信息,错误:e。错误});}imageViewer.renderError.add (logRenderErrors);如果(这。_documentViewer。缩略图& &这._documentViewer.thumbnails.imageViewer)这._documentViewer.thumbnails。imageViewer.renderError.add (logRenderErrors);}抓(e) {alert (“是创建失败”);lt.LTHelper.logError (e);返回;}}

初始化文件查看器应用程序的UI

使用下面的代码来初始化显示的文档查看器应用程序的用户界面。

/ /更新UI应用程序的状态私人updateAppUIState ():无效{让hasDocument:布尔=这._documentViewer.hasDocument;如果(hasDocument) {如果(窗口。getComputedStyle (这。imageViewerContainerDiv)。显示= = =“没有”){这。imageViewerContainerDiv.style。显示=“块”;这._documentViewer.view。imageViewer.updateTransform ();}如果(这.navigationbar.showThumbnailsBtn。matches (禁用”:“))这。navigationbar。showThumbnailsBtn。禁用=假;如果(这._documentViewer.document.isStructureSupported) {如果(这.navigationbar.showBookmarksBtn。matches (禁用”:“))这。navigationbar。showBookmarksBtn。禁用=假;}其他的{这.navigationbar.showBookmarksBtn。类List.remove (“activeNavigationbarBtn”);如果(!这.navigationbar.showBookmarksBtn。matches (禁用”:“)))这。navigationbar。showBookmarksBtn。禁用=真正的;如果(这。bookmarksContainer.style。显示= = =“块”)这。bookmarksContainer.style。显示=“没有”;}}其他的{如果(窗口。getComputedStyle (这。imageViewerContainerDiv)。显示= = =“块”){这。imageViewerContainerDiv.style。显示=“没有”;}这.navigationbar.showThumbnailsBtn。类List.remove (“activeNavigationbarBtn”);如果(!这.navigationbar.showThumbnailsBtn。matches (禁用”:“)))这。navigationbar。showThumbnailsBtn。禁用=真正的;如果(这。thumbnailsContainer.style。显示= = =“块”)这。thumbnailsContainer.style。显示=“没有”;这.navigationbar.showBookmarksBtn。类List.remove (“activeNavigationbarBtn”);如果(!这.navigationbar.showBookmarksBtn。matches (禁用”:“)))这。navigationbar。showBookmarksBtn。禁用=真正的;如果(这。bookmarksContainer.style。显示= = =“块”)这。bookmarksContainer.style。显示=“没有”;}这。updateContainers ();}

添加setDocument()代码

下面的代码检查加载文档进行解析,解析文件如果需要,并设置加载文档到文档查看器。

公共setDocument(文档:lt.Document.LEADDocument):无效{/ /看看我们是否需要解析文档结构如果(document.structure.isParsed) {这。finishSetDocument(文档);}其他的这。parseStructure(文档);}私人parseStructure(文档:lt.Document.LEADDocument):无效{document.structure.parse ().done((文档:lt.Document.LEADDocument):无效=>{这。finishSetDocument(文档);})fail (():无效=>{lt.LTHelper.log (“错误解析文档结构。”);});}公共finishSetDocument(文档:lt.Document.LEADDocument):无效{如果(这。_documentViewer。视图! =零){/ /使用SVG图像这._documentViewer。view。useSvgBackImage =真正的;}/ /设置加载文档在文档查看器这._documentViewer。setDocument(文档);/ /更新UI这。updateAppUIState ();/ /调用onResize所以DIV的大小得到更新这。onResize (零);/ /页面显示这._documentViewer。commands.run (lt.Document.Viewer.DocumentViewerCommands.viewFitPage零);}}}

从指数脚本调用run ()

添加一个调用run()方法Index.ts脚本。

document.addEventListener (“DOMContentLoaded”内,()=>{(新lt.DocumentViewer。SetLicense ()) .run ();(新lt.DocumentViewer。DocumentViewerApp())。run ();});

运行该项目

在运行前端文档查看器之前,运行文档服务。LEADTOOLS SDK安装提供了以下三个例子文档的服务平台:

net框架
net核心
Java

说明如何设置和配置文档服务,在前面列出的三个平台中的步骤开始使用文档查看器演示,HTML5的JavaScript教程。

对于本教程,. net Framework文档服务使用,它可以在这里找到: \ \ LEADTOOLS22 \例子文档\ JS \ DocumentServiceDotNet \外汇。

一旦你有了后端文档服务运行,执行构建脚本transpile TS脚本的输出网站文件夹:

npm运行构建

一旦完成,执行开始脚本自动启动服务器并在浏览器默认打开托管网站。

npm运行开始

总结

本教程展示了如何初始化、加载和显示一个文档NodeJS打印稿文档查看器的Web应用程序。

另请参阅

下载我们的免费评估

LEADTOOLS教程

开始使用LEADTOOLS安装程序

net 6 +

net框架

安卓

C DLL

云服务

码头工人

HTML5

iOS

Java

macOS

Python

Xamarin的