可编辑的cshtml视图页面另存为PDF

Question

I'm trying to create web application that consisting an 我正在尝试创建包含

editable cshtml view page 可编辑的cshtml视图页面

and then 接着

save that edited content as a PDF once I click the button 单击按钮后，将编辑后的内容另存为PDF

So this is the whole cshtml view page , 这就是整个cshtml视图页面，

        @model IEnumerable<int>

        @{
            ViewBag.Title = "Create Template";
        }
        <!DOCTYPE html>
        <html>
        <head>
            <title>Create a Template</title>
        </head>
        <body>
                    <div id='template'>
                       <h1 contentEditable='True'>Product Name</h1>
                        <div >
                          <h2 contentEditable='True'>Product Description</h2>       
                          <p contentEditable='True'>London is the capital city of England.</p>
                       </div>
                   </div>

          <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 () {

                    var div_value = document.getElementById('template').innerHTML;

                    RazorPDF.PdfResult(div_value, "PDF");
                });

            </script>

        }

I'm using RazorPDF to do this task , but once I click this button it doesn't saving to PDF 我正在使用RazorPDF来执行此任务，但是单击此按钮后，它不会保存为PDF

I can edit this cshtml view page , I want to save that finally edited content as pdf (which is dynamic view) 我可以编辑此cshtml视图页面，我想将最终编辑的内容另存为pdf（动态视图）

Answer 1

I think you're doing it wrong. 我认为您做错了。 The line "RazorPDF.PdfResult(...)" belongs in the Controller not in the View. “ RazorPDF.PdfResult（...）”行属于Controller而不在View中。

Watch this Video: http://nyveldt.com/blog/post/Introducing-RazorPDF It should give you a clearer understanding of how things work in RazorPDF. 观看此视频： http : //nyveldt.com/blog/post/Introducing-RazorPDF它应该使您对RazorPDF中的工作原理有更清晰的了解。

EDIT: 编辑：

Just create a Controller method, that generates a PDF-View based on Parameters. 只需创建一个Controller方法，该方法将基于Parameters生成PDF视图。

public ActionResult Pdf(string name, string description) {
    var product = new Product();
    product.Name = name;
    product.Description = description;

    var pdfResult = new PdfResult(product, "Pdf");

    return pdfResult;
}

Of course you need to create a Product-Class that holds the information. 当然，您需要创建一个包含信息的产品类。

In your Javascript part you can write: 在您的Javascript部分中，您可以编写：

location.href = @Url.Action("Pdf", "Controllername") + "?name=" + name + "&description=" + description;

This will hopefully generate a link that you can follow in Javascript. 希望这将产生一个您可以使用Javascript跟随的链接。 name and description are Javascript variables that hold the information that was typed by the user. 名称和描述是Javascript变量，用于保存用户键入的信息。

Do you understand? 你理解吗？ My approach would be to generate the PDF content in a different view (like in that video) based on the information of your editable view. 我的方法是根据可编辑视图的信息在不同的视图（如该视频）中生成PDF内容。

Tell me if it worked. 告诉我是否有效。 ;-) ;-)

可编辑的cshtml视图页面另存为PDF

问题描述

1 个解决方案

解决方案1
1 2015-11-02 10:37:35

可编辑的cshtml视图页面另存为PDF

问题描述

1 个解决方案

解决方案1 1 2015-11-02 10:37:35

解决方案1
1 2015-11-02 10:37:35