i was wondering if some of you experienced this problem, to generate pdf file from vue js or other js framework pdf file. I am not going to mention what libraries i tried, i am searching for a native way. Did some of you do something closer to this. The pdf needs to be generated from page that is is dropdowns and butons, so the functionality needs to remain in some way. Can you give me some proposals how to do it, with DOM or etc.
Where do you want to transform it into a pdf? On the server or in the browser?
In the browser, I'd recommend to simply allow the users to print it and use css to control what will be shown (using the print media query).
Then, instead of sending it to a printer, users can also choose to transform it into a pdf.
On the server you'll have to look for some libraries that offer this specific functionality and see which ones fit your usecase best.
Lastly, what do you mean with "the functionality needs to remain in some way"?
I'm not an expert in what PDFs can do, but they definitely cannot do enough to emulate a web-page – especially one that is complex enough to warrant using vue.js.
What exactly would you like to keep/have happen?
Related
First of all, I have a background in C (++), Java, MATLAB and Python, mainly used for scientific and electronic applications (Math operation on data, reading data from sensors, microcontrollers).
But i'm relatively new to both HTML (CSS) and Javascript.
For both I've read some books. In HTML books, multiple pages are done by links (<a></a>).
In javascript (which feels a lot more natural to me than HTML), I've seen some examples where there is only 1 html page, full of divs, who are shown and hiden each time a certain page needs to be shown.
This is done with the Jquery command $('#div1').hide() and $('#div2').show();
Now my question is, what is the best practice? When is it better to have multiple HTML pages, and when is it better to have just hide/show divs with Javascript?
Thanks
Not Every one Can Use Javascript. Not Every Computer Or Browser Has The Basics Of Java Installed. But Every Computer Can Read HTML every Browswer Can Read HTML.
To identify If a visitor is using java.
How to check whether Java plugins are installed or not in a browser using Code .?
Java is mostly installed now days with the browser some basic functions. But older navigator or IE browsers dont always have it installed by default.
More Info Here also
How can I detect the Java runtime installed on a client from an ASP .NET website?
The easiest is using <ul><li> css navigation themes. Check this site out for more info.
https://medialoot.com/blog/how-to-create-a-responsive-navigation-menu-using-only-css/
When you have multiple html pages and user clicks on links, then on each click a new web page has to be fetched from server and then rendered.
Whereas when you do it in java script the same web page will be altered, so there are no additional requests to the server. And this will be much faster than loading a new web page.
But remember the initial loading time is second approach is longer but its negligible.
Let me point out that there is no "best practice" to the question that you are asking. It is entirely up to the team if they want to push all the content in one page or keep them separately.
If in case you have a content that requires decent amount of images to be loaded, or contents that you are sure will rarely be seen, you might want to keep them in separate pages so as to make the page load faster.
If you have heavy contents which requires a lot of interaction with javascript/jQuery then you certainly might want to keep them in separate pages so that later when you want to debug/add to the code it can be easily done.
The vice versa of the above holds true as well.
If in case you just have small content, or simple text content then you can easily do it in a single page.
Maybe you should use a tab component ? bootstrap wraps one very nicely:
http://getbootstrap.com/javascript/
Maybe thats the best approach, also take a look at angular.js routes in specific, it should do what ever you are looking for.
I'd sum this up as looking for an offline client solution that is 100% standalone and uses no external files/libraries or other machine resources to tabulate data from a user-chosen TSV file (the result is simply rendered in a plain HTML table - nothing fancy, just data).
I am not a web programmer, but have volunteered to do this project. I have been asked to code this as a browser-based solution because the party deems it the most user-friendly for their needs.
Again, this is not an html file that is served; it is emailed to a client that copies it into a folder of their choosing and run (by selecting a local file to render).
Every time I attempt some solution (e.g., FileReader, etc.), I can only get it to only work in a certain manner with specific browsers (including having to use it differently in the same code depending upon the browser - is this simply my lack of knowledge?).
My question is: Is there one single way to code this for most browsers (including older browsers like IE8)?
If not, I would most appreciate suggestions - both general and specific.
An example would be helpful if possible.
Thank you in advance.
If you're looking for client/browser specific, you won't have access to the file system. That's a security breach that isn't implemented into the browsers. You're going to need to implement some sort of server-side technology to take a crack at the file being handed over, or you will need to strictly specify which browsers are supported (things like FileReader are only IE10 or better).
I've never tried using the INPUT FILE to see if it will load a file before pushing it to the server (in say a FORM POST or a XHR/AJAX push)- but maybe look here:
https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications
Let's see -- what else. If the file has a specific name, your HTML could reference it in an IFRAME and see if you can't communicate back and forth between the IFRAME and the parent window.
You're really limiting yourself without having a server being able to process it, and the browser range you need. Your best bet might be the File API and restrict the lower limit of browser compatibility?
http://www.html5rocks.com/en/tutorials/file/dndfiles/
AFAIK, there is no way to do this for all browsers. Especially for IE8. If you need a standalone application, the best way is to use C++/Java/C# or any language that allows to create desctop applications.
I have been learning a bit of jQuery and .Net in VB. I have created a product customize tool of sorts that basically layers up divs and add's text, images etc on top of a tshirt.
I'm stuck on an important stage!
I need to be able to convert the content of the div that wraps all these divs of text and images to one flat image taking into account any CSS that has been applied to it also.
I have heard of things that I could use to screen capture the content of a browser on the server which could be possible for low res thumbs etc, but it sounds a little troublesome! and it would really be nice to create an image of high res.
I have also heard to converting the html to html5 canvas then writing that out... but looks too complicated for me to fathom and browser support is an issue.
Is this possible in .NET?
Perhaps something with javascript could be done?
Any help or guidance in the correct direction would be appreciated!
EDIT:
I'm thinking perhaps I could do with two solutions for this. Ideally I would end up with a normal res jpg/png etc for displaying on the website, But also a print ready high res file would be very desirable as well.
PostScript Printer - I have heard of it but I'm struggling to find a good resource to understand it for a beginner (especially with wiki black out). Perhaps I could create a html page from my div content and send it to print to a EPS file. Anyone know any good tutorials for this?
We did this... about 10 years ago. Interestingly, the tech available really hasn't changed too much.
update - Best Answer
Spreadshirt licenses their product: http://blog.spreadshirt.net/uk/2007/11/27/everyones-a-designer-free-designers-for-premium-partners/
Just license it. Don't do this yourself, unless you have real graphics manipulating and print production experience. I'd say in today's world you're looking at somewhere around 4,000 to 5,000 hours of dev time to duplicate what they did... And that's if you have two top tier people working on it.
Short answer: you can't do it in html.
Slightly longer answer:
It doesn't work in part because you can't screen cap the client side and get the level of resolution needed for production type printing. Modern screen resolution is usually on the order of 100 ppi. For a decent print you really need something between 3 and 6 times that density. Otherwise you'll have lots of pixelation and it will generally look like crap when it comes out.
A different Answer:
Your best bet is to leverage something like SVG (scalable vector graphics) and provide a type of drawing surface to the browser. There are several ways of doing this using Flash (Spreadshirt.com uses this) or Silverlight (not recommended). We used flash and it was pretty good.
You might be able to get away with using HTML 5. Regardless, whatever path you pick is going to be complicated.
Once the user is happy with their drawing and wants to print it out, you create the final file and run a process to convert it to Postscript or whatever format your t-shirt provider needs. The converter (aka RIP software) is going to either take a long time to develop or cost a bunch of money... pick one. (helpful hint: buy it. Back then, we spent around $20k US and it was far cheaper than trying to develop).
Of course, this ignores issues such as color matching and calibration. This was actually our primary problem. Everyone's monitor is slightly different and what looks like red on one machine is pink on another.
And for a little background, we were doing customized wrapping paper. The user added text, selected images from our library or uploaded their own, and picked a pattern. Our prints came out on large-format HP Inkjet printers (36" and 60" wide). Ultimately we spent between $200k and $300k just on dev resources to make it happen... and it did, unfortunately, the price point we had to sell at was too high for the market.
If you can use some server-side tool, check phantomjs. This is a headless webkit browser (with no gui) which can take a page's screenshot, an uses a javascript api. It should do the trick.
Send the whole div with user generated content back to server using ajax call.
Generate an HTML Document on server using 'HtmlTextWriter' class.
Then you can convert that HTML file using external tools like
(1) http://www.officeconvert.com/products_website_to_image.htm#easyhtmlsnapshot
(2) http://html-to-image.acasystems.com/faq-html-to-picture.htm
which are not free tools, but you can use them by creating new Process on server.
The best option I came across is wkhtmltopdf. It comes with a tool called wkhtmltoimage. It uses QtWebKit (A Qt port of the WebKit rendering engine) to render a web page, and converts the result to PDF or image format of your choice, all done at server side.
Because it uses WebKit, it renders everything (images, css and even javascript) just like a modern browser does. In my use case, the results have been very satisfying and are almost identical to what browsers would render.
To start, you may want to look at how to run external tools in .NET:
Execute an external EXE with C#.NET
I'd like to build a webapp with a real rich user interface. (think graphs that can be manipulated with mouse gestures).
In order to be nice to environments that don't support java script (crawlers, other computers), the application should work without javascript just as well. I mean it should offer all the features but in a low fidelity kind of way. Just forms and links that is.
How do I go about this? Are there libraries available for something like this?
For the java script UI I'm currently considering extJS, but that isn't fixed at all.
Start with something that works with plain links and forms (e.g. where values are typed instead of pointed at), then layer JS based drag and drop on top of it.
See:
Progressive enhancement
Unobtrusive JavaScript
Flash but perhaps thats cheating, SVG is another good idea as a fallback as no-script browsers are unlikely to be webkit ones.
Also perhaps making image on the fly through the server using ImageMagick or GDLIB so images/graphs etc are made when the page is requested. It's kinda old school, but so is expecting no-script browsers ;-)
One thing I'd say about EXT: It's great but it's heavy and it takes a long time to get your head around as it really doesn't feel 'open' more like a bunch of components that you can configure but not alter.
If you want SVG and javascript perhaps look at Raphael and it's graphing/charting brother gRaphael :
http://g.raphaeljs.com/
http://raphaeljs.com/
Specifically, what I'm trying to do is create a mobile version of a site I don't have access to. The best approach I can think of is this:
My site executes their php search file and then displays the results page, but first modifies its DOM to use my CSS. Is it technically possible?
Your site can definitely access web content from another site, filter/transform it however it wants, and then forward the result wherever it wants. It is not a simple problem, potentially, as so much web content is dynamic. For example, if the source site has content that's formatted with CSS that's dynamically built by JavaScript, it'd be fairly difficult to come up with an automated transformation.
Whether the original site's owners will be happy about your site doing that is a separate issue.