This little javascript library transforms and wraps html content in a way, that the output is suitable for different paper formats. Or in simpler words: This is an html to (paper)sheets library. So as a result you have those typical document / paper formats. You can print the result properly or create pdf documents out of it.
I want to write my documents, letters, documentations, papers, etc. in HTML and not with programs like microsoft office or libre office, so I tried to do that. If you just need some page-breaks, "not so precise" borders and no headers and/or footers per page, the standard HTML/CSS possibilities are ok to create something out of HTML. But if you want or need some more features and functionality, you will run into some problems, play around for hours or days with HTML and CSS and get no proper result out of it. So I came up with a little html-css-javascript-library-system-thing to achieve that.
See chapter getting started for the details
- Create an html file with your content in the proper way.
- Include the javascript file under js/html2sheets.js
- Create a variable with the config.
- Instantiate and initialize the class Html2Sheets with the config.
- When you open the html file, the class does its magic.
Download the files, put them somewhere, edit the root html file or create a new one or whatever, you know how this works (at least I hope so).
Here is an example basic structure of an html document. It's basically just about including the html2sheets javascript and css file and of course your own css file and maybe javascript too.
<html>
<head>
...
<link rel="stylehseet" type="text/css" href="css/html2sheets.css">
<link rel="stylesheet" type="text/css" href="css/mystyles.css">
</head>
<body>
...
<script src="js/html2sheets.js"></script>
<script src="js/myjavascript.js"></script>
</body>
</html>Details about the config are in a chapter below
...
<script src="js/html2sheets.js"></script>
<script src="js/myjavascript.js"></script>
<script>
var h2s = new Html2Sheets();
var config = {
"debug" : true,
"units" : "mm",
...
}
h2s.config(config);
h2s.wrapFromTo("my-input-div-id", "my-output-div-id");
</script>
</body> <body>
<div id="my-input-div-id">
<h1>My Document</h1>
<h2>Abstraact</h2>
<p>Lorem Ipsum...</p>
<p>As you can see in the picture below...</p>
<div class="figure">...</div>
<h2>Another Topic</h2>
<p>Text about another topic</p>
...
</div>
<div id="my-output-div-id">
</div>
</body>Just load the page in the browser and see the magic happen
You can control all the features and functionality with the config variable you create to initialize the html2sheets object. Here is the description of all the parameters.
| Parameter | Use |
|---|---|
"debug" |
( true | false) Debug javascript console output |
"units" |
("mm" | "inch") Units to use for further parameters like width |
"pageWidth" |
(int) Width of the page in mm or inch, depending on the parameter "units" |
"pageHeight" |
(int) Height of the page in mm or inch, depending on the parameter "units" |
"headersHeight" |
(int) Height of the headers |
"footerHeight" |
(int) Height of the footers |
"marginTop" |
(int) Margin at the top of the page, before the content starts (does not affect header or footer) |
"marginRight" |
(int) Margin at the right of the page, before the content starts (does not affect header or footer) |
"marginBottom" |
(int) Margin at the bottom of the page, before the content starts (does not affect header or footer) |
"marginLeft" |
(int) Margin at the left of the page, before the content starts (does not affect header or footer) |
"pageCountStart" |
(int) the page number of where the page counting should begin |
"headersStartPage" |
(int) the page where the headers start |
"footersStartPage" |
(int) the page where the footers start |
"orphans" |
todo |
"widows" |
todo |
- Margins actually match your values
- Working header and footer per page
- Page-Breaks
- needs JS
This Software/Files/Project is published under the GNU General Public License v3.0.