建立一个将文件扫描为PDF的网页

在这里插入图片描述
如果您正在开发需要处理不同的数字文件格式功能的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;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试用包中找到确切的代码示例。

大名软件

发布了6 篇原创文章 · 获赞 0 · 访问量 1376

私信关注