在c# Mvc中使用ajax调用在屏幕上显示Pdf

本文关键字：屏幕 显示 Pdf 调用 Mvc ajax | 更新日期: 2023-09-27 18:07:01

我正在使用ItextSharp使用html到Pdf生成Pdf。我想在屏幕上显示Pdf的预览，以便用户可以看到它。用户将能够玩周围的html和得到所需的结果pdf。我正在正确生成pdf，但在屏幕上显示时遇到问题。

Ajax调用:

 function Preview() 
 {
    var HtmlInfo = document.getElementById('HtmlToBarCodes').value;
    $.ajax({
        url: '/BarCodeGenerator/PreviewPDF',
        type: 'POST',
        cache: false,
        data: { Html: HtmlInfo },
        success: function (data) {
            Loading = false;
            $("#pdfResult").html(
                $('<iframe>', {
                    src: data,
                    width: '600px',
                    height: "800px"
                }));
        },
        error: function (x) {
            Loading = false;
        }
    });
}
控制器

[HttpPost]
[ValidateInput(false)]
public FilePathResult PreviewPDF(string Html)
{
        FileStream fs = null;
        string pdfFilePath = "";
        try
        {
            //ItextSharp, Html -> Pdf
            pdfFilePath = BLL.GenerateBarCodes.GenerateBarcodes(Html, 5);
            Response.ClearHeaders();
            Response.ClearContent();
            Response.Buffer = true;
            Response.AppendHeader("Content-Disposition", "inline; attachment; filename=Preview.pdf");
            Response.ContentType = "application/pdf";
            Response.WriteFile(pdfFilePath);
            Response.Flush();
            Response.End();

            //fs = new FileStream(pdfFilePath, FileMode.Open, FileAccess.Read);

        }
        catch (Exception ex)
        {
            //ToDo: log error
        }
        return File(pdfFilePath, "application/pdf", "Preview.pdf");
    }

我可以确认Pdf正在生成和保存在我的C:Temp文件夹中，我也可以查看它，但是当我点击预览时，我得到的都是空白。我不确定如何从ajax调用加载pdf数据，或者如果它甚至是可能的。

在c# Mvc中使用ajax调用在屏幕上显示Pdf

有许多解决方案和变通方法。我将指出两个解决方案。

解决方案1:

步骤1:在后端生成PDF并保存在服务器位置。该pdf可以通过URL访问。

步骤2:传递URL作为AJAX调用的响应。

步骤3:获得ajax响应并设置为iframe并显示iframe在这个答案中有很多预览pdf的方法。

引用:

在HTML中嵌入PDF的推荐方法?

使用AJAX调用显示PDF

你可以使用下面的jquery代码显示你的pdf 

var iframe = $('<iframe>');
iframe.attr('src','http://www.pdf995.com/samples/pdf.pdf');
$('#targetDiv').append(iframe);

解决方案2:使用标签。请通读这篇文章。

您不一定需要Ajax。如果在服务器端代码中将内容配置设置为附件，那么只需一个链接就足够了。通过这种方式，父页面将保持打开状态，如果这是您主要关心的问题(否则为什么要不必要地选择Ajax呢?)此外，没有办法以异步方式很好地处理这个问题。PDF不是字符数据。它是二进制数据。你不能做像$(element).load()这样的事情。您需要为此使用全新的请求。pdf是非常合适的。

参考:


使用Ajax下载并打开pdf文件

iframe src属性需要一个URI，而不是填充iframe的原始数据。

你有两个选择

a)使用srcdoc属性(如果你只需要支持最新的浏览器)。

b)从数据构造一个数据URI并使用它作为src

下面是两种方法的示例

var data = "<html><body>hello world</body></html>"
$(function() {
  $("#target").append($("<iframe>", {
    srcdoc: data
  }));
  var dataUri = "data:text/html;base64," + btoa(data);
  $("#target").append($("<iframe>", {
    src: dataUri
  }));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js">
</script>
<div id=target></div>

编辑:

当然，pdf是二进制格式。您可以下载一个blob，创建一个数据URI并获胜!

$(function() {
    var oReq = new XMLHttpRequest();
    oReq.open("GET", "/somedoc.pdf", true);
    oReq.responseType = "blob";
    oReq.onload = function (oEvent) {
        var blob = oReq.response;
        var url = URL.createObjectURL(blob);
        $("#target").append($("<iframe>", { src: url }));
    };
    oReq.send();
})
相关文章：