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

Question

如果通过向控制器方法提交表单完成，将 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'
        },
]

Answer 1

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

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

返回你的 pdf 的 url 然后这样做

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 并在 iframe 中打开您的 pdf 链接来使用它