Welcome Guest Search | Active Topics | Sign In | Register

Essential Objects Product Support Forum » All Products » Support » Using VisibleElementIds to print a column in a Bootstrap layout

Using VisibleElementIds to print a column in a Bootstrap layout Options
Previous Topic · Next Topic
Stephen Davies
Posted: Wednesday, September 6, 2017 9:40:08 PM
Rank: Newbie
Groups: Member

Joined: 9/6/2017
Posts: 2
Hi

I have a bootstrap 3-9 layout in a Sitefinity CMS with content in the 9 column, navigation and info display in the 3 column.

I have set VisibleElementIds to a block in the 9 column for PDF creation. All seems to be working perfectly except the content still looks in the same position on the page (i.e. 3-9 layout with a blank margin in 3 and VisibleElementIds content right aligned on the page).

I understand you are hiding all of the elements NOT within the VisibleElementIds area which is working fine I just need to discard the layout so that the output spans from the left margin to the right on the pdf.

I am sure this is must be a common issue, I have searched around the forum but cannot find any answers. You product will fits my needs perfectly so long as this issue can be solved, then I am happy to purchase a license.

Unfortunately the site is not currently publicly visible but the pdf output looks like this:



If we really need to I can expose the site, I am just hoping there is a simple off the cuff solution out there :-)

Thanks.
Back to top
 
eo_support
Posted: Thursday, September 7, 2017 7:12:16 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,225
Hi,

There isn't a one size fit all way to "discard" certain layout because it's very page specific. So it can not be implemented on our side. You can however implemented it on your end using this method:

https://www.essentialobjects.com/doc/eo.pdf.htmltopdfsession.runwebviewcallback.aspx

This method allows you to load the page, then modify it before rendering it. You will need to change the code inside the callback function to something like this:

Code: C# 
//Load the page into the WebView
webView.LoadUrlAndWait(url_you_wish_to_convert);

//Run JavaScript code to modify the page to fit your need
webView.EvalScript(script_code_to_modify_the_page);


After that you can call RenderAsPDF to render the modified page to PDF.

Hope this helps. Please feel free to let us know if you still have any questions.

Thanks!
Back to top
 
Stephen Davies
Posted: Friday, September 8, 2017 4:28:22 AM
Rank: Newbie
Groups: Member

Joined: 9/6/2017
Posts: 2
Thanks for that, I have implemented the above sample code and am able to reproduce the same pdf.

Can you point me to any samples that demonstrate the PDF manipulation using JavaScript as I am not quire sure how to adjust the columns to display the document in full page.

Thanks
Back to top
 
eo_support
Posted: Friday, September 8, 2017 10:13:27 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,225
Hi,

There is no such thing as "PDF manipulation using JavaScript". Your goal is to manipulate the web page, not the PDF file, with JavaScript. Once you manipulate your web page into the desired state, you call RenderAsPDF to render the modified page into PDF. Our API simply provide you a way to do so.

Using JavaScript to manipulate a web page by itself is a huge and very generic topic ---- that's pretty much half of web programming (the other half is on the server side programming, with JavaScript being the client side programming). So we are not in a position to provide you support on that. If you are not familiar with it, you can search online about JavaScript programming and you should be able to find a sea of information.

One way for you to get started is to follow these steps:

1. Load the page you want to convert with Google Chrome browser;
2. Open Google Chrome's Developer Tools, then go to the "Console" tab;
3. Type in whatever JavaScript code you want to try there and hit enter. For example, if you type "document.body.style.display = 'none';" and hit enter, then the whole document area will disappear;

Obviously hiding the whole document is not what you wanted --- your goal would be writing the correct JavaScript code to achieve the final page layout you want to achieve. Once you achieve that in Google Chrome browser, pass the correct script code to webView.EvalScript and you will be all set.

Hope this helps. Please feel free to let us know if you still have any questions.

Thanks!
Back to top
 


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.