如何在 ASP.NET Web API 和 AngularJS 中下载 XML 文件

本文将介绍如何在 ASP.NET Web API 和 AngularJS 中下载 XML 文件。

ASP.NET Web API

步骤 1：创建 Web API 控制器

首先，我们需要创建一个 ASP.NET Web API 控制器，用于提供 XML 文件的下载功能。可以使用以下代码创建一个简单的控制器：

public class XmlController : ApiController
{
    public HttpResponseMessage Get()
    {
        var xmlFilePath = HttpContext.Current.Server.MapPath("~/App_Data/sample.xml");

        var response = new HttpResponseMessage(HttpStatusCode.OK);
        var stream = new MemoryStream(File.ReadAllBytes(xmlFilePath));
        response.Content = new StreamContent(stream);
        response.Content.Headers.ContentType = new MediaTypeHeaderValue("application/xml");
        response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment")
        {
            FileName = "sample.xml"
        };

        return response;
    }
}

• 在上述代码中，我们首先获取 XML 文件的物理路径。
• 然后，我们创建一个 HttpResponseMessage 对象，并将 XML 文件内容作为其内容。
• 我们还设置了响应的内容类型和文件名，以确保浏览器将下载 XML 文件。

步骤 2：测试控制器

现在我们可以测试我们的控制器。在此之前，请确保将 sample.xml 文件添加到应用程序的 App_Data 文件夹中。然后使用浏览器或者 curl 命令访问 /api/xml URL，应该可以下载 sample.xml 文件。

AngularJS

步骤 1: 创建下载服务

在 AngularJS 中，我们需要创建一个服务，用于下载 XML 文件。可以使用以下代码创建一个简单的下载服务：

myApp.service('DownloadService', function ($http, $q) {
    var downloadXml = function () {
        var deferred = $q.defer();

        $http.get('/api/xml', { responseType: 'arraybuffer' })
            .then(function (response) {
                var blob = new Blob([response.data], { type: 'application/xml' });
                var url = URL.createObjectURL(blob);
                deferred.resolve({ url: url, filename: 'sample.xml' });
            }, function (error) {
                deferred.reject(error);
            });

        return deferred.promise;
    };

    return {
        downloadXml: downloadXml
    };
});

• 在上述代码中，我们使用了 $http 服务来获取 XML 文件。
• 我们使用 responseType: 'arraybuffer' 选项，以确保我们可以将响应数据作为二进制数组获取。
• 然后，我们将响应数据转换为 Blob，并使用 URL.createObjectURL() 方法创建该 Blob 的 URL。
• 最后，我们返回一个包含 URL 和文件名的承诺对象。

步骤 2: 控制器中调用下载服务

现在我们可以在控制器中调用下载服务并触发下载。例如：

myApp.controller('MyController', function ($scope, DownloadService) {
    $scope.downloadXmlFile = function () {
        DownloadService.downloadXml()
            .then(function (response) {
                var link = document.createElement('a');
                link.href = response.url;
                link.download = response.filename;
                link.click();
            }, function (error) {
                console.log('Error downloading XML file:', error);
            });
    };
});

• 在上述代码中，我们首先在控制器中注入了 DownloadService 服务。
• 然后，我们在 downloadXmlFile() 函数中调用 downloadXml() 方法，并将其返回的 URL 和文件名用于创建一个 <a> 标签，并模拟点击该标签以触发下载。

结论

在本文中，我们介绍了如何在 ASP.NET Web API 和 AngularJS 中下载 XML 文件。我们学习了如何创建 Web API 控制器来提供 XML 文件下载，并创建了一个简单的 AngularJS 服务，以便在控制器中调用并触发下载。