javascript - 使用 HTML/CSS/JQuery 实现 WYSIWYG 报表生成器？

Question

我正在开发一个仪表板，它使用来自各种平台(例如 Google Analytics、Google AdWords 等)的 API 提取统计数据。

一旦用户提取了所有必要的数据并将它们保存在数据库中，用户就可以方便地检索统计数据并将它们与图表和其他图形小部件一起显示在仪表板上的单个屏幕上以显示趋势。

我想用这个实现的最终结果是有一个 WYSIWYG报告生成器，如果可能的话，这样用户可以设计页面的 CSS/HTML 并保存他们的报告模板，并最终将它们导出为 PDF。 我已经创建了要操作的 CSS 元素。但是，我希望允许用户选择这些 CSS 元素的布局和缩放方式。但是，我不确定这样的实现会有多复杂，以及如何实现这样的功能。

我已经研究并发现有 JQuery 插件允许像这样拖动/调整 CSS 元素的大小:

http://jsfiddle.net/Ja4dY/1/

$(function() {
    var $foo = $('#foo').resizable().draggable();

    $('#transform').on('click', function() {
        $foo.css({
            '-moz-transform': 'rotate(60deg)',
            '-webkit-transform': 'rotate(60deg)',
            '-ms-transform': 'rotate(60deg)'
        });
    });
});

是否可以将被操纵的页面保存为模板？我假设我需要使用另一个插件将 HTML 页面导出为 PDF。

有没有现成的工具可以做类似的事情？简而言之，我希望实现一个报告工具，该工具可以保存自定义模板并导出为 PDF。我试过环顾四周，但一无所获，所以我想知道社区是否知道可以实现此目的的任何工具或工具组合。

对于我的问题造成的任何混淆，我深表歉意。提前致谢!

Answer 1

在 http://jsfiddle.net/Ja4dY/260/ 更新了 fiddle 单击“保存”后查看控制台，您可以轻松发布该数据。以防代码消失，这是一个备份:

HTML 部分:

<button id="rotate_left">Rotate left</button>
<button id="rotate_right">Rotate right</button>
<button id="save">Save</button>
<div class="template_area">
    <div id="foo" class="template_box">Hello</div>
    <div id="other" class="template_box">What's this?</div>
</div>

样式:

.template_area {
    position: relative;
    margin-top: 30px;
    background: none #efefef;
    height: 300px;
}
#foo {
    border: 2px solid red;
    width: 200px;
    height: 150px;
    position: absolute;
    top: 150px;
    left: 50px;

}

#other {
    border: 2px solid blue;
    width: 150px;
    height: 50px;
    position: absolute;
    top: 100px;
    left: 50px;
}
.selected_box {
     border: 1px solid green !important;   
}

脚本:

var selectedBox = false;
$(function() {
    $('.template_box').resizable().draggable();

    $('.template_box').on('click', function(e) {
        var thisElement = $(this); 
        $('.template_box').removeClass('selected_box');
        thisElement.addClass('selected_box');
        selectedBox = thisElement;
    });
    function rotateElement( degree ) {
        if ( !selectedBox.data('rotate') ) {
            selectedBox.data('rotate', 0);
        };
        selectedBox.data('rotate', selectedBox.data('rotate')+degree);
        selectedBox.css({
            '-moz-transform': 'rotate(' + selectedBox.data('rotate') + 'deg)',
            '-webkit-transform': 'rotate(' + selectedBox.data('rotate') + 'deg)',
            '-ms-transform': 'rotate(' + selectedBox.data('rotate') + 'deg)'
        });
    };
    $('#rotate_left').on('click', function(e) {
        if ( selectedBox ) {
            rotateElement( -30 );
        };
    });
    $('#rotate_right').on('click', function(e) {
        if ( selectedBox ) {
            rotateElement( 30 );
        };
    });
    $('#save').on('click', function() {
        var toPost = [];
        $('.template_box').each(function(i) {
            var thisBox = $(this);
            var id = thisBox.attr('id');
            var left = thisBox.position().left;
            var top = thisBox.position().top;
            var rotate = thisBox.data('rotate') || 0;
            var data = {
                'id': id,
                'left': left,
                'top': top,
                'rotate': rotate
            };
            toPost.push( data );
        });
        console.log( toPost );
    });
});

这只是一个想法，JS代码并不完美。