教程的家>HTML5 > 文档查看器中显示文件- ASP。网和打印稿

在这个话题▼

文档查看器中显示文件- ASP。网和打印稿

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

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

所需的知识

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

创建项目并添加LEADTOOLS引用

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

的引用需要取决于项目的目的。可以通过添加引用. 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

确保这些文件添加到项目wwwroot \ lib \ leadtools文件夹中。当添加这些文件在Visual Studio,其他依赖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文件夹中。

设置许可文件

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

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

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

请注意

添加LEADTOOLS引用和设置许可中会详细介绍添加引用和设置许可证- ASP。网和打印稿教程。

文档查看器添加HTML元素

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

打开页面/ index.chtml文件位于项目文件夹。添加以下行导入JS文件和高度的依赖性index.chtml页面。

<——! Leadtools . js文件><脚本src = " ~ / lib / leadtools / Leadtools.js”></脚本><脚本src = " ~ / lib / leadtools / Leadtools.Controls.js”></脚本><脚本src = " ~ / lib / leadtools / Leadtools.Annotations.Engine.js”></脚本><脚本src = " ~ / lib / leadtools / Leadtools.Annotations.Designers.js”></脚本><脚本src = " ~ / lib / leadtools / Leadtools.Annotations.Rendering.JavaScript.js”></脚本><脚本src = " ~ / lib / leadtools / Leadtools.Annotations.Automation.js”></脚本><脚本src = " ~ / lib / leadtools / Leadtools.Document.js”></脚本><脚本src = " ~ / lib / leadtools / Leadtools.Document.Viewer.js”></脚本><!——. js主题是外商投资企业><脚本src = " ~ / js / app.js "></脚本>

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

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

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

取代先前存在的< div >元素下面的代码:

<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当书签或缩略图切换控制。

修改样式表文件

右键单击wwwroot / cs从项目和选择文件夹添加- >新项目。选择样式表文件,类型名称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;底部:60 px;上图:57 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;}# imageViewerDiv {位置:相对;宽度:100%;高度:100%;background - color: # C2C2C2;}# thumbnailsControl, # bookmarksControl {宽度:195 px;background - color: # D4D6DB;z - index: 1;位置:固定;左:39 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 " />

配置Program.cs

在解决方案资源管理器,打开程序。cs和使用下面的代码来配置项目入口点。

使用Microsoft.AspNetCore.Builder;使用Microsoft.Extensions.DependencyInjection;使用Microsoft.Extensions.Hosting;varbuilder = WebApplication.CreateBuilder (args);builder.Services.AddRazorPages ();var应用= builder.Build ();如果(app.Environment.IsDevelopment ()){app.UseDeveloperExceptionPage ();}其他的{app.UseExceptionHandler (“/错误”);app.UseHsts ();}app.UseHttpsRedirection ();app.UseStaticFiles ();app.UseRouting ();app.UseAuthorization ();app.UseEndpoints(端点= >{endpoints.MapRazorPages ();});app.Run ();

添加图标的图像资源

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

创建一个资源文件夹下的wwwroot然后创建节点的项目图片\图标子文件夹。

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

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

在脚本\ app.ts文件,首先声明一个主题是模块将包含现有的window函数设置许可。

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

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

模块{主题是出口类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 ():无效{让headerToolbarContainerHeight:数量=document.querySelector HTMLElement > < (“.navbar”).offsetHeight;让footerToolbarContainerHeight:数量=document.querySelector HTMLElement > < (“.footer”).offsetHeight;/ /检查可见性让visibleThumbnails:布尔=窗口。getComputedStyle (这。thumbnailsContainer)。显示! = =“没有”;让visibleBookmarks:布尔=窗口。getComputedStyle (这。bookmarksContainer)。显示! = =“没有”;/ /更新navigationbar容器顶部/底部这。navigationbarContainer.style。顶级= headerToolbarContainerHeight.toString () +“像素”;这。navigationbarContainer.style。底= footerToolbarContainerHeight.toString () +“像素”;/ /更新影响容器顶部/底部这。affectedContainers。= > container.style forEach(容器。顶级= headerToolbarContainerHeight.toString () +“像素”);这。affectedContainers。= > container.style forEach(容器。底= footerToolbarContainerHeight.toString () +“像素”);让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零);}

调用从window运行()()

添加一个调用run()方法在window()函数。

窗口。onload = () = > {/ /如果你有一个JS许可证(LEADTOOLS.LIC.TXT)和密钥文件(LEADTOOLS.LIC.KEY.TXT),您可以使用下面的代码来设置您的许可varlicenseUrl =”。/地方政府投资公司/ LEADTOOLS.lic.txt”;vardeveloperKey =“添加LEADTOOLS.lic.key的内容。txt文件”;/ /如果你是评估和没有JS许可证或密钥文件,您可以使用下面的代码来设置您的许可:/ / var licenseUrl = " https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt ";/ / var developerKey = EVAL”;lt.RasterSupport。setLicenseUri (licenseUrl developerKey,函数(setLicenseResult) {/ /检查许可证的状态如果(setLicenseResult.result) {console.log (“LEADTOOLS客户许可设置成功”);}其他的{var味精=“LEADTOOLS许可证是失踪,无效或过期\ nError: \ n”;console.log(味精);警报(味精);}});/ /运行文件查看器应用程序让应用程序:DocumentViewerApp =新DocumentViewerApp();app.run ();}

运行该项目

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

. net Framework(\ \例子文档\ DotNet \ Document.Service \外汇)
6 . net(\ \例子文档\ DotNet \ Document.Service \网)
Java示例(\ \ \ Java \ Document.Service文档)

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

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

一旦运行后端文档服务,构建和运行项目在Visual Studio主机IIS快车web应用程序选择的浏览器。

文档查看器web应用程序将运行和加载示例PDF文件。可以用来导航缩略图和书签控制加载文档。

总结

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

另请参阅

下载我们的免费评估

LEADTOOLS教程

开始使用LEADTOOLS安装程序

net 6 +

net框架

安卓

C DLL

云服务

码头工人

HTML5

iOS

Java

macOS

Python

Xamarin的