如果您正在开发需要处理不同的数字文件格式功能的Web应用程序,没准PDF将是一个必须具备的文件格式。 将文本和图形页面转换为PDF会生成一个压缩且视觉清晰的文件,通常可以使用Adobe Reader在PC或Mac上读取该文件。
要从扫描仪获取文档,您的Web应用程序需要能够通过某些扫描协议与扫描仪进行通讯。 这使你有两个选择:
- 花费大量时间和精力找出TWAIN标准
- 使用可用的现成第三方SDK
考虑到使用第三方SDK的便利性和便利性,对比研究新协议的时间和学习曲线的艰巨性,建议您选择SDK。 如果您希望腾出时间并专注于项目,而不是将注意力转移到可能会增加项目时间或项目周期的任务上,那么使用SDK是合理的。
Dynamic Web TWAIN是市场上行业领先的TWAIN文档扫描SDK。它已经被包括IBM,洛克希德·马丁,英特尔,三星,NASA,迪斯尼,梅赛德斯·奔驰等众多世界500强公司使用。Dynamic Web TWAIN以易于集成和用户友好着称。在5分钟或更短的时间内,您可以构建一个网页,以将文件扫描为PDF格式。
在本教程中,我们将逐步向您展示如何构建一个简单的HTML页面来扫描文档并将其另存为PDF文件。
四个简单步骤:
- 启动一个Web应用程序
- 将Dynamic Web TWAIN添加到HTML页面
- 使用Dynamic Web TWAIN扫描或加载图像
- 将图像另存为PDF文件
步骤1:启动一个Web应用程序
下载免费的Dynamic Web TWAIN 30天试用版。
安装后,默认情况下可以在C:\Program Files (x86)\Dynamsoft\Dynamic Web TWAIN SDK 15.3.1 Trial中找到它。
1. 将Dynamsoft的Resources文件夹复制到您的项目中
通常可以从以下位置复制Resources文件夹
C:\Program Files (x86)\Dynamsoft\Dynamic Web TWAIN SDK {Version Number} {Trial}\
请注意,这里有三个文件夹:
- Documents 帮助文档和开发者指南
- Resources 构建扫描网页所需的SDK文件
- Samples 动态Web TWAIN样本
创建一个空的HTML页面
请把空白的html页面和Resources文件夹放在一起,如下所示:
步骤2:将Dynamic Web TWAIN添加到HTML页面
2.1 在<head>
中包含两个Dynamsoft的JS文件。
<script type="text/javascript" src="Resources/dynamsoft.webtwain.initiate.js"></script>
<script type="text/javascript" src="Resources/dynamsoft.webtwain.config.js"></script>
2.2 将Dynamic Web TWAIN容器添加到<body>
中。
<div id="dwtcontrolContainer" ></div>
//
Note: " dwtcontrolContainer" is the default id for the div. You can change it in the dynamsoft.webtwain.config.js if necessary.
步骤3:使用Dynamic Web TWAIN扫描或加载图像
将扫描和加载按钮添加到页面:
<input type="button" value="Scan" onclick="AcquireImage();" />
<input type="button" value="Load" onclick="LoadImage();" >
并添加函数AcquireImage()
和LoadImage()
。 注意LoadImage()
如何通过回调函数OnSuccess()
和OnFailure()
处理成功和失败:
function AcquireImage() {
if (DWObject) {
DWObject.SelectSource();
DWObject.OpenSource();
DWObject.IfDisableSourceAfterAcquire = true; // Scanner source will be disabled/closed automatically after the scan.
DWObject.AcquireImage();
}
}
//Callback functions for async APIs
function OnSuccess() {
console.log('successful');
}
function OnFailure(errorCode, errorString) {
alert(errorString);
}
function LoadImage() {
if (DWObject) {
DWObject.IfShowFileDialog = true; // Open the system's file dialog to load image
DWObject.LoadImageEx("", EnumDWT_ImageType.IT_ALL, OnSuccess, OnFailure); // Load images in all supported formats (.bmp, .jpg, .tif, .png, .pdf). OnSuccess or OnFailure will be called after the operation
}
}
步骤4:将图像另存为PDF文件
我们现在还剩1分钟,不是吗?现在,我们已经有两个选项可以将文档加载到Dynamic Web TWAIN中:
- 从扫描仪扫描文档(
AcquireImage()
); - 或加载本地硬盘文档(
LoadImage()
)。
现在是时候向网页添加保存按钮了:
<input type="button" value="Save" onclick="SaveWithFileDialog();" />
添加将文档保存到PDF的逻辑:
function SaveWithFileDialog() {
if (DWObject) {
if (DWObject.HowManyImagesInBuffer &amp;amp;amp;amp;gt; 0) {
DWObject.IfShowFileDialog = true;
DWObject.SaveAllAsPDF("DynamicWebTWAIN.pdf", OnSuccess, OnFailure);
}
}
}
现在,保存文件。
就是这样。恭喜您刚刚在5分钟内建立了一个网页,该网页可以扫描或加载文档并将其另存为PDF文件。
您可以在浏览器中打开HelloWorld.html并对其进行测试。
您可以加载本地文档或将文档扫描到网页中。让我们尝试扫描。这是单击“Scan”按钮时页面的外观:
请注意,“Select Source”对话框中只会列出兼容TWAIN的扫描仪。 如果您手边没有真正的扫描仪,则可以安装虚拟扫描仪进行测试,这就是我所做的。 如果您有扫描仪,但没有显示在列表中,请查看本文以获取解决方案。
示例页面执行扫描后,它看起来像这样:
当然,您可以通过单击“Save”按钮将其另存为PDF文件。
这是该页面的完整代码示例:
<html>
<head>
<title>Hello World</title>
<script src="Resources/dynamsoft.webtwain.initiate.js"> </script>
<script src="Resources/dynamsoft.webtwain.config.js"> </script>
</head>
<body>
<input type="button" value="Scan" onclick="AcquireImage();" />
<input type="button" value="Load" onclick="LoadImage();" />
<input type="button" value="Save" onclick="SaveWithFileDialog();"/>
<div id="dwtcontrolContainer"></div>
<script type="text/javascript">
var DWObject;
function Dynamsoft_OnReady() {
DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');
}
function AcquireImage() {
if (DWObject) {
DWObject.SelectSource(function () {
DWObject.OpenSource();
DWObject.AcquireImage();
},
function () {console.log("SelectSource failed!"); });
}
}
function LoadImage() {
if (DWObject) {
DWObject.IfShowFileDialog = true; // Open the system's file dialog to load image
DWObject.LoadImageEx("", EnumDWT_ImageType.IT_ALL, OnSuccess, OnFailure); // Load images in all supported formats (.bmp, .jpg, .tif, .png, .pdf). OnSuccess or OnFailure will be called after the operation
}
}
function OnSuccess() {
console.log('successful');
}
function OnFailure(errorCode, errorString) {
alert(errorString);
}
function SaveWithFileDialog() {
if (DWObject) {
if (DWObject.HowManyImagesInBuffer > 0) {
DWObject.IfShowFileDialog = true;
DWObject.SaveAllAsPDF("DynamicWebTWAIN.pdf", OnSuccess, OnFailure);
}
}
}
</script>
</body>
</html>
更进一步
上面的例子很简单,功能也很好。 但是有时候,您可能希望将事情做得更进一步。 例如,如何自动将文档另存为PDF而无需手动单击“Save”按钮呢?
使用Dynamic Web TWAIN的event机制,实际上很容易做到。
Dynamic Web TWAIN提供了许多event供用户订阅。 当达到某些触发点时将触发事件。 例如,我们有一个OnMouseClick事件用于单击鼠标,一个OnPostTransfer事件用于传输一个图像结束,等等。
因此,在函数Dynamsoft_OnReady()
的末尾,只需添加:
if (DWObject) {
DWObject.RegisterEvent('OnPostAllTransfers', SaveWithFileDialog);
}
这样就可以了。
总结
这是一个简单的示例,向您展示如何使用Dynamic Web TWAIN扫描文档并将其另存为PDF文件。 如果您想了解有关Dynamic Web TWAIN如何帮助您的项目的更多信息,建议您阅读开发人员指南。
在评论中让我知道您的想法和问题。
P.S. 如果您需要保存为其他图像格式,例如BMP,JPEG,TIFF,则可以在Dynamic Web TWAIN试用包中找到确切的代码示例。