Html – How to insert a page break in HTML so wkhtmltopdf parses it

htmlpage-breakpdfwkhtmltopdf

So basically I'm using wkhtmltopdf to convert a dynamic HTML report to PDF.

The report has a particular format and I've been asked to clone that format with HTML.

The problem I'm facing is that I can't simulate a 100% functional page break in html so wkhtmltopdf can interpret it and send content to another page.

I'm trying to avoid page size measurement methods and so.

TIA for any help provided.

EDIT:
So far I'm emulating page break using <br> and it works. I still have to do some testing though.

Best Answer

Specify a CSS rule specific to the print media type. There are a number of properties that can be used for paging. I find it easiest to attach the page-break-before property to a class, as shown below.

In the HTML:

<p>Page 1, paragraph 1</p>
<p class="new-page">Page 2, paragraph 1</p>
<p>Page 2, paragraph 2</p>

In the CSS:

@media print {
  .new-page {
    page-break-before: always;
  }
}

Related Solutions

Javascript – How to modify the URL without reloading the page

This can now be done in Chrome, Safari, Firefox 4+, and Internet Explorer 10pp4+!

See this question's answer for more information: Updating address bar with new URL without hash or reloading the page

Example:

 function processAjaxData(response, urlPath){
     document.getElementById("content").innerHTML = response.html;
     document.title = response.pageTitle;
     window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
 }

You can then use window.onpopstate to detect the back/forward button navigation:

window.onpopstate = function(e){
    if(e.state){
        document.getElementById("content").innerHTML = e.state.html;
        document.title = e.state.pageTitle;
    }
};

For a more in-depth look at manipulating browser history, see this MDN article.

Html – How to create an HTML button that acts like a link

HTML

The plain HTML way is to put it in a <form> wherein you specify the desired target URL in the action attribute.

<form action="https://google.com">
    <input type="submit" value="Go to Google" />
</form>

If necessary, set CSS display: inline; on the form to keep it in the flow with the surrounding text. Instead of <input type="submit"> in above example, you can also use <button type="submit">. The only difference is that the <button> element allows children.

You'd intuitively expect to be able to use <button href="https://google.com"> analogous with the <a> element, but unfortunately no, this attribute does not exist according to HTML specification.

CSS

If CSS is allowed, simply use an <a> which you style to look like a button using among others the appearance property (it's only not supported in Internet Explorer).

<a href="https://google.com" class="button">Go to Google</a>

a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

Or pick one of those many CSS libraries like Bootstrap.

<a href="https://google.com" class="btn btn-primary">Go to Google</a>

JavaScript

If JavaScript is allowed, set the window.location.href.

<input type="button" onclick="location.href='https://google.com';" value="Go to Google" />

Instead of <input type="button"> in above example, you can also use <button>. The only difference is that the <button> element allows children.