本教程展示如何在ReactJS应用程序中添加LEADTOOLS引用和设置运行时许可。在使用SDK的任何功能之前,必须设置有效的运行时许可。有关如何获得运行时许可证的说明,请参阅<一个href ="//m.ahtuanjie.com/help/sdk/mapping/obtaining-a-license.html">获取License >. p >< div类="compactcontainer">
概述 | |
---|---|
总结 | 本教程演示如何设置一个ReactJS项目,并使用LEADTOOLS SDK设置您的许可证。 |
完成时间 | 15分钟 |
Visual Studio项目 | 下载教程项目(308kb) > |
平台 | Typescript Web应用程序 |
IDE | Visual Studio代码-客户端 |
开发许可 | 下载LEADTOOLS > |
用另一种语言试试 |
|
本教程将介绍如何创建一个ReactJS应用程序,添加LEADTOOLS依赖项,并设置许可文件以使用LEADTOOLS功能。要学习本教程,需要一个文本编辑器,如Visual Studio Code以及Node.js。 p >< p >
如果在Windows上工作,则打开PowerShell或CommandPrompt。如果在基于Unix的系统上工作,则打开一个新终端。使用以下命令更改目录cd
到要创建项目的位置。运行以下命令创建一个新的ReactJS应用程序: p >NPX create-react-app react-set-license——模板typescript
导航到公共
文件夹内的新创建react-set-license
文件夹,并创建一个LEADTOOLS
文件夹中。此文件夹将保存通过电子邮件发送的2个JavaScript许可文件LEADTOOLS.lic.txt
而且LEADTOOLS.lic.key.txt
. p >< p >
为了利用LEADTOOLS组件,需要将LEADTOOLS JavaScript库添加到应用程序中。要做到这一点,在公共
文件夹创建一个名为常见的
. p >< p >在SDK安装中导航到JS库路径< InstallDir > \ Bin \ JS \
和复制Leadtools.js
而且Leadtools.d.ts
到常见的
文件夹中。 p >< p >
中创建TSX文件src
在上面步骤中创建的文件夹,并命名它App.tsx
.这是将添加LEADTOOLS集许可调用的地方。在文本编辑器(如Visual Studio Code)中打开此文件,并从下面两个选项中添加适当的代码块。 p >< p >
如果你有JS许可证(LEADTOOLS.LIC.TXT)和密钥文件(LEADTOOLS.LIC.KEY.TXT),你可以使用下面的代码来设置你的许可证: p >< div类="genericCodeContainer codeContainer JavaScriptGeneric">
/ / / <参考路径= " . . /公共/共同/ Leadtools.d.ts " / >
进口反应从“反应”;
进口标志从”。/ logo.svg ';
进口”。/ App.css ';
进口{useEffect} from“反应”;
函数应用(){
useEffect(() => {
init ();
}, []);
函数init () {
varlicenseUrl =”。/ Leadtools / LEADTOOLS.lic.txt”;
vardeveloperKey =添加你的LEADTOOLS.lic.key.txt文件的内容;
lt.RasterSupport。setLicenseUri (licenseUrl developerKey,函数(setLicenseResult) {
如果(setLicenseResult.result) {
console.log ("LEADTOOLS客户端许可证设置成功");
}其他的{
var味精=“LEADTOOLS许可证丢失,无效或过期\nError:\n”;
console.log(味精);
警报(味精);
}
});
}
返回(
< div className =“应用程序”>
<头className =“App-header”>
< div类=“tutorial-image”>
“App-logo”alt =“标志”/ > < / div >
< p >
编辑的src /应用程序。Tsx '并保存以重新加载。
< / p >
<一个
className =“App-link”
href =“https://reactjs.org”
目标=“平等”
rel =“noopener noreferrer”
>
学反应
< / >
头> < /
< / div >
);
}
出口默认的应用程序;
请注意
的值进行替换
developerKey
字符串中包含许可密钥文本文件的内容。
如果你正在评估并且没有JS许可证或密钥文件,你可以使用下面的代码来设置你的许可证: p >< div类="genericCodeContainer codeContainer JavaScriptGeneric">
/ / / <参考路径= " . . /公共/共同/ Leadtools.d.ts " / >
进口反应从“反应”;
进口标志从”。/ logo.svg ';
进口”。/ App.css ';
进口{useEffect} from“反应”;
函数应用(){
useEffect(() => {
init ();
}, []);
函数init () {
varlicenseUrl =“https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt”;
vardeveloperKey =“EVAL”;
lt.RasterSupport。setLicenseUri (licenseUrl developerKey,函数(setLicenseResult) {
如果(setLicenseResult.result) {
console.log ("LEADTOOLS客户端许可证设置成功");
}其他的{
var味精=“LEADTOOLS许可证丢失,无效或过期\nError:\n”;
console.log(味精);
警报(味精);
}
});
}
返回(
< div className =“应用程序”>
<头className =“App-header”>
< div类=“tutorial-image”>
“App-logo”alt =“标志”/ > < / div >
< p >
编辑的src /应用程序。Tsx '并保存以重新加载。
< / p >
<一个
className =“App-link”
href =“https://reactjs.org”
目标=“平等”
rel =“noopener noreferrer”
>
学反应
< / >
头> < /
< / div >
);
}
出口默认的应用程序;
开放index . html
在公共
文件夹中。控件中添加以下必要的脚本标记< >头
导入LEADTOOLS依赖项。 p >< p >
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="匿名"></脚本>
<脚本src = " /共同/ Leadtools.js "></脚本>
在ReactJS项目的根目录中打开用于创建ReactJS应用程序的命令行应用程序并运行npm开始
. p >< p >这将构建ReactJS应用程序,然后打开开发人员控制台F12并查看已经设置了LEADTOOLS许可证。 p >< div类=“tutorial-image”>
本教程展示了如何在ReactJS应用程序中设置客户端LEADTOOLS许可。 p >< p >
帮助收藏 p >
光栅<一个href ="//m.ahtuanjie.com/help/sdk/v22/dh/to/introduction.html" class="menuAnchor">net >|<一个href ="//m.ahtuanjie.com/help/sdk/v22/main/api/introduction.html" class="menuAnchor">C API >|<一个href ="//m.ahtuanjie.com/help/sdk/v22/main/clib/introduction.html" class="menuAnchor">c++类库 >|<一个href ="//m.ahtuanjie.com/help/sdk/v22/dh/javascript/to/introduction.html" class="menuAnchor">HTML5 JavaScript >
文档<一个href ="//m.ahtuanjie.com/help/sdk/v22/dh/to/introduction.html" class="menuAnchor">net >|<一个href ="//m.ahtuanjie.com/help/sdk/v22/main/api/introduction.html" class="menuAnchor">C API >|<一个href ="//m.ahtuanjie.com/help/sdk/v22/main/clib/introduction.html" class="menuAnchor">c++类库 >|<一个href ="//m.ahtuanjie.com/help/sdk/v22/dh/javascript/to/introduction.html" class="menuAnchor">HTML5 JavaScript >
医疗<一个href ="//m.ahtuanjie.com/help/sdk/v22/dh/to/medical-features.html" class="menuAnchor">net >|<一个href ="//m.ahtuanjie.com/help/sdk/v22/dicom/api/introduction.html" class="menuAnchor">C API >|<一个href ="//m.ahtuanjie.com/help/sdk/v22/dicom/clib/introduction.html" class="menuAnchor">c++类库 >|<一个href ="//m.ahtuanjie.com/help/sdk/v22/dh/javascript/to/introduction.html" class="menuAnchor">HTML5 JavaScript >
医疗网络查看器<一个href ="//m.ahtuanjie.com/help/sdk/v22/dh/medical/to/introduction.html" class="menuAnchor">net >
188宝金博怎么下载
直接显示<一个href ="//m.ahtuanjie.com/help/sdk/v22/dh/multimedia/to/introduction.html" class="menuAnchor">net >|<一个href ="//m.ahtuanjie.com/help/sdk/v22/multimedia/api/introduction.html" class="menuAnchor">C API >|<一个href ="//m.ahtuanjie.com/help/sdk/v22/multimedia/filters/introduction.html" class="menuAnchor">过滤器 >
媒体基金会<一个href ="//m.ahtuanjie.com/help/sdk/v22/dh/multimedia/mf/introduction.html" class="menuAnchor">net >|<一个href ="//m.ahtuanjie.com/help/sdk/v22/multimedia/mediafoundation/introduction.html" class="menuAnchor">C API >|<一个href ="//m.ahtuanjie.com/help/sdk/v22/multimedia/transforms/introduction.html" class="menuAnchor">转换 >
流媒体<一个href ="//m.ahtuanjie.com/help/sdk/v22/dh/multimedia/ms/introduction.html" class="menuAnchor">net >|<一个href ="//m.ahtuanjie.com/help/sdk/v22/multimedia/mediastreaming/introduction.html" class="menuAnchor">C API >
支持的平台上 p >
.NET、Java、Android和iOS/macOS程序集 p >
C API/ c++类库 p >
HTML5 JavaScript库 p >
您的邮件已发送给技术支持!应该有人联系!如果你的事情很紧急,请回来聊天。 p >< p >聊天时间: p >< p >周一至周五,美国东部时间上午8:30至下午6:00 p >< / div >< divid="form-container" class="hidden-group">
感谢您的反馈! p >< p >请再次填写表格,开始新的聊天。 p >< / div >< divid="offline-container">
所有代理目前都离线。 p >
聊天时间: p >
星期一至星期五 p >
美国东部时间上午8:30 -下午6点 p >< p >如需与我们联系,请填写此表格,我们将通过电子邮件与您联系。 p >< / div >< divid="get-info-form"> 请填写姓名。 需要填写姓氏。 有效的电子邮件必须(e。g example@example.com)。 问题不能是空的。