将文件数据从.Net后端传递到Javascript前端

时间:2015-05-29 15:02:50

标签: javascript jquery .net vb.net

我在一台服务器上有一个.Net(VB / C#)后端,在另一台服务器上有一个javascript / jquery前端。我试图通过将.Net中的文件作为字节数组读取,将文件数据从后端传递到前端,将其转换为base64字符串并将其传递给js前端以及指示文件类型的变量

一旦数据在js前端,我尝试将base64字符串转换为文件blob,以便使用readAsDataURL()读取它,以便它可以显示在iframe中或由客户端下载。

为了测试我正在使用pdf文件。传递数据的过程有效,但pdf查看器无法识别文件数据。 iframe加载了查看器,但是我收到一条关于文件未被识别为pdf文件的消息。

我已经做了一个搜索的语调,并通过搜索stackoverflow得到了很多问题,但这让我望而却步。

我们非常感谢任何建议。谢谢。

更新 这是我的VB.Net代码:

     Sub OnReadFileToViewer(ByVal filePath As String)
        Dim okToView As Boolean = False
        Dim fileBLOB As String = String.Empty
        Dim fileEncoded As String = String.Empty
        If (file.Exists(filePath)) Then
            Try
                Using fRead As FileStream = New FileStream(filePath, FileMode.Open, FileAccess.Read)
                    Dim bytes() As Byte = New Byte((CType(fRead.Length, Integer)) - 1) {}
                    Dim numBytesToRead As Integer = CType(fRead.Length, Integer)
                    Dim numBytesRead As Integer = 0

                    While (numBytesToRead > 0)
                        ' Read may return anything from 0 to numBytesToRead.
                        Dim n As Integer = fRead.Read(bytes, numBytesRead, _
                            numBytesToRead)
                        ' Break when the end of the file is reached.
                        If (n = 0) Then
                            Exit While
                        End If
                        numBytesRead = (numBytesRead + n)
                        numBytesToRead = (numBytesToRead - n)

                    End While
                    numBytesToRead = bytes.Length
                    fileEncoded = System.Convert.ToBase64String(bytes)
                End Using
                okToView = True
            Catch ex As Exception
                '
            End Try
        End If

        If (okToView) Then
            ' Code to send data to js fron-end
        End If

    End Sub

我的js前端用于将base64字符串转换为BLOB和iframe预览:

    function PreviewFile(file) {
      var fileBlob = b64toBlob(file,'application/pdf','');
      var reader = new FileReader();
      var fileType = e.target.getAttribute("type");
      alert(fileType);
      reader.onload = function (e) {
         if (fileType)
           $("#fileViewerDiv").append('<iframe id="fileVieweriFrame" class="fileViewer"></iframe>'); // + e.target.result + '">');
           $("#fileVieweriFrame").attr('src', file); //e.target.result);
           $("#fileVieweriFrame").dialog();
          }
     reader.readAsDataURL(fileBlob);
    }

    function b64toBlob(b64Data, contentType, sliceSize) {
      contentType = contentType || '';
      sliceSize = sliceSize || 512;

      var byteCharacters = atob(b64Data);
      var byteArrays = [];

      for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
          var slice = byteCharacters.slice(offset, offset + sliceSize);

          var byteNumbers = new Array(slice.length);
          for (var i = 0; i < slice.length; i++) {
             byteNumbers[i] = slice.charCodeAt(i);
          }

          var byteArray = new Uint8Array(byteNumbers);

          byteArrays.push(byteArray);
       }

      var blob = new Blob(byteArrays, {type: contentType});
      return blob;
 }

警报(fileType)确实显示正确的文件类型 - application / pdf。

我不得不承认我从某个博客处解除了b64toBlob()函数,但我忘记了哪一个并且丢失了网站的URL。我向原作者道歉。如果有人认出代码并且知道作者/网站,请告诉我

修改 b64toBlob()作者:Jeremy Banks - Based on this SO answer

0 个答案:

没有答案