如何使用jquery数据表自定义按钮导出水晶报告pdf

Posted 2021-04-20

如果通过表单提交到控制器方法，将Crystal Reports导出为PDF工作正常，但在从jquery数据表自定义按钮调用方法时无效。请通过单击jquery数据表自定义按钮来查看我的代码并帮助下载pdf。

控制器方法：

public ActionResult ExportToPDF(string p1, string p2, string p3, string p4)
    {
        List<ViewModels.SomeVM> someVMs = DBTasks.GetSomeVMs(p1, p2, p3, p4);

        ReportDocument rd = new ReportDocument();
        rd.Load(Path.Combine(Server.MapPath("~/Reports"), "Something.rpt"));
        rd.SetDataSource(someVMs);
        //rd.SetParameterValue("@p1", p1);
        //rd.SetParameterValue("@p2", p2);
        //rd.SetParameterValue("@p3", p3);
        //rd.SetParameterValue("@p4", p4);

        Response.Buffer = false;
        Response.ClearContent();
        Response.ClearHeaders();

        Stream stream = rd.ExportToStream(CrystalDecisions.Shared.ExportFormatType.PortableDocFormat);
        stream.Seek(0, SeekOrigin.Begin);

        return File(stream, "application/pdf", "Something.pdf");
    }

使用表单提交，这很好。

视图中的表单代码：

@using (html.BeginForm("ExportToPDF", "ControllerName", FormMethod.Get))
{
    @Html.DropDownList("p1", (SelectList)ViewBag.p1List, "Select P1")
    @Html.DropDownList("p2", (SelectList)ViewBag.p2List, "Select P2")
    @Html.DropDownList("p3", (SelectList)ViewBag.p3List, "Select P3")
    @Html.DropDownList("p4", (SelectList)ViewBag.p4List, "Select P4")
    <input type="submit" value="Show" id="showButton" />
}

但是我想用jquery自定义按钮来做这个。请帮我纠正以下代码。

jQuery数据表按钮配置：

// Show buttons for Export and Copy
    "buttons": [
        {
            text: 'Export',
            action: function (e, dt, node, config) {
                $.ajax({
                    "url": "/ControllerName/ExportToPDF",
                    "type": "GET",
                    "data": {
                        "p1": $("#p1").val(),
                        "p2": $("#p2").val(),
                        "p3": $("#p3").val(),
                        "p4": $("#p4").val()
                    }
                });
            }
        },
        {
            extend: 'copyHtml5',
            text: 'Copy',
            titleAttr: 'Copy'
        },
]

答案

1）创建一个函数，只需在按钮动作中调用该函数，以避免混乱，也可以从其他地方调用

        {
            text: 'Export',
            action: function (e, dt, node, config) {
               downloadpdf();
            }

返回你的pdf的网址，然后这样做

function downloadpdf(){
      $.ajax({
          "url": "/ControllerName/ExportToPDF",
          "type": "GET",
          "data": {// your data
           },
          xhrFields: {
            responseType: 'blob'
          },
   beforeSend: function ()
    {
         // loader start
        App.blockUI({animate: true}); 
    },
    error: function () {
        App.unblockUI();

    },
    success: function (objJson) {
            App.unblockUI();
            var a = document.createElement('a');
            var url = window.URL.createObjectURL(data);
            a.href = url;
            a.download = 'myfile.pdf'; //  name you want to give
            a.click();
            window.URL.revokeObjectURL(url);
        }
    });
}

2）还有另一种方法是创建一个表单，并提交它然后它不是ajax，我用它来导出csv和excel，

   $('<form>', {
        "id": "mypdf",
        "html": '<input type="hidden" name="ids" value="test" />', // any extra params
        "action": 'ExportToPDF',
        "method":'POST'
    }).appendTo(document.body).submit();

    $('#exportcsvform').remove();

并在你的控制器

public function actionExportcsv() {
        header('content-type: application/pdf');
        header('Content-Disposition: attachment;filename="export.pdf"');

        // code for your pdf

        exit();
    }

还可以通过创建iframe并在iframe中打开您的pdf链接，使用iframe的另一种方式