本教程展示了如何使用LEADTOOLS SDK在HTML5/JS文档查看器中从Base64加载和注释文档。
概述 | |
---|---|
总结 | 本教程介绍如何使用HTML5/JS文档查看器从Base64加载。 |
完成时间 | 15分钟 |
项目 | 下载教程项目(84kb) |
平台 | JS Web应用程序 |
IDE | Visual Studio代码-客户端 |
运行许可证 | 下载LEADTOOLS |
方法来熟悉创建项目和初始化文档查看器的基本步骤添加引用和设置License而且在文档查看器中显示文件教程,在工作之前从文档查看器中的Base64加载文档- HTML5 JavaScript教程。
本教程将使用http服务器
,用于运行静态文件服务器的控制台命令。安装http服务器
第一次安装node . js
然后安装http服务器
.
中创建的项目的副本开始在文档查看器中显示文件教程。如果该项目不可用,请按照该教程中的步骤创建它。
所需要的参考资料取决于项目的目的。可以通过添加引用. js
档案位于< INSTALL_DIR > \ LEADTOOLS22 \ Bin \ JS
.
本项目需要参考资料如下:
Leadtools.js
Leadtools.Annotations.Automation.js
Leadtools.Annotations.Designer.js
Leadtools.Annotations.Engine.js
Leadtools.Annotations.Rendering.JavaScript.js
Leadtools.Controls.js
Leadtools.Document.js
Leadtools.Document.Viewer.js
Leadtools.ImageProcessing.Main.js
Leadtools.ImageProcessing.Color.js
Leadtools.ImageProcessing.Core.js
Leadtools.ImageProcessing.Effects.js
请确保将这些文件复制到自由
文件夹,并将它们导入index . html
文件。
有关应用程序需要哪些JS文件的完整列表,请参阅你的申请所包含的文件
许可证解锁项目所需的特性。它必须在调用任何工具箱函数之前设置。有关包括针对不同平台的教程的详细信息,请参阅设置运行时License.
有两种类型的运行时许可证:
创建项目、添加依赖项、设置许可并初始化Document Viewer之后,就可以开始编码了。
打开index . html
位于项目文件夹中的文件。确保以下代码位于HTML文件中。
<! doctype html>
<html lang = "恩">
<头>
<meta charset="UTF-8" />
<元名称="viewport" content="width=device-width, initial-scale=1.0" />
<标题>主题是例子</标题>
<脚本src = " https://code.jquery.com/jquery-2.2.4.min.js "
诚信= " sha256-BbhdlvQf / xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44 = " crossorigin =“匿名”></脚本>
<导入LEADTOOLS依赖项>
<脚本src = " / lib / Leadtools.js”。></脚本>
<脚本src = " / lib / Leadtools.Controls.js”。></脚本>
<脚本src = " / lib / Leadtools.Annotations.Engine.js”。></脚本>
<脚本src = " / lib / Leadtools.Annotations.Designers.js”。></脚本>
<脚本src = " / lib / Leadtools.Annotations.Rendering.Javascript.js”。></脚本>
<脚本src = " / lib / Leadtools.Annotations.Automation.js”。></脚本>
<脚本src = " / lib / Leadtools.ImageProcessing.Main.js”。></脚本>
<脚本src = " / lib / Leadtools.ImageProcessing.Color.js”。></脚本>
<脚本src = " / lib / Leadtools.ImageProcessing.Core.js”。></脚本>
<脚本src = " / lib / Leadtools.ImageProcessing.Effects.js”。></脚本>
<脚本src = " / lib / Leadtools.Document.js”。></脚本>
<脚本src = " / lib / Leadtools.Document.Viewer.js”。></脚本>
<链接rel="stylesheet" type="text/css" href="style.css">
<导入项目依赖项>
<Script src="b64.js" type="text/javascript"></脚本>
<Script src="app.js" type="text/javascript"></脚本>
</头>
<身体>
<div类= "容器">
<div类= "工具栏">
<Div class="vcenter push-right">
<标签= " interactiveSelect ">交互模式:</标签>
<选择id = " interactiveSelect "></选择>
</ div>
<Div class="vcenter push-right">
<标签= " annotationsSelect ">注释对象:</标签>
<选择id = " annotationsSelect "></选择>
</ div>
<Div id="output" class="vcenter push-right"></ div>
<div id="serviceStatus" class="vcenter push-right"></ div>
</ div>
<div类= " docContainer ">
<Div class="sidepanel" id="thumbnails"></ div>
<Div class="centerpanel" id="viewer"></ div>
<Div class="sidepanel" id="bookmarks"></ div>
</ div>
</ div>
</身体>
</ html>
打开style.css
位于项目文件夹中的文件。确保将下面的代码行添加到身体
.
身体{
保证金:0;
显示:flex;
flex-direction:列;
}
.container {
保证金:10 px;
宽度:calc(100% - 20px);
高度:calc(100vh - 20px);
}
.toolbar {
高度:5%;
宽度:100%;
Border-bottom: 2px solid #333;
flex-direction:行;
显示:flex;
}
#{书签
溢出:隐藏;
}
.vcenter {
margin-top:汽车;
margin-bottom:汽车;
}
.hcenter {
margin-left:汽车;
margin-right:汽车;
}
.push-right {
margin-left: 10 px;
}
.docContainer {
高度:95%;
宽度:100%;
显示:flex;
flex-direction:行;
}
.sidepanel {
宽度:15%;
高度:100%;
}
.centerpanel {
宽度:100%;
高度:100%;
}
/*元素模式的样式* /
.lt-item, .lt-image-border {
/*框阴影(视图,项目,图像边框)*/
Box-shadow: #333 2px 2px 5px 1px;
}
.lt-view。lt-thumb-item {
/*视图*/
保证金:5 px;
填充:5 px;
}
.lt-item {
/*项目*/
边框:2px实心#6ecaab;
background - color: # b2decf;
填充:10 px;
}
.lt-image-border {
/*图像边框*/
边框:3px实体#444;
背景颜色:白色;
}
.lt-thumb-item {
/*缩略图项*/
边框:2px实心#6ecaab;
background - color: # b2decf;
}
.lt-thumb-item。lt-thumb-item-selected {
/*所选缩略图项*/
边框:2px实体#59b2ba;
background - color: # 8 ce1e1;
}
.lt-thumb-item-hovered {
/*悬浮缩略图项目*/
边框:2px实体#52b996;
background - color: # 87 c7b1;
}
.small-modal {
max-width: 200 px;
宽度:200 px;
}
打开app.js
位于项目文件夹中的文件。在createDocumentViewer
函数,删除或注释掉下面的代码行。
这interactiveSelect .loadDefaultDoc(是)
把它替换成这一行:
这interactiveSelect .loadFromB64(是)
后createDocumentViewer
函数,添加loadFromB64
函数将Base64字符串加载为blob并将其添加到文档查看器。
loadFromB64 = (viewer) => {
//加载PDF文档
常量byteCharacters = atob(base64);
常量byteArrays = [];
常量contentType =”;
常量sliceSize = 512;
为(let offset = 0;offset < byteCharacters.length;offset += sliceSize) {
常量slice = byteCharacters。slice(offset, offset + sliceSize);
常量byteNumbers =新数组(slice.length);
为(设I = 0;I < slice.length;我+ +){
byteNumbers[i] = slice.charCodeAt(i);
}
常量中byteArray =新Uint8Array (byteNumbers);
byteArrays.push(中byteArray);
}
常量blob =新Blob(byteArrays, {type: contentType});
// const blobUrl = URL.createObjectURL(blob);
lt.Document.DocumentFactory.loadFromFile (blob,零)
.done((doc) => {
viewer.setDocument (doc);
})
fail (ViewerInitializer.showServiceError);
};
请注意
你需要创建一个包含你想要使用的矩阵的JS文件。为了本教程的目的,这个JS文件被称为
b64.js
你可以下载并解压缩示例JS文件在这里.
在运行前端HTML5/JS文档查看器之前,运行文档服务。LEADTOOLS SDK安装为以下平台提供了三个文档服务示例:
有关如何在前面列出的三个平台中设置和配置文档服务的说明,请参阅开始使用文档查看器演示教程。
为了本教程的目的,使用了.NET框架文档服务,可以在这里找到它:< INSTALL_DIR > \ LEADTOOLS22 \ \例子文档\ JS \ DocumentServiceDotNet \外汇
.
运行后端文档服务之后,打开命令行和cd
进入项目文件夹。使用实例运行静态文件服务器。http服务器
服务器应该启动并运行http://localhost:8080
.控制台中应该出现一条消息,指示服务器可用的所有端口。
本教程展示了如何使用HTML5/JS文档查看器初始化、加载和显示Base64文档。