PDF文件未从iframe中的字节数组显示

Question

我在MVC 5 Visual Studio上工作15.我的应用程序需要在iframe中显示Byte数组中的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

如果我们使用JPG而不是PDF，则可以解决问题。以下代码显示多个页面的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;
 }