使用 ASP.NET httpHandler 响应 AJAX 请求，返回文件的 base64 字符串作为响应

Question

我想使用 AJAX 下载多种类型的文件。

我决定使用 AJAX 生成一个以文件名作为查询字符串的获取请求，并将响应作为 base64 字符串获取，然后将其转换为 blob 对象并使用超链接a 标记和下载属性下载/保存它。

请帮助我，如何使用优化的方式/代码将文件转换为base64字符串，然后将base64字符串恢复为blob？

Answer 1

ASP.Net httpHandler 代码在这里：

Imports System
Imports System.Web
Imports System.IO
Public Class FileDownload : Implements IHttpHandler
Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
    Dim Request As HttpRequest = context.Request
    Dim Response As HttpResponse = context.Response
    Dim serverFile As String = Request.QueryString("filename")
    Dim filePath As String = String.Empty
    filePath = context.Server.MapPath("~") & "\" & serverFile
    Dim file As New System.IO.FileInfo(filePath)
    Try
        If (file.Exists) Then
            Response.Clear()
            Response.ClearContent()
            Using reader As New FileStream(filePath, FileMode.Open, IO.FileAccess.Read, IO.FileShare.Read)
                Dim buffer As Byte() = New Byte(reader.Length - 1) {}
                reader.Read(buffer, 0, CInt(reader.Length))
                Response.Write(Convert.ToBase64String(buffer))
            End Using
            Response.Flush()
            Response.End()
        Else
            Response.Write("File Not Found!")
            Response.StatusCode = 500
        End If
    Catch ex As Exception
        Response.Write(ex.ToString)
        Response.StatusCode = 500
        context.ApplicationInstance.CompleteRequest()
    End Try
End Sub
Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
    Get
        Return False
    End Get
End Property
End Class

以 httphadler 的应用程序路径作为 url 和客户端文件名作为文件名调用的 Javascript 函数

function downloadFileByAjax(filename, url) {
$.ajax({
    type: 'GET',
    url: url,
    responseType: 'arraybuffer',
    downloadid: filename,
    success: function (result, status, xhr) {
        var octetStreamMime = 'application/octet-stream';
        var filename = this.downloadid;
        var contentType = xhr.getResponseHeader('content-type') || octetStreamMime;
        var a = document.createElement('a');
        var urlCreator = window.URL || window.webkitURL || window.mozURL || window.msURL;
        if (urlCreator && window.Blob && ('download' in a) && window.atob) {
            var blob = base64ToBlob(result, contentType);
            var url = window.URL.createObjectURL(blob);
            a.setAttribute('href', url);
            a.setAttribute("download", filename);
            var event = document.createEvent('MouseEvents');
            event.initMouseEvent('click', true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
            a.dispatchEvent(event);
            //window.URL.revokeObjectURL(url);
        }
    },
    error: function (xhr, msg, error) {
        //console.log(xhr, msg, error);
        //console.log(xhr.responseText);
        console.log(msg);
    },
    complete: function (xhr, status) {
        //console.log('completed');
    }
});
}
function base64ToBlob(base64, mimetype, slicesize) {
if (!window.atob || !window.Uint8Array) {
    console.log('The current browser doesnot have the atob function. Cannot continue');
    return null;
}
mimetype = mimetype || '';
slicesize = slicesize || 512;
var bytechars = atob(base64);
var bytearrays = [];
for (var offset = 0; offset < bytechars.length; offset += slicesize) {
    var slice = bytechars.slice(offset, offset + slicesize);
    var bytenums = new Array(slice.length);
    for (var i = 0; i < slice.length; i++) {
        bytenums[i] = slice.charCodeAt(i);
    }
    var bytearray = new Uint8Array(bytenums);
    bytearrays[bytearrays.length] = bytearray;
}
return new Blob(bytearrays, { type: mimetype });
}

Answer 2

要将文件转换为 base64 字符串，请使用以下代码

string data;
using (FileStream fs = new FileStream(dir + fileName, FileMode.Open, FileAccess.Read)) {
    byte[] buffer = new byte[fs.Length];
    fs.Read(buffer, 0, (int)fs.Length);
    data = Convert.ToBase64String(buffer);
    fs.Close();
}
return data;

在ajax调用的成功函数中，使用以下代码将字符串转换为blob

var byteCharacters = atob(data);
var byteNumbers = new Array(byteCharacters.length);
for (var i = 0; i < byteCharacters.length; i++) {
  byteNumbers[i] = byteCharacters.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
var blob = null;
blob = new Blob([byteArray], { type: 'text/plain' });
blob = new Blob([byteArray], { type: 'application/pdf;base64' });
var blobUrl = URL.createObjectURL(blob);

根据文件格式，您可以指定 blob 的类型属性，然后将 blobUrl 作为源分配给您的锚标记