Question

我使用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数据，或者甚至是否可能。

Answer 1

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

您有2个选项。

a）使用srcdoc attribute（如果您只需要支持最近的浏览器）。

b）从数据构造data URI并将其用作src

下面是一个概述两种方法的演示

＆＃13;

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
  }));

});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js">
</script>
<div id=target></div>

＆＃13;

编辑：

当然，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();
})

Answer 2

有许多解决方案和解决方法。我将指出两个可靠的解决方案。

解决方案1：

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

第2步：将该URL作为AJAX调用的响应传递。

第3步：获取ajax响应并设置为iframe并显示iframe 在这个SO答案中有很多方法可以预览pdf。

参考：

Recommended way to embed PDF in HTML?

Display PDF using an AJAX call

您可以使用下面的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非常适合。

参考：
Download and open pdf file using Ajax

在C＃Mvc中使用ajax调用在屏幕上显示Pdf

2 个答案: