Question

场景：在我们的应用程序中，用户可以通过填写Knockout视图中的某些字段来创建发票。可以通过另一个Knockout页面预览此发票。我想在PDF创建者（EVOPdf）中使用预览网址，因此我们可以向用户提供此发票中的PDF。

要预览发票，我们通过ajax-request加载数据（在文档就绪）：

var InvoiceView = function(){
    function _start() {
        $.get("invoice/GetInitialData", function (response) {
            var viewModel = new ViewModel(response.Data);
            ko.applyBindings(viewModel, $("#contentData").get(0));
        });
    };
    return{
        Start: _start
    };
}();

当PDF创建者请求url时，我的问题在于数据绑定：viewModel为空。这是有道理的，因为在PDF创建者执行请求时不会调用GetInitialData操作。直接在页面末尾从预览页面调用此_start函数也无济于事。

<script type="text/javascript">
    $(document).ready(function() {
        InvoiceView.Start();
    });
</script>

查看EvoPdf的文档，应该执行JavaScript，因为JavaScriptEnabled默认为true：http://www.evopdf.com/api/index.aspx

我怎样才能解决这个问题，或者从淘汰视图创建pdf的最佳方法是什么？

控制器操作代码：

public FileResult PdfDownload(string url)
{
    var pdfConverter = new PdfConverter();

    // add the Forms Authentication cookie to request
    if (Request.Cookies[FormsAuthentication.FormsCookieName] != null)
    {
        pdfConverter.HttpRequestCookies.Add(
            FormsAuthentication.FormsCookieName,
            Request.Cookies[FormsAuthentication.FormsCookieName].Value);
    }

    var pdfBytes = pdfConverter.GetPdfBytesFromUrl(url);

    return new FileContentResult(pdfBytes, "application/pdf");
}

使用Javascript：

var model = this;
model.invoiceToEdit = ko.observable(null);

model.downloadInvoice = function (invoice) {
    model.invoiceToEdit(invoice);
    var url = '/invoice/preview';
    window.location.href = '/invoice/pdfDownload?url=' + url;
};

Answer 1

xdumaine的评论促使我思考另一个方向，谢谢你！

加载Ajax请求确实需要一些时间，但在我将ConversionDelay放在pdf创建者对象上后，我也发现了一些JavaScript（例如，敲除绑定）错误

pdfConverter.ConversionDelay = 5; //time in seconds

所以这是我现在的解决方案，现在对我有用：

启动绑定点击事件的过程：

model.downloadInvoice = function (invoice) {
    var url = '/invoice/preview/' + invoice.Id() + '?isDownload=true';
    window.open('/invoice/pdfDownload?url=' + url);
};

导致GET resquest on controller action

public FileResult PdfDownload(string url)
{
    var pdfConverter = new PdfConverter { JavaScriptEnabled = true };

    // add the Forms Authentication cookie to request
    if (Request.Cookies[FormsAuthentication.FormsCookieName] != null)
    {
        pdfConverter.HttpRequestCookies.Add(
            FormsAuthentication.FormsCookieName,
            Request.Cookies[FormsAuthentication.FormsCookieName].Value);
    }

        pdfConverter.ConversionDelay = 5; 
        var absolutUrl = ToAbsulte(url);
        var pdfBytes = pdfConverter.GetPdfBytesFromUrl(absolutUrl);

        return new FileContentResult(pdfBytes, "application/pdf");
}

Pdf创建者使用isDownload = true在控制器上请求此操作（请参阅绑定点击事件）：

public ActionResult Preview(string id, bool isDownload = false)
{
    return PartialView("PdfInvoice", new InvoiceViewModel
    {
        IsDownload = isDownload,
        InvoiceId = id
    });
}

返回此部分视图：

PartialView：

// the actual div with bindings etc.
@if (Model.IsDownload)
{
    //Include your javascript and css here if needed
    @Html.Hidden("invoiceId", Model.InvoiceId);

    <script>
        $(document).ready(function () {
            var invoiceId = $("#invoiceId").val();
            DownloadInvoiceView.Start(invoiceId);
        });
    </script>
}

获取发票并应用淘汰赛绑定的JavaScript：

DownloadInvoiceView = function() {
   function _start(invoiceId) {
        $.get("invoice/GetInvoice/" + invoiceId, function(response) {
            var viewModel = new DownloadInvoiceView.ViewModel(response.Data);
            ko.applyBindings(viewModel, $("#invoiceDiv").get(0));
        });
    };

    return {
        Start: _start
    };

}();

DownloadInvoiceView.ViewModel = function (data) {
    var model = this;
    var invoice = new Invoice(data); //Invoice is a Knockout model

    return model;
};

从Knockout JS视图创建pdf＆amp;视图模型

1 个答案: