Jquery script for document preview? - javascript

Do you know any components from jQuery with which you can preview .doc,.pdf,.jpg .... files in browser ?
Thanks

If you really want to keep it all native inside the browser you can display images on their own and pdfs with pdf.js.
If you only need to display it somehow I advise you to look at Google docs viewer (officially discontinued, see below) which allows you lots of different files and which you can next embed in one of the scripts altschuler mentioned. (See my comment to his answer why those tools alone don't do the trick)
Supported file types by google docs viewer
Microsoft Word (.DOC and .DOCX)
Microsoft Excel (.XLS and .XLSX)
Microsoft PowerPoint (.PPT and .PPTX)
Adobe Portable Document Format (.PDF)
Apple Pages (.PAGES)
Adobe Illustrator (.AI)
Adobe Photoshop (.PSD)
Tagged Image File Format (.TIFF)
Autodesk AutoCad (.DXF)
Scalable Vector Graphics (.SVG)
PostScript (.EPS, .PS)
TrueType (.TTF)
XML Paper Specification (.XPS)
Archive file types (.ZIP and .RAR)
Although I wouldn't recommend this usage on production or professional systems, you can still use the system as described here.

I think you're looking for a lightbox feature. Lightbox is the common name for (pre)viewing things in an overlay, so to say.
There are a great deal to choose from, here's a few:
http://gettopup.com (try the #2 example, this looks a lot like quicklook).
http://leandrovieira.com/projects/jquery/lightbox
http://jacklmoore.com/colorbox
How you want to show .doc and .pdf files is another issue.

Related

ViewerJS integration using a div (without a frame)

I want to integrate the PDF.js (including the viewer, which is a part of the PDF.js release) into my HTML application. But I don't want to use frames for this task. Instead I want the PDF viewer be included directly into a div.
It is possible without the viewer. PDF.js can render pages directly to canvas.
But I cannot find documentation about how the viewer can be integrated. The viewer itself seems to be a different project called "ViewerJS". But I haven't found much documentation for this project. The only way described there is using a frame (http://viewerjs.org/). I even did not find its source code although it has a Github repo (https://github.com/kogmbh/ViewerJS/)...
I would appreciate any help. Thanks!
You cannot do that with viewerJS.

Convert HTML Report to PDF

I want convert an HTML report to PDF. I know that there are so many libraries are available for this purpose. But the HTML report contains so many graphs created using Jqplot. I want to include these graphs in the PDF also. If you are familiar with any library which also convert graphs to PDF, please give me the reference.
you can use bullzip pdf printer it creates a virtual pdf printer that can transform your HTML content to a pdf file from the browser:
http://www.bullzip.com/
you can also find a lot of useful tools right there!
I don't have experience with Jqplot, but I have successfully converted html pages which contain pie charts from Google Charts (completely javascript generated) to pdf.
I used wkhtmltopdf - it's a commandline tool but there are wrapper classes for php and some others I believe.
I'm sure you could find something applicable with a bit of googling but this looks promising: https://github.com/mikehaertl/phpwkhtmltopdf

How to get the associated icon of a file in HTA (HTML/Javascript/VBScript)

I'm building an HTA application in which I need to display a list of file with their associated system icon.
I'm using FileSystemObject to list the file but there seem to have no way to get the icon...
I've found a script in VBS that can save the icon of a file into a .ico .
It read the file (PE resource file, .exe or dll) and parse the icon data.
I modified that script to return the icon's bytes, convert it to base64 and use embed base64 images in HTML.
Here's the original script: http://gilpin.us/IconSiphon/
Issue
) In most case the .ico contains multiple icons (many sizes and color depth) but there's no way I can specify which one to use (as I need 16x16 icons).
) Not all icons are displayed
) Could be slow with many file as it read exe and dll (but I'm ok with that, I can cache already fetched icon)
I've also tried some ActiveX control but none seem to work properly. Even those provided by microsoft (ShellFolderView or ListView) are very buggy.
Requirements
Must display 16x16 icon
Must allow multiple file selection
Everything must be embed in hta (if possible). No external .exe
Does anyone know a way to achieve that?
Thanks!
Use SHGetFileInfo() with the SHGFI_ICON flag.
http://msdn.microsoft.com/en-us/library/windows/desktop/bb762179(v=vs.85).aspx
The filesystemobject will provide you the necessary functions for enumerating files on the local filesystem. However to get the icon image you will need to use the win32 api per #seanchase's response or an external exe.
However you can access the win32api via javascript in the hta using the wshApiToolkit activex object - http://www.google.com/search?q=wshAPIToolkit.ucATO%2F&rls=com.microsoft:en-us&ie=UTF-8&oe=UTF-8&startIndex=&startPage=1
Find a copy of that and you're close to being done. It does require distributing the activex object with your code and shell executing the registration process from within the HTA so that might violate your third constraint. Though I believe you can base64 encode the exe into the hta in a dataurl and write that back out to the file system so it would at least be bundled into a single file. If you support that option then maybe embedding an exe that does the same would meet your requriements.
Definitely some hacky stuff that may be unstable on future OS versions - heck I'm not even sure the wshApiToolkit works on windows 7, and 8 is just around the corner. Good luck!
You indicated you're opened to installing ActiveX components and using them in your HTA.
If I had the time, I would approach this for myself by creating ActiveX components using Visual Studio to call FindResource, LoadResource and LockResource. These will enable access to the Group Icon resource for which I would then provide rich interfaces to iterate through the Icons offering the ability to extract BMPs (or PNGs).
This is "how" I would go about achieving this short of actually going off doing it.
Once I build a similar HTA interface and I faced the same problem. I solved the problem by creating a custom icon gallery and converting the images using base64. You may achieve the same by either converting or using sprite. Many UI does it, even java.swing has its own collection embbebed. As you noticed, reading from *.dll can speed down the application

Extracting glyph-path information from ttf files

I'm trying to figure out a way to extract the information encoded in ttf files. namely: The char-to-glyph table and the individual glyph path data.
Does anyone have a good reference explaining the ttf file structure, or some other solution?
Keep in mind that I'm not interested in any libraries that can do it for me either (unless they are open source and I can see how they are doing it). The "master" goal is to implement it in Javascript.
Thanks!
Take a look at OpenType.js at http://opentype.js.org/
opentype.js provides you with raw access to the glyphs so you can modify them as you please.
One can inspect all the tables in an OpenType and TrueType font using Font Inspector, and enumerate all the glyphs using Glyph Inspector
This toolkit has an utility called ttf2svg, it is open source written in java.
http://xmlgraphics.apache.org/batik/
You can try to extract the ttf parsing logic and implement it as you want.
In a past situation I used this utility to generate a svg file and use it in a web page targeting ipad users (#fontface css feature).
OpenType.js is perfect in a javascript environment, browser or Node.js (I contributed to the lib). Fast & easy to use.
Just keep in mind that the implementation is not complete, if you need something that is not yet implemented you can open an issue and we will help you if we can!
For a more complete tool, fontTools will be more powerful in command line (& complete parsing/writing) https://github.com/behdad/fonttools/
If you do ttx myfont.ttf it will generate an xml file (myfont.ttx) with all infos, you can modify the infos and do ttx myfont.ttx and it will generate a font based on it!
By the way I did an awesome list for typography recently with a lot of resources concerning ttf / otf: https://github.com/Jolg42/awesome-typography
There are a lot of librairies in different languages from javascript to C 😉

How to generate graphics into photoshop using actionscript?

I've a text file with content like this:
id, pixelsize, color, text
block1, 200x60, black, Header
block2, 200x180, white, Body
block2, 200x60, black, Footer
Now using actionscript,
I want to generate a psd file which would generate a 3 vertical block graphics (like this) after parsing the given file. All the blocks are placed vertically on top of each other.
Convert this psd file into PDF automatically using the script.
Automate this whole process without opening photoshop. Is it possible?
Please help. Thanks.
You aren't going to be able to create a PSD w/o opening Photoshop. Even when you use something like Adobe Bridge to batch process files from any Adobe app it still uses the appropriate app to open a supported file and perform actions on it.
I have seen apps that allow you to output PDFs from user defined text and variable images (PageFlex comes to mind)...but even then, saving Adobe-compatible files aren't simple tasks to turn off and on (like when you make a text file). There's a lot of data to manage even with PDFs and I'd suspect even more when you look at a PSD file.
Unless you can find an open-source app that somehow allows you mess with its coding so that you can bypass opening it 100% to output a somewhat compatible PSD/PDF file, I don't think you're going to be able to automate much w/o lots of work and some potentially expensive software solutions.
Long answer short, I think you'll have to use Photoshop at some point in your solution. On the upside, you could make a recording of actions in PS so that individual files can be output to whatever format you like...and those I'm sure can be scripted into complicated solutions.
You can do this kind of thing using the ExtendScript Toolkit from Adobe.
Not sure you can do it without having Photoshop open, however.
Given that you want a PDF at the end, could you use something like AlivePDF (ActionScript 3 Open-Source PDF Library)?
If you actually need to also generate a PSD, I'm not sure how you do that from scratch, but the Photoshop SDK would be a good place to start, as well as getting a good understanding of bytearrays.

Categories

Resources