[.Net翻译]用MVC构建跨平台的DotNet核心文档扫描系统

177 阅读6分钟

原文地址:www.dynamsoft.com/codepool/as…

原文作者:

发布时间:2020年9月21日

ASP.NET Core可以让C#应用程序在*nix操作系统上运行。在本教程中,我们将使用ASP.NET Core和Dynamic Web TWAIN SDK来构建一个适用于Windows、Linux和macOS的DotNet Core文档扫描应用程序。

准备工作

首先,我们应该在环境中安装Dynamic Web TWAIN。如果你从来没有安装过该库,请参考www.dynamsoft.com/docs/dwt/De…

其次,我们需要安装.NET Core SDK。请注意,开发者需要的是SDK而不是Runtime。下载页面可以访问dotnet.microsoft.com/download。

我们强烈建议Windows开发者使用Visual Studio,因为它可以为我们自动完成一些步骤。

创建ASP DotNet Core文档扫描项目

我们的第一步是创建项目。我们有两种方法来开发项目。

用Visual Studio创建

对于Windows用户来说,创建一个ASP.NET Core MVC应用程序就像倒一个java杯子一样简单。Visual Studio为开发人员提供了一个项目创建指南。当你启动Visual Studio时,你会看到右下角按钮上的欢迎对话框,创建一个新项目。

在欢迎页面选择右侧面板的最后一个选项(入门)。

然后,我们选择ASP.NET Core Web Application,进入下一步。

选择ASP.NET Core Web Application作为模板。

最后,我们要指定项目名称。我们刚刚创建了DotNet Core文档扫描项目,但还没有完成初始化。

用 "dwtDotCore "来命名项目。

在这里,我们推荐使用MVC模型。控制器直接返回扫描视图。因此,我们不需要为我们的Home控制器写任何代码。我们只需要实现一个API来实现后面的文件上传。

使用Model-View-Controller模板初始化ASP.NET Core网络应用。

选择模型并点击 "创建 "按钮后,您就完成了项目的创建。

使用 CLI 创建

Linux用户无法从Visual Studio中获益,但有一个CLI工具可以创建一个项目。

打开一个终端,输入以下命令来创建一个项目。

dotnet new webapp -o dwtDotNet --no-https

该命令的意思是用模板webapp创建一个.NET Core应用程序,该模板是ASP.NET Core MVC的模板,名称为dwtDotNet,并禁用HTTPS。

配置

在进入开发阶段之前,我们需要配置我们的项目,以确保依赖关系能够被正确加载。

复制Web TWAIN SDK的资源文件

资源文件位于你的安装文件夹中,即'C:\Program Files (x86)\Dynamsoft/Dynamic Web TWAIN SDK <版本>'。复制整个Resources文件夹并粘贴到项目文件夹中的'/wwwroot/lib'。最好将 "Resources "重命名为一个有意义的名字,比如 "dwt"。

配置资源路径

Dynamic Web TWAIN依靠额外的脚本和样式表来支持其运行。开发者应该指定这些支持文件的位置。进入复制的文件夹,你会看到一个名为 "dynamsoft.webtwain.config.js "的文件。让我们打开它并进行一些修改。

首先,取消Dynamic.WebTwainEnv.ResourcesPath这一行的comment。然后,把它的值指定为'/wwwroot/lib/dwt',这是动态Web TWAIN的路径。

其次,我们要告诉WebTWAIN关于DOM的名称,其中包含Dynamic Web TWAIN查看器。你可以指定另一个名字或者使用默认的名字。它必须在HTML和config.js之间保持一致。

开发

我们很兴奋,因为我们的配置工作不多,已经全部完成。我们可以开始写下第一行代码了。在编码之前,我先介绍一下项目的结构。

我们项目的项目结构

我们的应用是一个典型的Model-View-Controller应用,其中Controller负责处理请求,并以相应的视图进行响应。模型是我们业务的抽象。在本教程中,我们没有任何数据需要存储,所以模型和数据库是不必要的。需要注意的是,dotnet CLI工具可能不会创建带有控制器、模型和视图的项目。如果你使用的是Linux/macOS,或者喜欢在Windows上使用CLI,你可以以此为参考手动添加,或者参考dotnet-aspnet-codeegenerator工具。我们将在最后附上源代码,以便您也可以根据我们的演示来构建您的应用程序。

我们将在Index.cshtml中实现UI,在HomeController.cs中实现逻辑。

扫描视图的实现

我们删除预定义的代码,并把我们的代码放在Index.cshtml中。

<div class="container-fluid">
    <div id="control-panel">
        <button class="btn btn-primary" onclick="AcquireImage()">Scan</button>
        <br />
        <button class="btn btn-outline-secondary" onclick="Upload()">Upload</button>
        <input type="radio" value="jpg" name="format"/>JPG
        <input type="radio" value="pdf" name="format"/>PDF
        <input type="radio" value="tif" name="format"/>TIFF
        <label for="filename-input">File Name: </label>
        <input type="text" id="filename-input"/>
    </div>
    <div id="dwt-container">

    </div>
</div>

<!-- DWT script here -->
<script src="~/lib/dwt/dynamsoft.webtwain.initiate.js"></script>
<script src="~/lib/dwt/dynamsoft.webtwain.config.js"></script>
<script>
    function AcquireImage() {
        const DWObj = Dynamsoft.WebTwainEnv.GetWebTwain('dwt-container')
        if (DWObj) {
            if (DWObj.UseLocalService) {
                DWObj.SelectSource(function () {
                    var OnAcquireImageSuccess = OnAcquireImageFailure = function () {
                        DWObj.CloseSource()
                    }
                    DWObj.OpenSource()
                    DWObj.IfDisableSourceAfterAcquire = true
                    DWObj.AcquireImage(OnAcquireImageSuccess, OnAcquireImageFailure)
                }, function () {
                    console.log('SelectSource failed')
                })
            } else {
                DWObj.LoadImageEx('', -1)
            }
        }
    }
    function Upload() {
        const host = location.hostname
        const protocol = location.protocol
        const uploadPath = '/api/File'
        let uploadFileName = document.getElementById('filename-input').value
        const port = location.port || (protocol === 'https:' ? 443 : 80)

        var formatSelector = document.getElementsByName('format')
        let format = (selector => {
            let select = ''
            selector.forEach(e => {
                if (e.checked) {
                    select = e.value
                }
            })
            uploadFileName = uploadFileName + '.' + select
            switch (select) {
                case 'jpg': { return Dynamsoft.EnumDWT_ImageType.IT_JPG }
                case 'pdf': { return Dynamsoft.EnumDWT_ImageType.IT_PDF }
                case 'tif': { return Dynamsoft.EnumDWT_ImageType.IT_TIF }
            }
        })(formatSelector)

        let uploadFormat = Dynamsoft.EnumDWT_UploadDataFormat.Binary

        const DWObj = Dynamsoft.WebTwainEnv.GetWebTwain('dwt-container')
        if (DWObj) {
            DWObj.HTTPPort = port
            DWObj.IfSSL = true
            let indices = DWObj.SelectedImagesIndices
            DWObj.HTTPUpload(
                protocol + '//' + host + ':' + port + uploadPath,
                indices,
                format,
                uploadFormat,
                uploadFileName,
                () => { alert('success') },
                (errCode, errStr, res) => {
                    console.error(`${errCode}: ${errStr}. Server return: ${ res }`)
                }
            )
        }
    }
</script>

我们在页面上放置了两个按钮、一个输入框和一组单选框。我们的应用程序将为终端用户提供扫描和上传功能。需要提醒的是,脚本文件必须按顺序加载。另外,你可以从我们产品网站的API文档中找到其他的HTTP上传方式。但我们要把它们统一到HTTPUpload中。最好不要使用其他方法,这样一旦我们废弃了这些API,你就不需要做重大的改动。

在HomeController中,我们不需要做任何操作。为了实现文件上传功能,服务器端应该能够处理文件。我们把它作为一个API来服务客户。右击Controller文件夹,将光标移动到Add选项,然后选择 "New Scaffolded item..."。

选择 "新建脚手架项目 "来创建一个新的控制器。

在弹出的窗口中,我们选择具有读/写操作的API控制器。

创建一个具有读/写操作的API控制器

将控制器命名为 "FileController.cs"

Visual Studio会用一些初始代码创建控制器。我们至今不需要Get、Delete和Put。所以,我们从源代码中删除它们。

然后,我们在Post方法中添加一些代码。不要忘记解决依赖问题。

[Route("api/[controller]")]
    [ApiController]
    public class FileController : ControllerBase
    {
        // POST api/<FileController>
        [HttpPost]
        public async Task<IActionResult> Upload()
        {
            var files = Request.Form.Files;
            var path = Path.Combine(Directory.GetCurrentDirectory(), "Upload");
            if (!Directory.Exists(path))
            {
                try
                {
                    Directory.CreateDirectory(path);
                }
                catch (Exception e)
                {
                    Debug.WriteLine(e.StackTrace.ToString());
                    return Unauthorized("not able to create");
                }
            }
            foreach (var uploadFile in files)
            {
                var fileName = uploadFile.FileName;
                using (var stream = System.IO.File.Create(Path.Combine(path, fileName)))
                {
                    await uploadFile.CopyToAsync(stream);
                }
            }
            return Ok();
        }
    } 

测试DotNet核心文档扫描

现在,我们已经完成了所有的实施工作。现在是时候检查我们的成果了。

在Visual Studio中,只需点击工具栏上的 "运行 "按钮即可运行应用程序。

点击带有 "IIS Express "标签的运行按钮,运行该项目。

或者,CLI用户只需输入以下命令来启动你的应用程序。

dotnet restore
dotnet run

当服务启动后,你会看到以下页面。

成功加载Web TWAIN SDK的应用程序的第一页。

点击 "扫描 "按钮选择扫描源。

从源头扫描文件

DotNet核心文件上传

并在您的上传目的地文件夹中看到您上传的文件。

上传的文件位于指定的

源代码 github.com/dynamsoft-d…


www.deepl.com 翻译