在Javascript中生成Excel文件缩略图预览

时间：2015-06-19 11:36:51

标签： javascript node.js excel

我有一个处理excel文件库的项目。为了让用户更容易直观地扫描它们，我想生成其内容的预览缩略图。谷歌驱动器这样做（截图如下），但我不知道如何。

enter image description here

有关如何完成此操作的任何想法/建议（不使用驱动器API）？

1 个答案:

答案 0 :(得分：0)

我想这就是你需要的东西

http://github.com/lonekorean/mini-preview

样本

/*
 * MiniPreview v0.9
 *
 * @author  Will Boyd
 * @github  http://github.com/lonekorean/mini-preview
 */

(function($) {
    var PREFIX = 'mini-preview';
    
    // implemented as a jQuery plugin
    $.fn.miniPreview = function(options) {
        return this.each(function() {
            var $this = $(this);
            var miniPreview = $this.data(PREFIX);
            if (miniPreview) {
                miniPreview.destroy();
            }

            miniPreview = new MiniPreview($this, options);
            miniPreview.generate();
            $this.data(PREFIX, miniPreview);
        });
    };
    
    var MiniPreview = function($el, options) {
        this.$el = $el;
        this.$el.addClass(PREFIX + '-anchor');
        this.options = $.extend({}, this.defaultOptions, options);
        this.counter = MiniPreview.prototype.sharedCounter++;
    };
    
    MiniPreview.prototype = {
        sharedCounter: 0,
        
        defaultOptions: {
            width: 256,
            height: 144,
            scale: .25,
            prefetch: 'pageload'
        },
                
        generate: function() {
            this.createElements();
            this.setPrefetch();
        },

        createElements: function() {
            var $wrapper = $('<div>', { class: PREFIX + '-wrapper' });
            var $loading = $('<div>', { class: PREFIX + '-loading' });
            var $frame = $('<iframe>', { class: PREFIX + '-frame' });
            var $cover = $('<div>', { class: PREFIX + '-cover' });
            $wrapper.appendTo(this.$el).append($loading, $frame, $cover);
            
            // sizing
            $wrapper.css({
                width: this.options.width + 'px',
                height: this.options.height + 'px'
            });
            
            // scaling
            var inversePercent = 100 / this.options.scale;
            $frame.css({
                width: inversePercent + '%',
                height: inversePercent + '%',
                transform: 'scale(' + this.options.scale + ')'
            });

            // positioning
            var fontSize = parseInt(this.$el.css('font-size').replace('px', ''), 10)
            var top = (this.$el.height() + fontSize) / 2;
            var left = (this.$el.width() - $wrapper.outerWidth()) / 2;
            $wrapper.css({
                top: top + 'px',
                left: left + 'px'
            });
        },
        
        setPrefetch: function() {
            switch (this.options.prefetch) {
                case 'pageload':
                    this.loadPreview();
                    break;
                case 'parenthover':
                    this.$el.parent().one(this.getNamespacedEvent('mouseenter'),
                        this.loadPreview.bind(this));
                    break;
                case 'none':
                    this.$el.one(this.getNamespacedEvent('mouseenter'),
                        this.loadPreview.bind(this));
                    break;
                default:
                    throw 'Prefetch setting not recognized: ' + this.options.prefetch;
                    break;
            }
        },
        
        loadPreview: function() {
            this.$el.find('.' + PREFIX + '-frame')
                .attr('src', this.$el.attr('href'))
                .on('load', function() {
                    // some sites don't set their background color
                    $(this).css('background-color', '#fff');
                });
        },
        
        getNamespacedEvent: function(event) {
            return event + '.' + PREFIX + '_' + this.counter;
        },

        destroy: function() {
            this.$el.removeClass(PREFIX + '-anchor');
            this.$el.parent().off(this.getNamespacedEvent('mouseenter'));
            this.$el.off(this.getNamespacedEvent('mouseenter'));
            this.$el.find('.' + PREFIX + '-wrapper').remove();
        }
    };
})(jQuery);
.mini-preview-anchor {
    display: inline-block;
    position: relative;
    white-space: nowrap;
}

.mini-preview-wrapper {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    position: absolute;
    overflow: hidden;
    z-index: -1;
    opacity: 0;
    margin-top: -4px;
    border: solid 1px #000;
    box-shadow: 4px 4px 6px rgba(0, 0, 0, .3);
    transition: z-index steps(1) .3s, opacity .3s, margin-top .3s;
}

.mini-preview-anchor:hover .mini-preview-wrapper {
    z-index: 2;
    opacity: 1;
    margin-top: 6px;
    transition: opacity .3s, margin-top .3s;
}

.mini-preview-loading, .mini-preview-cover {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;    
}

.mini-preview-loading {
    display: table;
    height: 100%;
    width: 100%;
    font-size: 1.25rem;
    text-align: center;
    color: #f5ead4;
    background-color: #59513f;
}

.mini-preview-loading::before {
    content: 'Loading...';
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.mini-preview-cover {
    background-color: rgba(0, 0, 0, 0); /* IE fix */
}

.mini-preview-frame {
    border: none;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>MiniPreview Demo</title>

        <link href="http://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
        <style>
            body {
                height: 100%;
                margin: 0;
                padding: 0 10% 40px;
                font-size: 2rem;
                line-height: 1.5;
                font-family: 'Roboto Slab', sans-serif;
                text-align: justify;
                color: #59513f;
                background-color: #f5ead4;
            }

            a {
                color: #537f7c;
            }

            .break {
                text-align: center;
            }
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

        <!-- MiniPreview stuff here -->
        <link href="./jquery.minipreview.css" rel="stylesheet">
        <script src="./jquery.minipreview.js"></script>
        <script>
            $(function() {
                $('#p1 a').miniPreview({ prefetch: 'pageload' });
                $('#p2 a').miniPreview({ prefetch: 'parenthover' });
                $('#p3 a').miniPreview({ prefetch: 'none' });
            });
        </script>
    </head>
    <body>
        <p id="p1">
            This demo shows how to add live mini-previews to links on hover. Check out these links to <a href="http://www.sitepoint.com/">SitePoint</a> and <a href="http://alistapart.com/">A List Apart</a>. Hover over them to see a small preview of what they point to.
        </p>
        <p class="break">&bull; &bull; &bull;</p>
        <p id="p2">
            Those previews were fetched as soon as this page loaded. This is great for having the previews ready ahead of time, but can eat up extra bandwidth. As an alternative, check out these links to <a href="http://abduzeedo.com/">Abduzeedo</a> and <a href="http://www.smashingmagazine.com/">Smashing Magazine</a>. These previews aren't fetched until you hover over this paragraph.
        </p>
        <p class="break">&bull; &bull; &bull;</p>
        <p id="p3">
            Finally, check out these links to <a href="http://www.growingwiththeweb.com/">Daniel's blog</a>, <a href="http://jonibologna.com/">Joni's blog</a>, and <a href="http://codersblock.com/blog/">my blog</a>. These previews are only fetched when needed. This saves the most bandwidth, but there will be a delay before the previews can be shown.
        </p>
    </body>
</html>

原始来源：

http://codepen.io/kanakiyajay/pen/NqgZjo

相关问题
最新问题