PDFファイルがiframeのバイト配列から表示されない

Question

私はMVC 5 Visual Studio 15で作業しています。私のアプリケーションでは、バイト配列からiframeにPDFファイルを表示する必要があります。このため私は次のjavascriptを使用しています。しかし、これは動作していません。誰でも私がやっている間違いを教えてください。

$(document).ready(function() { 
     $.ajax({ 
      async: false, 
      cache: false, 
      type: "POST", 
      url: "@(Url.RouteUrl("GetAnyRespons"))", 
      responseType: 'arraybyte', 
      success: function (JsonCP) { 
       var data = JsonCP.responseModel.response.ResponseImage; 
       var file = new Blob([data], { type: 'application/pdf' }); 
       var fileURL = URL.createObjectURL(file); 
       var iframe = document.createElement('iframe'); 
       iframe.className = 'responseframe'; 
       iframe.src = fileURL; 
       $('#response').append(iframe); 
       alert('response Loaded.'); 
      }, 
     error: function (xhr, ajaxOptions, thrownError) { 
      alert(thrownError + ' Failed to retrieve response.'); 
     } 
    }); 
}); 

<div id="container"> 
    <div id="response"> 

    </div> 
    <div id="marks"></div> 
</div> 

他のデータを含むバイト配列は、コントローラによってJSONデータに変換された後にクライアントに渡されます。

[System.Web.Http.HttpPost] 
    public ActionResult GetAnyRespons() 
    { 
     DownloadResponseModel rm = new DownloadResponseModel(); 
     JsonResult jsonResult = Json(rm, JsonRequestBehavior.AllowGet); 
     jsonResult.MaxJsonLength = int.MaxValue; 
     return jsonResult; 
    } 

バイト配列は、次の関数によってデータベースから読み込まれます。

public int getFStreamResponse(System.Guid guid) 
    { 
     SqlConnection sqlConnection = new SqlConnection(); 
     sqlConnection.ConnectionString = "Data  
     Source=HOME\\MSQLEXPRESS2016;Initial Catalog=Evaluation;Integrated 
     Security=True"; 
     sqlConnection.Open(); 
     SqlCommand sqlCommand = new SqlCommand(); 
     sqlCommand.Connection = sqlConnection; 
     sqlCommand.Transaction = sqlConnection.BeginTransaction(); 
     sqlCommand.CommandText = "SELECT GET_FILESTREAM_TRANSACTION_CONTEXT 
     ()"; 
     sqlCommand.CommandType = System.Data.CommandType.Text; 
     byte[] transactionContext = (byte[]) sqlCommand.ExecuteScalar(); 
     SqlParameter parameter; 
     sqlCommand.CommandText = "SELECT [AllPagesAnotted], 
     [MarkedPercentage],[Mark], [RegdNo],[QuestionPaperId],[Assigned], 
     [Evaluated],[ResponseImage].PathName() AS FilePath FROM Responses 
     WHERE [ResponseId] = @Id"; 
     sqlCommand.CommandType = System.Data.CommandType.Text; 
     parameter = new System.Data.SqlClient.SqlParameter("@Id", 
     System.Data.SqlDbType.UniqueIdentifier); 
     parameter.Value = guid; 
     sqlCommand.Parameters.Add(parameter); 
     SqlDataReader reader = sqlCommand.ExecuteReader(); 
     reader.Read(); 
     this.response.AllPagesAnotted =(bool)reader["AllPagesAnotted"]; 
     this.response.MarkedPercentage= (int)reader["MarkedPercentage"]; 
     this.response.Mark= (int)reader["Mark"]; 
     this.response.RegdNo = (string)reader["RegdNo"]; 
     this.response.QuestionPaperId = (int)reader["QuestionPaperId"]; 
     this.response.Assigned = (bool)reader["Assigned"]; 
     this.response.Evaluated = (bool)reader["Evaluated"]; 
     this.response.ResponseId = guid; 
     string filePathInServer = (string)reader["FilePath"]; 
     reader.Close(); 
     SqlFileStream sqlFileStream = new System.Data.SqlTypes.SqlFileStream 
     (filePathInServer, (byte[])transactionContext, 
     System.IO.FileAccess.Read); 
     this.response.ResponseImage = new byte[sqlFileStream.Length]; 
     sqlFileStream.Seek(0L, System.IO.SeekOrigin.Begin); 
     int byteAmount = sqlFileStream.Read   
     (this.response.ResponseImage, 0, (int)sqlFileStream.Length); 
     sqlFileStream.Close(); 
     sqlCommand.Transaction.Commit(); 
     return byteAmount; 
    } 

Answer 1

あなたのAJAX呼び出しは、HTTP GETリクエストを実行し、あなた化するJsonResult GetAnyRespons（）されては、HTTP POSTで飾られています。

Answer 2

pdfの代わりにjpgを使用すると、問題は解決できます。次のコードは、複数ページのjpgを表示します。

$(document).ready(function (JsonCP) { 
     $.ajax({ 
      async: false, 
      cache: false, 
      type: "POST", 
      dataType: "json", 
      url: "@(Url.RouteUrl("GetAnyRespons"))", 
      success: function (JsonCP) { 
       base64String =  
base64js.fromByteArray(JsonCP.responseModel.response.ResponseImage); 
       imgid = 'but1'; 
       span = document.createElement('span'); 
       var but = ($('<input>').attr('type', "image") 
        .attr('id', imgid) 
        .attr('src', "data:image/jpg;base64," + base64String) 
        .attr('width','900px') 
        ).appendTo(span); 
       $('#response1').append(span); 
      }, 
     error: function (xhr, ajaxOptions, thrownError) { 
      alert(thrownError + ' Failed to retrieve response.'); 
     } 
    }); 
}); 

</script> 

</head 
<body> 
    <div class="outerdiv" > 
     <div id="response1" ></div> 
    </div> 
</body> 
</html> 

.outerdiv{ 
    overflow-y: scroll; 
    overflow-x:hidden; 
    height: 1100px; 
    width:900px; 
}