本教程展示如何在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)。 问题不能是空的。