HTML视图页面使用roatativa另存为PDF

时间:2015-11-03 06:10:42

标签: c# html asp.net-mvc asp.net-mvc-3 rotativa

我有以下图片中的 Create_Brochure ActionResult in Brochure Contrller Class

enter image description here

这里是该Action的整个网址

http://localhost:49669/Brochure/Create_Brochure?%5B0%5D.Property_ID=1&%5B0%5D.IsChecked=true&%5B0%5D.IsChecked=false&%5B1%5D.Property_ID=2&%5B1%5D.IsChecked=true&%5B1%5D.IsChecked=false&%5B2%5D.Property_ID=3&%5B2%5D.IsChecked=true&%5B2%5D.IsChecked=false&%5B3%5D.Property_ID=4&%5B3%5D.IsChecked=false&%5B4%5D.Property_ID=5&%5B4%5D.IsChecked=false&%5B5%5D.Property_ID=6&%5B5%5D.IsChecked=false&%5B6%5D.Property_ID=7&%5B6%5D.IsChecked=false&%5B7%5D.Property_ID=8&%5B7%5D.IsChecked=false&%5B8%5D.Property_ID=9&%5B8%5D.IsChecked=false&%5B9%5D.Property_ID=10&%5B9%5D.IsChecked=false

点击后,我想将此视图页面另存为PDF,为此,我按照this tutorial

进行操作

所以这是cshtml视图页面,所以它没有模型类

@model IEnumerable<int>

@{
    ViewBag.Title = "Create Template";
}
<!DOCTYPE html>
<html>
<head>
    <title>Create a Template</title>
</head>
<body>



                <div style="width:100%; padding:10px; float:left;">


                    <table width=1100 cellpadding=10>
                        <tr>
                            <td colspan="2">
                                <div id="topper" style="font-family:'Segoe UI';background-color: black;color: white;clear: both;text-align: center;padding: 5px;border-radius:15px 15px 0px 0px;">
                                    Bank Brochure
                                </div>
                            </td>
                        </tr>

                       @if (Model.Contains(1))
                        {
                            <tr>
                                <td colspan="2">
                                    <div id="header" style="font-family: 'Segoe UI';background-color: slategray; color: white; text-align: center; padding: 5px;">
                                        <h1 style="font-family: 'Segoe UI'; color: black; text-align: center;" contentEditable='True'>Product Name</h1>
                                    </div>
                                </td>
                            </tr>
                        }

                        @if (Model.Contains(2))
                        {
                            <tr>
                                <td colspan="2" style="background-color:lightgrey">
                                    <div id="header" style="font-family: 'Segoe UI';color: white; text-align: center; padding: 5px;border-radius">
                                        <h2 style="font-family: 'Segoe UI'; color: black;float:left" contentEditable='True'>Product Description</h2>
                                        <p  style="font-family: 'Segoe UI'; color: black;float:left" contentEditable='True'>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.Standing on the River Thames London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
                                    </div>
                                </td>
                            </tr>
                        }

                        @if (Model.Contains(3))
                        {
                            <tr>
                                <td colspan="2">
                                    <div id="header" style="font-family: 'Segoe UI';background-color: steelblue; color: white; text-align: center; padding: 5px;">
                                        <h3 style="font-family: 'Segoe UI'; color: white; text-align: center;font-style:italic" contentEditable='True'>"Unique Selling Propositions It enables ASP.NET Web developers to replace any textbox with an intuitive Word-like WYSIWYG html editor.
"</h3>
                                    </div>
                                </td>
                            </tr>
                        }

                        @if()....

                        <tr>
                            <td colspan="2">
                                <div id="footer" style="font-family:'Segoe UI';background-color: black;color: white;clear: both;text-align: center;padding: 5px;border-radius:0px 0px 15px 15px;">
                                    Copyright © 2015 Zoo Group , Solution by kelum.
                                </div>
                            </td>
                        </tr>
                    </table>

                </div>

    <br />
    <button id="btn_sumbit" type="button" class="btn btn-danger submit">Save as PDF</button>
</body>
</html>

@section Scripts {

    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/jqueryui")

    <script type="text/javascript">
        $('#btn_sumbit').on('click', function () {
            $.ajax({
                type: "POST",
                url: '@Url.Action("DownloadActionAsPDF", "Brochure")',
                dataType: "text",
                data: null,
                success: function (data) {

                },
                error: console.log("it did not work"),
            });
        });
    </script>

}

这是保存为PDF的控制器类方法

    [HttpPost]
    public ActionResult DownloadActionAsPDF()
    {
        string path = Request.Url.ToString();
        //Request.Url.ToString() using to get current page URL
        return new Rotativa.UrlAsPdf(path) { FileName = "UrlTest.pdf" };
    }

但是一旦我点击此按钮,它就不会保存为PDF文件,

1 个答案:

答案 0 :(得分:3)

正如我已经评论过你的代码一次又一次地调用同一个方法..

您可以使用ActionAsPdf执行相同的操作,并将其指向您的 Create_Brochure 操作方法

例如: -

    public ActionResult DownloadActionAsPDF()
            {
              return new Rotativa.ActionAsPdf("Create_Brochure") { FileName = "TestPdf.pdf"};
            }


    public ActionResult Create_Brochure()
            {
               //Your logic....
               return View()  
            }

在您的视图页面中,无需按钮或Ajax来电anchor tag

查看: -

 <a href="@Url.Action("DownloadActionAsPDF", "MyDiary")" class="btn btn-danger submit" download>SaveAsPdf</a>