将Razor HTML转换为可下载的PDF

问题描述 投票：1回答：2

我有一个动态过滤的元素表，每个元素都有一组按钮来操作它们。其中一个显示了使用Razor生成的部分HTML以及元素的数据。

表格条目：

foreach (var item in listado.Where(x => x.Raw != null)) {
<tr>
    <td>@item.Id</td>
    <td>@item.Usuario</td>
    <td>@item.NIF_CIF</td>
    <td>
        @if (!(String.IsNullOrEmpty(item.Telefono)) && !(String.IsNullOrWhiteSpace(item.Telefono))) {
            @item.Telefono
        } else {
            @Html.Raw("No disponible")}
    </td>
    <td>@Math.Round(item.Raw.PrecioTotal).ToString("0.##")&nbsp;&euro;</td>
    <td>@item.FechaCreacion.ToShortDateString()</td>
    <td class="btn-group-sm" role="group">
        <button class="eliminar btn btn-secondary btn-danger" data-itemid="@item.Id">Eliminar</button>
        <button class="convertirPDF btn btn-secondary btn-info" data-itemid="@item.Id">PDF</button>
        <button class="detalles btn brn-secondary btn-info" data-itemid="@item.Id">Detalles</button></td>
</tr>
<tr id="vistaDetalles@(item.Id)" hidden>
    <td colspan="7">
        @Html.Partial("_PresupuestoFinal", item)
    </td>
</tr> }

我想要使​​用的元素是在行中生成的

@Html.Partial("_PresupuestoFinal", item)

那么，使用jQuery，我为这些按钮提供了功能。 PDF按钮代码是：

$(".convertirPDF").on("click", function (id) {
    var itemId = $(this).data('itemid');
    var presupuesto = $('#content').html($(this).find('#vistaDetalles' + itemId).html());
    Pdf(presupuesto);
});

function Pdf(presupuesto) {
    presupuestoHTML = presupuesto;

    $.ajax({
        method: "GET",
        url: 'DescargarPDF',
        data: { presupuestoHTML: presupuesto },
        cache: false,
        async: true,
    });
};

但每次按下按钮，我都会进入控制台：

TypeError: can't convert undefined to object

当我调用函数Pdf时参考该行。我想要做的是选择特定的html（与元素对应的那个）并将其转换为PDF文件。由于我无法获得足够的信息来了解错误的位置，我做错了什么？

顺便说一句，url: 'DescargarPDF行指向我控制器中的方法。

编辑

这是我要求的控制器方法：

public void DescargarPDF (string presupuestoHTML) {

        Response.Clear();
        Response.ContentType = "application/pdf";
        Response.AddHeader("content-disposition", "attachment;filename=" + "PDF.pdf");
        Response.Cache.SetCacheability(HttpCacheability.NoCache);

        MemoryStream ms = new MemoryStream();
        TextReader txtReader = new StringReader(presupuestoHTML);

        // Creamos un objeto de clase itextsharp document
        Document doc = new Document(PageSize.A4, 25, 25, 30, 30);

        // Creamos un pdfwriter de itextsharp que lee el documento y dirige un stream XML a un archivo
        PdfWriter oPdfWriter = PdfWriter.GetInstance(doc, ms);

        // Creamos un trabajador para parsear el documento
        HTMLWorker htmlWorker = new HTMLWorker(doc);

        // Abrimos el documento y se lo pasamos al trabajador
        doc.Open();
        htmlWorker.StartDocument();

        // Parseamos el presupuesto en html al documento
        htmlWorker.Parse(txtReader);

        // Cerramos el documento y el trabajador
        htmlWorker.EndDocument();
        htmlWorker.Close();
        doc.Close();

        var bPDF = ms.ToArray();

        Response.BinaryWrite(bPDF);
        Response.End();
    }

该脚本没有命中它。

第二次编辑

所以我得到了更多关于错误的信息：

presupuestoHTML[toArray]

是什么导致错误。不知道在哪里或如何。

显示Adit

好的，所以我现在知道问题是在脚本上检索我想要的html。我换了那条线：

$(".convertirPDF").on("click", function (id) {
    itemId = $(this).data('itemid');
    presupuesto = document.documentElement.getElementsByTagName('vistaDetalles' + itemId);
    Pdf(presupuesto);
});

现在控制台中的错误是：

TypeError: 'item' called on an object that does not implement interface HTMLCollection.

我会继续调查，希望这会让问题更加清晰。

第二次更新

我一直在努力，除了文件下载之外，我得到了一切。我会解释一下：

这是脚本，它使用适当的数据命中控制器方法。

$(".convertirPDF").on("click", function (id) {
    var itemId = $(this).data('itemid');
    // var presupuesto = $('#vistaDetalles' + itemId).html();
    Pdf(itemId);
});

function Pdf(itemid) {
    var id = itemid;

    $.ajax({
        method: "POST",
        url: 'DescargarPDF',
        data: { itemId: id },
        cache: false,
        async: true,
    });
};

这样才行。这是我的控制器方法，我怀疑是由此引起的：

 public FileResult DescargarPDF (int itemId) {
        var presupuesto = ReglasNegocio.Fachada.Consultas.ObtenerPresupuesto(itemId);             
        var archivo = new Rotativa.PartialViewAsPdf("_PresupuestoFinal", presupuesto) { FileName = "Presupuesto_" + itemId + ".pdf" };

        return File(archivo.FileName, "application/pdf");
    }

这是我到目前为止的最后一次尝试。我也尝试过Rotativa的ActionAsPdf，我在浏览器控制台上获得了一个数据流（我猜它是pdf文件）而不是可下载的文件。我还尝试了其他选项，比如将文件转换为字节数组并对其进行流式处理，但由于我不想保存文件，因此该选项被丢弃（函数需要文件路径，我无法提供，因为文件未保存，仍在内存中）。仍在努力。

c# jquery .net ajax asp.net-mvc
2个回答
1
投票

我问另一个question尝试解决不下载文件问题，我得到了它。

在此之前，我正在通过ajax执行请求，因为我认为这是一个很好的方法，但事实证明，有一个更简单的方法：不使用ajax。

所以，我删除了按钮和按钮本身的脚本，所以现在看起来像这样：

<a href="DescargarPDF/[email protected]" target="_blank" class="btn btn-secondary btn-info">PDF</a>

它具有与以前相同的外观，但它实际上是我的控制器方法的链接，现在看起来像这样：

public FileResult DescargarPDF (int itemId) {
        var presupuesto = ReglasNegocio.Fachada.Consultas.ObtenerPresupuesto(itemId);             
        var archivo = new Rotativa.PartialViewAsPdf("_PresupuestoFinal", presupuesto) { FileName = "Presupuesto_" + itemId + ".pdf", PageSize = Rotativa.Options.Size.A4 };
        var binario = archivo.BuildFile(this.ControllerContext);        

        return File(binario, "application/pdf", archivo.FileName);           
    }

我知道在大多数情况下这不是一个有效的解决方案，因为我只是留下了ajax，但还有许多其他问题，答案适用于他们，他们仍然使用ajax来管理请求。

不过，我希望这会有所帮助。谢谢大家。快乐的编码。

UPDATE

我刚刚发现为什么我的PDF文件被放入控制台，检查the other question，我为该特定问题留下了一点解释。感谢大家。

0
投票

你只能使用javascript：

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.