html5 save edited content as image or pdf - html

(I'm new to this)
I want to create a html5 page/application with text boxes to be filled out.
My objective is that once the user has completed filling out the empty fields they can hit one button on the webpage to save the content (including all pictures, texts, and the fields they completed) all as either an image or even pdf for printing later.
Also note I'm doing this for mobile platforms, so I want the user to be able to store on their device after editing from their device. So options such html to pdf converter sites aren't usable.
Anyway this possible? Thanks.

Related

How to insert a pdf file as an image in HTML?

<img src="img.pdf"> doesn't work due to it being a pdf. I don't like the embed and iframe environments either, since they add the pdf viewer options, the scroll etc. I tried converting the pdf to an image with the convert and pdftoppm commands on Linux, but these result in the image having extra white space on top and bottom to fit A4 format, and/or makes the background black (instead of white or transparent).
Any ideas?
"Img" is in effect an iFrame of an embedded binary object, but it is borderless since it is statically scaled to one non zoomable size. Note the img above this text is framed as https://i.stack.imgur.com/xpw2l.png
Yes there are ways to make it more dynamic but vanilla binary PNG/JPG/ETC are imbedded, and part of the binary HTML viewer renders those fixed areas. You can switch them off if you wish, or they don't display if badly served.
So why is PDF not simply treated like an image as per your question?
The answer is simple they are a different type of binary that requires a different html viewing binary extension. One frequent complaint is why use "menus and scrollbars if not needed for a simple file?"
The answer to that is those controls need to be in the extension, for zoom pan etc. So how comes the FireFox viewer above has none?, that's because as a user I switched them OFF.

Why the same webpage have different font size when save as PDF in Google Chrome?

I'm using the fauture save as pdf in printing dialog of Google Chrome to print this website. The website has two display options: 1. non-expand and 2. expand. In the 2nd option, the solution to exercise will be shown. The 1st option is by default when we visit the website, whereas to active the 2nd option, we need to click on the plus symbol on the top right corner:
I could not understand why the font size of PDF document is significantly smaller in the 2nd option.
1st option:
2nd option:
I save both of them as complete webpage and they have the same files, except for the .html file.
Could you please elaborate on how this problem arises and how to adjust the html file of the 2nd option to have the bigger font size as the 1st option?
I've figured out: this is because the font size will be reduced so that long equation can fit in.

Printing without print screen

I am trying to create a custom web app that will be run from specific locations. I would like to print without any preview and preset screens (basically all the settings need to be saved beforehand on the browser / in the code) so that the user clicks on "Print" and no windows are opened, but the paper gets printed. How could I do that?
I was thinking of using an iPad as the hardware but am open to other solutions.
Thanks a lot in advance!!!!

display overflow html content outside browser

This may be the dumbest question ever but our customer really wants this. I am asking this silly question just to be sure that it cannot be done.
We have a popup window which has opened by window.showModalDialog (img 1)
In this window there is a custom autocomplete control which displays an html table. The problem is autocomplete table is wider than the modal dialog. So user is unable to see the contents of this table. (img 2)
Then we made initial size of the modal dialog wider enough to see table contents but customer did not want the initial empty area and did not want the content to be wider also. (img 3)
The customer wants to see the thing as in img 4 which i could only made by paint.
Is it possible to display overflowed html content outside the browser. At least for the ones which has opened by window.showModalDialog.
Note: This is about a 10 years old project and it is totally based on window.open and window.showModailDialog. So using a custom jquery dialog or something similar is not an option.
Within your client's constraints, your task is not possible.
What you could do instead is popup another modal window that shows the contents of the dropdown. That way, you can get a differently sized viewport than what the first modal window offers. Also, if you open the new one as a child, you could even pass messages between the 2 windows.
Of course this will be a very rudimentary stone-age solution! You may also come across a lot of browser limitations/quirks.

create a page which contain a flash can be add text dynamiclly

I have to create a web page which can be set to full screen(I mean the real full screen,not like press the F11),in the full screen there should be some words displaying.
Take the http://stackoverflow.com for example:
Normally,it show its contents(the questions),but someday,maybe a VIP come to visit the page,so we want to replace the whole page with a welcome screen.
Of course we can replace the https://stackoverflow.com/index.html (suppose it is the index page) with the welcome text(welcome xxx to our site...) in the server side.
However this is not convenient,and the text can not be full screened.
So I thought the flash,I can add a controller button at the page,when required,I click this button,and set the welcome words,then a flash will start to play with the sepcified words in a full screen model. It would be better if the flash can show the text with a Animation.
I have never did the flash development,so I want to know if this is possible?
BTW,can all the clients change to flash with juse one click?
I mean I click the controller button,then all the client who is visit this page should see the contents replaced by the flash at the same time.
I am not sure if you guys know what I am meaning. If not,I can update more details.
I am really Anxious, Thanks. :)
Since you're starting from scratch with Flash, I made a quick example of what I think you want to do. http://clearmpls.com/temp/fullscreen/ - the source files that I made this example with can be grabbed from here: http://clearmpls.com/temp/xml-loading-fullscreen-thing.zip
I used the Flash IDE to create this. You can grab a 60-day trial from Adobe's site here: https://www.adobe.com/cfusion/tdrc/index.cfm?product=flash
This example shows examples of these functions:
- it loads an XML file with text data
- displays that data in a textfield on the stage
- gives you a button where you can toggle back and forth between fullscreen and regular
- resizes the stage and textfield based on what you have written in your XML file