How to print (to a printer) full DOM of a react page - javascript

I'm trying to allow a user to print a page of React (ideally just using window.print()). However, when I try to print it only shows the active portion of the page (what can be seen in the browser) and not the full page (everything including what's below the fold). I've seen that this is a problem with React apps in general and not just my app. What's the best way to print everything on the page?

Related

is it possible to use retrieving history (or document state) as a navigation in browser?

I'm worrying that I won't get any reply from stack overflow, because I couldn't get any reply from previous question. You don't need to fully read previous question, but It could be helpful to understand my question.
Our company is on service that html document builder(windows application) and I'm a desktop s/w engineer. after build html document with our windows app, we export all things to html/js/css.
Consumer of our application is a designer who creates or edits contents via our windows app. and the end-user of contents which is created by designer see contents via browser(chrome, safari (iphone), samsung browser).
The Problem is, my superior (programmer) wants use java-script as a navigation, this is possible. but, he want to save all state of document state before navigation, so after navigation to any page and then comeback to origin page, all state - animation (contents may have animation) and all script state - should be same exactly before he leaving origin page.
More specifically, main html has a iframe, and iframe can shows all contents. Main.html have a navigation button so iframe can navigate all contents created by designer. If user interacted with page1.html inside iframe, then make iframe to change its content to page2.html by clicking navigation button (go to second page button implemented inside main.html but outside of iframe). and then back to page1.html, he get exactly same state as before he leaving page1.html.
At a glance, It seems quite possible just implement go-forward or go-backward, but dynamically paging navigation is impossible to me. I found some techniques - access browser visit history and window.history object, but It seems there isn't user-defined way.
I thought Electron app(desktop) will be fine for our solution, but my superior says It should be works well with just html/js/css. Our final product should be shown in desktop, iPad, mobile or any device that handle web browser.
I need technical advice to accomplish this issue, I'm fine there is no way to control navigation while saving document state. Help me please.
Document state can be saved by using localstorage object in javascript.

Single page rendering in pdf.js

Currently I am using build version from here https://mozilla.github.io/pdf.js/getting_started/#download
I would like to show only one page of pdf at screen in normal mode (not presentation mode).
Navigation between pages would be possible only through toolbar buttons. Scrolling only works for moving the displayed page displayed page.
I found something here https://github.com/mozilla/pdf.js/pull/8724 , but i don't know how to use it in my website.
Could somebody help me with that? I can't find any example of using single page mode.

Select of a section of a web page and output all js used there?

Is there an application that allows me to select a section of a web page, and then outputs all js used there? I've been told I can do this with Chrome Inspector, but haven't had any success so far.
Example:
On this page - http://preview.oklerthemes.com/porto/2.7.0/page-left-sidebar.html - there is a tabbed box in the sidebar. I want to easily grab all the JS/CSS needed for that box. I usually use Inspector to look at all the styles, and go and grab theme from each CSS file, but I don't know how to do this for the JS.
It's not quite clear from your question what you're asking.
Are you trying to see what JS causes writes or changes to a particular part of a web page? The easiest way would be to open the page with the element inspector, right-click a particular chunk of HTML and stick a breakpoint on modifications.
The next time a function causes any changes, the breakpoint will trigger and you'll be able to crawl up the call stack to see what the cause was.

iPad fullscreen mode - no escape found

I have a web App which has links to other web pages. When a user taps one of these links while the app is running from full screen mode the new page opens in full screen as well and so there is no means of navigating back to the web App. Has anyone found a method for escaping full screen mode on the iPad once a web App has been launched from a home screen icon ?
Try redirecting with javascript, like:
document.location='';
We actually consider this a bug, but as always there are those who would see this as a feature :)
If the page your going to is supposed to be in the app, then this solves your problem.
How can I open an external link in Safari not the app's UIWebView?
If the page is any page on the internet, then the answer is pretty much no.
Once you leave the app, there is no way back, except for the user clicking back on your app.
It is not simple to force the ipad to stay in your app. Some suggested methods:
Create your own web view in your app. If your using phone gap, or another framework, you would have to create a plug in to do this. You would then show the loaded pages on that web view, this is similar to how ads are shown & stay in the app.
Parse and replace all the links on the loaded page with custom events, and use a server to return the content, instead of loading it directly via the web.
Both are very complex, and have issues, like you cant have white lists if you let them browse outside specific domains.

Take a screenshot of a certain website at a given moment

I want to take a screenshot from my website of another website or preferable 1 part of it (an object tag).
I want it to work this way: I click on a button that will send a request to screenshot the page at this moment. Several ideas are insert the page inside a flash object and screenshot it. Or opening a browser on the server and when I click the button send a request using AJAX to tell the server to screenshot with this browser.
How should I do this because I kind of failing right now with the flash Idea. The page I am trying to screenshot is a live camera that uses a .wvx object. But I can't even do that with a .swf object.
Thanks!
You can try phantomjs. They have several examples of renderding page output. It supports plugins like flash too.
render() always renders the entire page. To just render one <object> tag, I guess you can do one of:
create a page that only contains that <object> tag.
use javascript to remove everything else.
crop the final screenshot based on <object> page coordinates.
To use phantomjs from php, try php-PhantomjsRunner.
Edit 1: In case you only want to render a flash file that does not actually rely on the web page it is in, you can try Gnash according to the blog post "Server-side PNG rendering of SWF images using Gnash" by Valentine Bichkovsky.
phantomjs screen-scraping

Categories

Resources