How can you print a page that has been altered by javascript?

Question

Here is a screenshot of what I have.

The user can alter the page by deleting items, by adding items, or by clicking on items to cross them out. I want the user to be able to print the page that they have altered with javascript. From what I understand, to let the user print, you create a separate file with different stylesheet settings.

I'm using Rails 4, and I figure I'd use this to create a PDF for the user.

1) I don't know how I'd generate the document with the right things deleted, added, and crossed out.

2) I'm not exactly sure how I'd generate the document such that it doesn't have things like the navigation (because you don't need that for the list you print out). I was thinking of just hiding it with CSS.

Answer 1

1) The changes being made by the customer are client-side? In that case, kept track of all the users changes, and when the user clicks on "print", send all those changes like a parameter to rails so you can render the right information to be printed from your rails action.

But usually, on a rails/javascript application, when the user performs different actions with javascript on the client-side, it invokes some ajax code that notifies the rails application about the changes, so you can store the new state on the rails database, so the user can reload the state later. You can also store the state of the application in a session or a temporary cache.

2) Thats exactly what I do when I want to customize what the user is printing, I hide the classes that I don't want to get printed, on the html, when including the css, you tell to the browser that css should be applied to the printed documents by including the media print, like:

stylesheet_link_tag "my_style", media: "print"

Nevertheless, on this case, you are not using the browser printing feature, from what I can understand from your Question, you are going to generate a pdf, because of that, you will be ending rendering a view from rails, you can either add a parameter to let the view know that it will be rendering for printing (so you can draw custom css or just avoid rendering the navigation bar) or you can just invoke a different action with custom code/view for generating the pdf.