Skip to content
Save HTML as pdf file on the browser with angularjs .
JavaScript
Branch: master
Clone or download
martskins and Siddharth Sharma Added suport for multi page pdfs (#23)
* .

* fixed issue with page y axis overflow
Latest commit 87bd155 Sep 23, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo Added suport for multi page pdfs (#23) Sep 23, 2018
dist Added suport for multi page pdfs (#23) Sep 23, 2018
src Added suport for multi page pdfs (#23) Sep 23, 2018
tests Added suport for multi page pdfs (#23) Sep 23, 2018
.gitignore dist added again Jan 23, 2017
.npmignore
.travis.yml Added suport for multi page pdfs (#23) Sep 23, 2018
README.md Dist folder remove (#11) Jan 16, 2017
bower.json Added suport for multi page pdfs (#23) Sep 23, 2018
gulpfile.js Added suport for multi page pdfs (#23) Sep 23, 2018
package.json Added suport for multi page pdfs (#23) Sep 23, 2018

README.md

Angularjs save HTML as PDF in your browser

This is an angularjs module to save HTML as PDF DEMO, it basically converts the HTML to HTML5 canvas and captures the same and converts it to PDF and saves it in your browser .


Here are the steps :
1) bower install angular-save-html-to-pdf
OR
npm install angular-save-html-to-pdf
  1. Link the JS files in your HTML file :
   <script src="../bower_components/angular/angular.js"></script>
   <script src="../bower_components/jquery/dist/jquery.min.js"></script>
   <script src="https://cdn.rawgit.com/niklasvh/html2canvas/0.5.0-alpha2/dist/html2canvas.min.js"></script>
   <script src="../bower_components/jsPDF/dist/jspdf.debug.js"></script>
   <script src="../dist/saveHtmlToPdf.min.js"></script>

  1. Add this module to your angular app :
var app = angular.module('app' , ['htmlToPdfSave']) ;
  1. Use the directives in your app , here is a code snippet from a working copy in demo folder :
<button pdf-save-button="idOne" pdf-name="someone.pdf" class="btn">Hello Someone</button>
	<!-- below block will be saved as pdf -->

	<div pdf-save-content="idOne" >
		Hello Someone
	</div>

	<button pdf-save-button="idOneGraph" pdf-name="hello.pdf" class="btn">Hello World</button>

  <!-- below block will be saved as pdf -->

	<div pdf-save-content="idOneGraph" >
		Hello World
	</div>

To allow addition of multiple pdf save button and linking them to the pdf save content block every pdf-save-button and pdf-save-content directive is associated with an ID , the pdf-save-button will match the ID with pdf-save-content block and the matching HTML block will be saved .

Developer instructions:

If you would like to run the project locally, you can download the repo and run :
1)

  > gulp concat
  > gulp compress
  ```
commands to create the bundled file which is then used in the demo/index.html file.

2)  demo/index.html file can be served easily by any static web server to test the project, I use and thus recommend python server which you can start by writing
   ``` python -m SimpleHTTPServer 9090 ```
   9090 can be replaced by your prefered port. <br/>
NOTE : This is a new repository and has been tested with basic HTML and google graphs , please create github issues if you find it is not working with something and consider contributing. Cheers .
You can’t perform that action at this time.