使用HTML/CSS/JQuery实现一个所见即所得的报表生成器

Implementing a WYSIWYG report builder using HTML/CSS/JQuery?

本文关键字：所见即所得 报表 一个 CSS HTML JQuery 实现 使用      更新时间：2023-09-26

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

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

我想实现的最终结果是有一个所见即所得的报告生成器，如果可能的话，这样用户就可以设计页面的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。我试着四处看看，但什么也没找到，所以我想知道社区是否知道任何工具或工具组合可以实现这一目标。

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

更新小提琴http://jsfiddle.net/Ja4dY/260/点击"保存"后查看控制台，您可以轻松发布该数据。如果代码消失了，这里有一个备份:

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代码并不完美。

相关文章：