1

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

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

4

1 回答 1

3

更新：我在核心代码中添加了一个事件“xepOnlineStatus”。它为状态设置一个参数，并在格式化开始和结束时触发。这些状态是“开始”和“完成”。您现在可以实现一个像下面这样的简单 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');
}
});

})

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

本着目前“别的东西”的精神，以下是破解当前 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 更改为涵盖“下载”方法。上面会在“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> ：

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

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

对我来说很好看。

在此处输入图像描述

于 2016-06-30T18:21:51.000 回答