the pdf file is not displayed from byte array in the iframe

Question

I am working on MVC 5 visual studio 15. My application needs to display a PDF file from byte array in an iframe. For this I am using following javascript. But this is not working. Anyone please tell me the mistake I am doing.

 $(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>

The byte array with some other data is passed to client after converting into JSON data by the controller.

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

The byte array is read from the database by the following function.

 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

The problem can be solved, if we use jpg instead of pdf. The following code displays jpg of multiple pages.

$(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;
 }