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

【问题标题】：HTML view page save as PDF using roatativa使用 roatativa 将 HTML 视图页面另存为 PDF
【发布时间】：2016-02-03 05:07:36
【问题描述】：

我在 Brochure Contrller 类中的 Create_Brochure ActionResult 有以下图片

这里是该操作的完整 URL

单击后，我想将此视图页面保存为 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 文件中，

【问题讨论】：

你有什么错误吗？？调试时会发生什么？？
不，没有错误发生，一旦我调试了它触发DownloadActionAsPDF()方法，编译顺利，但没有生成PDF文件
如果理解正确，您的要求是直接保存 PDF..
是的，是的，因为我觉得这个 DownloadActionAsPDF() 方法是这里的问题
在浏览器控制台it did not work没有看到任何日志

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

【解决方案1】：

正如我已经评论的那样，您的代码一次又一次地调用相同的方法..

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

例如：-

    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>

【讨论】：