如何使用jQuery DataTable自定义按钮导出水晶报表PDF

时间:2018-08-26 10:19:26

标签: javascript jquery datatable crystal-reports

如果将Crystal Reports导出为PDF,则可以通过将表单提交到Controller方法来完成,但是从jquery datatable自定义按钮调用该方法时,则不能正常工作。请仔细阅读我的代码,并通过单击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 个答案:

答案 0 :(得分:0)

1)做一个函数,只需在按钮操作中调用该函数,即可避免混乱,也可以从其他地方调用

       conda install -c bioconda cufflinks

返回您的pdf的网址,然后用这种方式

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

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

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

和您的控制器中

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

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

iframe还有另一种方法,也可以通过创建iframe并在iframe中打开pdf链接来使用