var app = angular.module("app", []);
app.controller("listController", ["$scope",
function($scope) {
$scope.export = function(){
alert("in pdf export");
var pdf = new jsPDF('landscape');
var source = "";
var inputString = "<div class='O0' style='margin-top: 0pt; margin-bottom: 0pt; margin-left: 0.38in; text-indent: -0.38in; direction: ltr; unicode-bidi: embed; word-break: normal;'>" +
"<span style='font-size:18.0pt'>1.</span><span style='font-size:18.0pt;font-family:Arial;mso-ascii-font-family:Arial;mso-fareast-font-family:+mn-ea;mso-bidi-font-family:+mn-cs;mso-ascii-theme-font:minor-latin;mso-fareast-theme-font:minor-fareast;mso-bidi-theme-font:minor-bidi;color:#162E71;mso-color-index:1;mso-font-kerning:12.0pt;language:en-US;mso-style-textfill-type:solid;mso-style-textfill-fill-themecolor:text1;mso-style-textfill-fill-color:#162E71;mso-style-textfill-fill-alpha:100.0%'>Below are few Options</span>" +
"</div><div class='O0' style='margin-top: 0pt; margin-bottom: 0pt; margin-left: 0.38in; text-indent: -0.38in; direction: ltr; unicode-bidi: embed; word-break: normal;'> " +
" <span style='text-indent: -36.48px;'> </span><span style='text-indent: -36.48px; font-size: 18pt;'><span style='font-family: Arial;'>•</span></span>" +
"<span style='text-indent: -36.48px; font-size: 18pt; font-family: Arial; color: rgb(22, 46, 113);'>Option1</span>" +
"</div><div class='O0' style='margin-top: 0pt; margin-bottom: 0pt; margin-left: 0.38in; text-indent: -0.38in; direction: ltr; unicode-bidi: embed; word-break: normal;'> <span style='text-indent: -36.48px; font-size: 18pt;'>" +
"<span style='font-family: Arial;'>•</span></span><span style='text-indent: -36.48px; font-size: 18pt; font-family: Arial; color: rgb(22, 46, 113);'>Option2</span></div>" +
"<div class='O1' style='margin-top: 0pt; margin-bottom: 0pt; margin-left: 0.88in; text-indent: -0.38in; direction: ltr; unicode-bidi: embed; word-break: normal;'>";
specialElementHandlers = {
// element with id of "bypass" - jQuery style selector
'#bypassme': function (element, renderer) {
// true = "handled elsewhere, bypass text extraction"
return true
}
};
margins = {
top: 20,
bottom: 10,
left: 10,
right: 10,
width: '100%'
};
// all coords and widths are in jsPDF instance's declared units
// 'inches' in this case
pdf.fromHTML(
inputString, // HTML string or DOM elem ref.
margins.left, // x coord
margins.top, { // y coord
'width': '100%', // max width of content on PDF
'elementHandlers': specialElementHandlers
},
function (dispose) {
// dispose: object with X, Y of the last line add to the PDF
// this allow the insertion of new lines after html
pdf.save('test.pdf');
}, margins);
}
}
]);
<!doctype html>
<html ng-app="app">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.33/vfs_fonts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="listController">
<button ng-click="export()">export</button>
<div id="exportthis">
<h1>This is header</h1>
<font color="red">Sample page</font>
<div class="O0" style="margin-top: 0pt; margin-bottom: 0pt; margin-left: 0.38in; text-indent: -0.38in; direction: ltr; unicode-bidi: embed; word-break: normal;"><span style="font-size:18.0pt">1.</span><span style="font-size:18.0pt;font-family:
Arial;mso-ascii-font-family:Arial;mso-fareast-font-family:+mn-ea;mso-bidi-font-family:
+mn-cs;mso-ascii-theme-font:minor-latin;mso-fareast-theme-font:minor-fareast;
mso-bidi-theme-font:minor-bidi;color:#162E71;mso-color-index:1;mso-font-kerning:
12.0pt;language:en-US;mso-style-textfill-type:solid;mso-style-textfill-fill-themecolor:
text1;mso-style-textfill-fill-color:#162E71;mso-style-textfill-fill-alpha:100.0%">Below are few Options</span></div><div class="O0" style="margin-top: 0pt; margin-bottom: 0pt; margin-left: 0.38in; text-indent: -0.38in; direction: ltr; unicode-bidi: embed; word-break: normal;">
<span style="text-indent: -36.48px;"> </span>
<span style="text-indent: -36.48px; font-size: 18pt;">
<span style="font-family: Arial;">•</span></span>
<span style="text-indent: -36.48px; font-size: 18pt; font-family: Arial; color: rgb(22, 46, 113);">Option1</span></div>
<div class="O0" style="margin-top: 0pt; margin-bottom: 0pt; margin-left: 0.38in; text-indent: -0.38in; direction: ltr; unicode-bidi: embed; word-break: normal;"> <span style="text-indent: -36.48px; font-size: 18pt;"><span style="font-family: Arial;">•</span></span><span style="text-indent: -36.48px; font-size: 18pt; font-family: Arial; color: rgb(22, 46, 113);">Option2</span></div><div class="O1" style="margin-top: 0pt; margin-bottom: 0pt; margin-left: 0.88in; text-indent: -0.38in; direction: ltr; unicode-bidi: embed; word-break: normal;">
</div>
</body>
</html>