node.js - Generate Excel file thumbnail preview in Javascript -
i have project handling library of excel files. make easilier users visually scan them, generate preview thumbnail images of content. google drive (screenshot below) have no idea how.
any ideas/suggestions on how done (without using drive api) ?
i guess need
http://github.com/lonekorean/mini-preview
demo
/* * minipreview v0.9 * * @author boyd * @github http://github.com/lonekorean/mini-preview */ (function($) { var prefix = 'mini-preview'; // implemented 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() { // sites don't set 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; } { 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"> demo shows how add live mini-previews links on hover. check out these links <a href="http://www.sitepoint.com/">sitepoint</a> , <a href="http://alistapart.com/">a list apart</a>. hover on them see small preview of point to. </p> <p class="break">• • •</p> <p id="p2"> previews fetched page loaded. great having previews ready ahead of time, can eat bandwidth. alternative, check out these links <a href="http://abduzeedo.com/">abduzeedo</a> , <a href="http://www.smashingmagazine.com/">smashing magazine</a>. these previews aren't fetched until hover on paragraph. </p> <p class="break">• • •</p> <p id="p3"> finally, check out these links <a href="http://www.growingwiththeweb.com/">daniel's blog</a>, <a href="http://jonibologna.com/">joni's blog</a>, , <a href="http://codersblock.com/blog/">my blog</a>. these previews fetched when needed. saves bandwidth, there delay before previews can shown. </p> </body> </html>original source:
Comments
Post a Comment