How to print a web page using the backend Rails?

Asked

Viewed 2,443 times

7

It would be possible to do this?

For example:

I point a page to my application, and she keeps a image of the page indicated. A print.

2 answers

6


You can use the library html2canvas to save an image. I have prepared the following demo for you:

HTML:

<div id="welcome">
    <h1>Hello world!</h1>
</div>

<hr>

<div id="screenshot"></div>

Javascript:

var content = document.getElementById('welcome')
    , screenshot = document.getElementById('screenshot');

html2canvas(content, {
    onrendered: function(canvas) {
        screenshot.appendChild(canvas);
    }
});

jsFiddle to view.

The technique is very simple: #welcome is the element you want to capture a screenshot; #screenshot is where it will be displayed.

To accomplish the effect you want, you must work in complicity with Rails. You said the following:

I point to a page for my application, and it keeps a picture of the page indicated. A print.

So, by my interpretation, you want to take a picture of a full page. For that, you will need to consume the body of that page (element body) and use it as a reference in html2canvas (in this case, the variable content (in Javascript) is responsible for this). See only:

uri = URI.parse("http://yourapp.com")

http = Net::HTTP.new(uri.host, uri.port)

request = Net::HTTP::Post.new(uri.request_uri)

response = http.request(request)

render json: response.body

The code above, based in this one, will consume all the body page. Then, using render json: response.body, you will be sending, via JSON, this body to anyone who requests.

In short, with a scenario:

  1. Create a input for you to type from which site you want to capture the screen and a button to send the request to the server (Rails);
  2. When you or any user click on button, send the value of input to the server - asynchronously, with AJAX - and use it to work with URI.parse;
  3. So the element body, which is what you need to take picture of the page, will be stored in the fragment response.body which is being returned to the customer through the render json;
  4. Finally, in the succession of your request (of the type GET, via AJAX), you call the function where html2canvas is cleared and use the request response to populate the variable content;

The line you should follow is about that. There are some adaptations you can make along the way, but the idea was given.

  • 1

    Exactly what I was looking for, I’m starting and I still don’t know these libraries, thank you very much!

2

The answer to your question is too complex to be detailed, you need to use a service for managing tasks like the Sidekiq and integrate it with Gem Phantomjs GEM, remembering that for this you will need to have installed the Phantomjs. Phantomjs will allow you to capture these screens and for more information, see: Screen Capture Doc

Then through GEM you can interact using:

require 'phantomjs'
Phantomjs.run('./path/to/script.js') # => retorna stdout

Browser other questions tagged

You are not signed in. Login or sign up in order to post.