将服务 Xportability/css-to-pdf 链接到 JavaScript 微调器

Question

我注意到当我点击 PDF 按钮时，下载 PDF 需要一些时间。有什么我可以为其创建 eventListener 的吗？所以我可以开始和结束微调器。这确实是 iPad 上的一个问题，它需要更长的时间...但至少有 30-50 秒直到 waiting for xep.cloudformatter... 出现。

或者还有什么我可以做的。

Answer 1

更新：我在核心代码中添加了一个事件"xepOnlineStatus"。它将参数设置为状态并在格式化开始和结束时触发。这些状态是 "Started" 和 "Finished"。您现在可以像下面这样实现一个简单的 JS，它将使用相同的微调器处理这些事件。网站主JS已更新，Github代码即将更新

您可以在此处查看实际效果：http://www.cloudformatter.com/CSS2Pdf，只需格式化为 PDF 即可启用微调器。

document.observe('dom:loaded', function() { 

jQuery(document).on("xepOnlineStatus", function(event, state){
if (state == "Started"){
    var screenTop = jQuery(document).scrollTop();
    var screenHeight = jQuery(window).height();
    jQuery('#spinner-overlay').css('top', screenTop);
    jQuery('#spinner-overlay').css('height', screenHeight);
    jQuery('#spinner-overlay').toggle('show');
}
else if (state == "Finished"){
    jQuery('#spinner-overlay').toggle('hide');
}
});

})

更新结束：为了完整起见，左下方的原始答案

暂时本着 "something else" 的精神，这里是破解当前 JS 并添加一些 CSS 和一个 DOM 元素以提供微调器的说明：

1) 破解主要 (xepOnline.jpPlugin.js):

我像这样更改了 Format 函数（在第 735 行或附近）

 Format: function(ElementID, options) {
         var screenTop = jQuery(document).scrollTop();
         var screenHeight = jQuery(window).height();
         jQuery('#spinner-overlay').css('top', screenTop);
         jQuery('#spinner-overlay').css('height', screenHeight);
         jQuery('#spinner-overlay').toggle('show');
                var items;
                if(jQuery.isArray(ElementID)) {
                            items = ElementID;
                } else {
                            items = [ ElementID ];
                }
                return xepOnline.Formatter.__format(items, options);
    },

这里唯一的变化是抓取几个 var 来放置微调器叠加层并适当地设置微调器 div。然后将其“打开”，因为此功能会启动整个格式化过程。

然后我更改了 __postBackSuccess 和 __postBackFailure 函数以隐藏微调器（在第 787 和 872 行或附近），因为这些函数将结束整个过程。我在这些函数中添加了以下内容作为第一行：

jQuery('#spinner-overlay').toggle('hide');

然后我更改了 POST submitall 以涵盖 "download" 方法。以上将在 "newwin" 和 "embed" 但不是下载后关闭微调器。

在发布表单后立即在第 698 行或附近添加：

jQuery('#spinner-overlay').toggle('hide');

2) CSS

我为我的页面添加了以下 CSS：

#spinner-overlay {
background-color: #aaa;
opacity: 0.4;
position: absolute;
left: 0px;
top: 0px;
z-index: 100;
height: 100%;
width: 100%;
overflow: hidden;
background-image: url('/Resources/Images/ajaxSpinner.gif');
background-position: center;
background-repeat: no-repeat;
}

注意：您可以将自己的自定义微调器指向背景图像，我的是“gif”。

3) 页面更改

我在下面添加了一个

：

<div id="spinner-overlay" style="display:none;"></div>

那么会发生什么......当格式化开始时，它会获取当前页面的布局并扩展微调器 div 以覆盖该区域，显示微调器本身以某种不透明度覆盖在屏幕上。当格式化完成或中止时，它会隐藏该微调器 div（或者对于下载，它将在数据发布到服务器进行格式化时隐藏微调器）。

我觉得不错。

将服务 Xportability/css-to-pdf 链接到 JavaScript 微调器

Linking service Xportability/css-to-pdf to a JavaScript spinner

jquery

css-to-pdf