jsreport - 如何在 JSREPORT 中读取模板内的 POST 数据

Question

我对 jsreport 引擎有以下请求：

            $.ajax({
                method: "POST",
                contentType: "application/json",
                dataType: "jsonp",
                url: "http://localhost:5488/api/report",
                data: {
                    template: {
                        shortid: "ry6HoQRee"
                    },
                    data: {
                        "D": "5"
                    }
                },
                success: function (s) {
                    window.open("data:application/pdf,base64," + escape(s.responseText));
                },
                error: function (s) {
                    console.log(s);
                }
            });

但是我找不到在报告模板中阅读它的方法：

<span>{{data.D}}</span>

如何引用 POST 正文中的数据对象

Answer 1

jquery 不支持像 pdf 这样的二进制响应。你应该使用 XMLHttpRequest：

var xhr = new XMLHttpRequest()
xhr.open('POST', 'http://localhost:5488/api/report', true)
xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8')
xhr.responseType = 'arraybuffer'
xhr.onload = function(e) {
    if (this.status == 200) {
        window.open("data:application/pdf;base64," + window.btoa(String.fromCharCode.apply(null, new Uint8Array(xhr.response))));
    }
}
xhr.send(JSON.stringify({
    template: {
        shortid: 'Syeopu_xe'
    },
    data: {
        'D': '5'
    }
}))

使用车把模板引擎获取数据的示例

<span>{{D}}</span>

另外……
你也可以看看 jsreport 官方浏览器客户端库。它将 XmlHttpRequest 调用包装成更优雅的调用：

jsreport.serverUrl = 'http://localhost:3000';

var request = {
  template: { 
    content: 'foo', engine: 'none', recipe: 'phantom-pdf'
   }
};

//display report in the new tab
jsreport.render('_blank', request);

或以异步方式

jsreport.renderAsync(request).then(function(res) {
  //open in new window
  window.open(res.toDataURI())

  //open download dialog
  res.download('test.pdf')
});