I have a problem. I've tried some libraries that convert html to PDF but they don't import CSS, so my PDF is invalid.
I's tried with "html2pdf" , "pdfmake", "jspdf"..
PDFMake does not help me because it need to generate a JSON with HTML data...
The structure of file that I would like to convert to PDF is:
html: www/templates/phase_one_report.html
css: www/css/phase_one_report.css
Some ideas? I am using nodeJS with sailsJS in backend and javascript with ionic in frontend.
Sorry about my english.
This is a difficult problem. I have also found that existing HTML to PDF libraries usually don't handle the HTML & CSS that I throw at them.
The best solution I have found is not Javascript at all: wkhtmltopdf. This is essentially a program that wraps up the webkit rendering engine so that you can give it any HTML + CSS that webkit can render and it will return a PDF document. It does an outstanding job, since it's actually rendering the document just like a browser would.
You mention that you're using node.js, but it's not clear exactly what your environment is, so I'm going assume that your report is available at a URL like http://my.domain/phase_one_report.html. The simplest way to get this working would be to install the wkhtmltopdf application on your server, then use child_process.exec to execute it.
For example:
import { exec } from 'child_process';
// generate the report
// execute the wkhtmltopdf command
exec(
'wkhtmltopdf http://my.domain/phase_one_report.html output_file.pdf',
(error) => {
// send the PDF file to the client
}
);
There are a lot of different command-line options for wkhtmltopdf - you'll need to look into all the different ways to configure it.
If your report is not accessible at a URL, then this becomes a little more complicated - you'll need to inline the CSS and send everything to wkhtmltopdf at once.
There are a number of options available right now:
Edit 09/2018: Use puppeteer, the JS Headless Chrome driver. Firefox now also has headless mode but I'm not sure which library corresponds to puppeteer.
wkhtmltopdf as mentioned before does the job but is slightly outdated.
You will have to watch the latest chrome releases which will have a --headless option to enable html+css+js to pdf conversion.
Then there is PhantomJS and Slimer.js. Both are possible to use with node and Javascript. Nightmare.js is also an option but sits on top of it.
However, Phantom.js is currently the only solution that is truly headless and javascript based. Slimer.JS works with Firefox but requires you to have a window manager, at least xvfb, a virtual frame buffer.
If you want the latest browser features you will have to go with slimer.js or, another option, go with one of the Electron based solutions that keep popping up. Electron is based on Chrome and is scriptable too. A fine solution that also ships with Docker containers is currently https://github.com/msokk/electron-render-service
This list is possibly incomplete and will change a lot in the near future.
Related
I need to figure out a way to show the output of a particular bash command (like ls -la) in my web application and I wanted to know if there is a library that does that. Simply showing the output in the black/white style is not enough since the output contains characters that only a bash terminal can render in the right way. For example, the output of composer install contains the following line (the percentage is changing):
- Installing bacon/bacon-qr-code (2.0.4): Downloading (100%)
but behind the terminal, it has the following appearance:
- Installing bacon/bacon-qr-code (2.0.4): Downloading (connecting...)\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\bDownloading (0%) \b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\bDownloading (5%)\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\bDownloading (10%)\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\bDownloading (15%)\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\bDownloading (45%)\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\bDownloading (50%)\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\bDownloading (55%)\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\bDownloading (60%)\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\bDownloading (65%)\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\bDownloading (70%)\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\bDownloading (75%)\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\bDownloading (80%)\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\bDownloading (100%)
Thanks in advance.
What you're looking for is Xterm.js (https://xtermjs.org/). All the major Web apps (or even desktop ones based on Electron) are using it for emulating console/terminal look and behavior. And it's frameworks agnostic, meaning that you can use it with whatever framework or library you like.
I don't know of any other better for what you seek to achieve.
I have a text file i want to read in my html page,both are in the same directory and i am not running a server. I intend that my users use the script offline(basically text manipulation based on expressions and preserving new line characters) .
I tried ajax call but mostly cross domain origin problem occured and i know most of the users will have this security tighened up in many browsers , so its not of use to circumvent this in only in my browser.
I want to support many browsers including old browsers as in IE7,8 etc which do not support HTML5 filereader.for the same reason reading using filesystemobject or activex is not good.
Reading the file after user select it as input , is this possible?Otherwise i would have no option then using other technologies like php,java etc which may expect my user to setup these.
Please excuse me if i am repeating this but i am a beginner web developer. I know that reading local files via javascript is not possible but is there any other way?
If you can't support FileReader, then the answer is pretty much no (at least, if you want to support a large range of browsers rather than rely on convenient feature x of browser y). Unless : you indeed increase the requirements for running the application and get some sort of local server going (for instance node.js, Apache, TomCat, etc. but like you said this will greatly increase the requirements and become cumbersome for users).
You could also rethink what it is you're trying to achieve. What are the contents of the file you want to read ? Can't these contents be part of the HTML file you're serving to your users (i.e. a large JSON Object inside a script-tag ?)
On possibility of using node.js:
Node.js is quite easy to install and assuming you are requiring from your users to install it, you can use it as a local server, which is a nodejs script of about two lines in size :). Running it locally would also omit the need to upload anything anywhere as you can directly read from the file system using the fs-object (see sitepoint.com/accessing-the-file-system-in-node-js).
STILL: from both a design and ease-of-use-point of view you might want to resort to using either another technology, or include the text file content inside the HMTL file
I am working on project that allows to read document within the browser without the need to install software , It's a part of a management application for companies.
I tried out to work with iTextSharp ,PDFSharp , but these labrories don't allows you to do what I want to do.It's just for generating pdf from HTML.
I checked out for another solution , I found an interesting project developed by Mozilla Lab . Mozilla is working on technology that will allow PDF documents to be rendered within the browser, rather than utilizing a browser plug-in or an external app to open them.
https://github.com/Marak/pdf.js/
I wonder to know Can I integer this script and use it with ASP.Net ? , If yes , I will be pleased to be guided by you with code source or external links that you recommend in order to implement this solution.
I believe that link you have sighted is about creating PDF file in browser (and not about showing existing PDF in browser).
Said that, there is another interesting project pdf.js that is trying to render PDF using java-script and HTML 5. Its essentially a java-script library that takes PDF bytes and attempt to render them. As such, you should able to integrate it in any web site regardless of server side technology - include the script and make relevant calls. See this simple example to get started.
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
I am looking for a simple commandline script/program to automatically "inline" all external css and javascript references for a html file. I basically want to create a single self-contained html file suitable for sending via E-Mail. An additional bonus would be if it could also inline images as data: UIRs, but that part is not so important.
EDIT : I wrote a little Python script for fun. It seems to work pretty well :
Inline2Mail
Or you can still try with :
Front compiler does something like that but it implies javascript. You have an online solution as well, with premailer. Finally you have a Python and a Ruby script to do it.
There is a Node.js library which solves exactly your problem: https://github.com/remy/inliner/ It can be used both as a commandline script and a library.
It will make you a single .html file which can be sent anywhere by any means and be opened later in any browser without the need in Internet connection.
If you think about inlining CSS and Javascript to make a HTML body of an email, just forget about it. Most Email clients out there will either ignore or badly damage your styles and I think all email clients will just plainly drop the inline Javascript in the body of emails.
This Python project of mine can help with getting the CSS styles inline https://github.com/rennat/pynliner
If it's not something that needs to be automated and you're using Windows you could open the web page in Internet Explorer and save it as 'Web Archive, single file (*.mht)'. This will pack everything into a single file, including CSS, JavaScript and images. Note that the recipients needs to have access to Internet Explorer to be able to open the Web Archive. Neither Google Chrome nor Firefox supports mht files, so it's probably a Microsoft only feature.