使用iTextSharp与淘汰JavaScript或其他MVC / MVVM框架？ [英] Using iTextSharp with knockout JavaScript or other MVC / MVVM framework?

问题描述

好的，因为我确实发现我可以使用iTextSharp生成PDF，所以我走了那条路。

Ok, since I did find out that I can use iTextSharp to generate a PDF, I went that route.

我已经把它带到了它将节省的地方具有PDF基本格式的HTML。这不是问题。

I've got it to where it will save HTML with basic formatting to a PDF. That's not the problem.

我现在需要做的是在其中使用 knockout 进行标记，并使用结果 HTML（即DOM）作为我的字符串，传递给创建PDF的方法。

What I'm needing to do now is take markup with knockout in it, and use the resultant HTML (i.e. the DOM) as my string to pass into the method that creates the PDF.

所以，例如，我有一个生成的表昏死。我需要将由knockout生成的DOM作为字符串传递给我的C＃控制器，以便我可以构建PDF。

So, for instance, I have a table that's generated with knockout. I need to pass the DOM that was generated by knockout, as a string, into my C# controller, so that I can build the PDF.

基本上，如果你看一下这里产生了什么：

Basically, if you look at what's generated here:

http：// knockoutjs.com/documentation/foreach-binding.html

如果你仔细阅读例2（它会生成三个要点），它会说明第一代我在说什么。在我的情况下，我想获取生成的项目符号并将它们传递给我的控制器 - HTML和所有 - 作为字符串，以便我可以保存它们。

And if you read through Example 2 (it generates three bullet points), it illustrates the generation I'm talking about. In my case, I would want to take the generated bullet points and pass them into my controller -- HTML and all -- as a string, so that I can save them.

有什么想法吗？老实说，我甚至不确定在哪里开始。

Any thoughts? I'm not even sure where to begin here, honestly.

推荐答案

这个问题适用于任何 JavaScript框架，它执行 MVC 或 MVVM 。上面提到过：

The question applies to any JavaScript Framework that does MVC or MVVM. Mentioned above:

我需要将由knockout生成的DOM作为字符串
传递给我的C＃控制器，所以我可以构建PDF。

I need to pass the DOM that was generated by knockout, as a string, into my C# controller, so that I can build the PDF.

所以我将使用一个简单的工作示例来完成在ASP.NET MVC中完成此操作。之前从未使用 knockout.js ，因此要获取 DOM 元素并发送 Ajax 请求 jQuery 。

So am going to go with a simple working example to get this done in ASP.NET MVC. Never used knockout.js before, so going to get the DOM element and send Ajax request with jQuery.

视图，基于您在上面引用的示例： 1。获取 outerHTML ul ; 2. 向控制器发送 Ajax 请求：

The view, based on the example you referenced above: 1. Gets outerHTML of ul; 2. sends an Ajax request to the controller:

<h4>People</h4>
<ul id='wanted' data-bind="foreach: people">
    <li>
        Name at position <span data-bind="text: $index"> </span>:
        <span data-bind="text: name"> </span>
        <a href="#" data-bind="click: $parent.removePerson">Remove</a>
    </li>
</ul>
<button data-bind="click: addPerson">Add</button>
<button data-bind="click: getPdf">Get PDF</button>

@section scripts
{
<script src="~/Scripts/libs/knockout-3.4.0.js"></script>
<script src="~/Scripts/ajax/FileSaver.js"></script>
<script src="~/Scripts/ajax/jquery.binarytransport.js"></script>
<script src="~/Scripts/ajax/jquery-binary.js"></script>
<script type="text/javascript">
    function AppViewModel() {
        var self = this;

        self.getPdf = function (data, event) {
            $(this).downloadFile(
                '@Url.Action("Index", "DomToPdf")',
                { xHtml: $('#wanted').prop('outerHTML') }
            );
        }

        self.people = ko.observableArray([
            { name: 'Bert' },
            { name: 'Charles' },
            { name: 'Denise' }
        ]);
        self.addPerson = function () {
            self.people.push({ name: "New at " + new Date() });
        };
        self.removePerson = function () {
            self.people.remove(this);
        }
    }
    ko.applyBindings(new AppViewModel());
</script>
}

注意：

1. FileSaver.js 在技术上不是必需的，但可以节省很多处理不必处理不同浏览器实现的时间。参考浏览器兼容性。


2. 如果使用< BinaryTransport 则需要 jQuery - 遗憾的是框架不支持此功能最后我检查了开箱即用。其他框架如 AngularJS 支持二进制文件。参考发送和接收二进制数据。

1. FileSaver.js isn't technically required, but saves a great deal of time not having to deal with different browser implementations. Reference Browser compatibility.
2. BinaryTransport is required if using jQuery - sadly the framework doesn't support this feature out of the box last I checked. Other frameworks like AngularJS do support binary. Reference Sending and Receiving Binary Data.

jquery-binary.js 是一个简单 jQuery 我为几个内部项目编写的插件：

jquery-binary.js is a simple jQuery Plugin I wrote for a couple of internal projects:

(function ($) {
    $.fn.downloadFile = function(url, data, requestType) {
        $.ajax({
            url: url,
            data: data,
            type: requestType || 'POST',
            dataType: 'binary'
        })
        .done(function(data, textStatus, jqXHR) {
            var type = jqXHR.getResponseHeader('Content-Type');
            var filename = jqXHR.getResponseHeader('Content-Disposition');
            filename = filename && filename.indexOf('attachment') > -1
                ? filename.replace(/(?:[^=])+=/, '')
                : 'file.bin';
            var blob = new Blob([data], { type: type });
            saveAs(blob, filename);
        })
        .fail(function(jqXHR, textStatus, errorThrown) {
            alert(errorThrown);
        })
        ;
        return false;
    };
}(jQuery));

控制器： 1。解析 HTML 带 XMLWorkerHelper 的字符串; 2. 返回PDF。

And the controller: 1. parses the HTML string with XMLWorkerHelper; 2. returns the PDF.

[HttpPost]  // some browsers have URL length limits
[ValidateInput(false)] // or throws HttpRequestValidationException
public ActionResult Index(string xHtml)
{
    Response.ContentType = "application/pdf";
    Response.AppendHeader(
        "Content-Disposition", "attachment; filename=test.pdf"
    );
    using (var stringReader = new StringReader(xHtml))
    {
        using (Document document = new Document())
        {
            PdfWriter writer = PdfWriter.GetInstance(
                document, Response.OutputStream
            );
            document.Open();
            XMLWorkerHelper.GetInstance().ParseXHtml(
                writer, document, stringReader
            );
        }
    }

    return new EmptyResult();
}

将让您决定如何处理内联样式。 ;）

Will let you decide how to deal with the inline styles. ;)

这篇关于使用iTextSharp与淘汰JavaScript或其他MVC / MVVM框架？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！