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

Question

我有一个处理 Excel 文件库的项目。为了使用户更容易直观地扫描它们，我想生成其内容的预览缩略图。 Google 云端硬盘可以执行此操作(下面的屏幕截图)，但我不知道如何操作。

关于如何做到这一点(不使用驱动 API)有什么想法/建议吗？

Answer 1

我想这就是你所需要的

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