<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<script type="text/javascript" src="https://rawgit.com/MrRio/jsPDF/da257c28e70df11e68e9887ddf0dab7bb19902f5/dist/jspdf.debug.js"></script>
<script type="text/javascript" src="main.js"></script>
<script type="text/javascript" src="ng-grid-pdf-export.js"></script>
<script type="text/javascript" src="jspdf-plugin.cell.js"></script>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
<button ng-click="makePDF()">PDF</button>
</body>
</html>
/*style.css*/
.gridStyle {
border: 1px solid rgb(212,212,212);
width: 400px;
height: 300px
}
// main.js
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
var pdfPlugIn = new ngGridPdfExportPlugin({inhibitButton:true})
$scope.myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.gridOptions = { data: 'myData', plugins: [pdfPlugIn] };
$scope.reportSchema = {title:'A title'}
$scope.makePDF = function() {
pdfPlugIn.createPDF();
}
});
function ngGridPdfExportPlugin (options) {
var self = this;
self.grid = null;
self.scope = null;
self.services = null;
self.options = options;
self.init = function (scope, grid, services) {
self.grid = grid;
self.scope = scope;
self.services = services;
if (!options.inhibitButton) {
var fp = grid.$root.find(".ngFooterPanel");
var pdfDataLinkPrevious = grid.$root.find('.ngFooterPanel .pdf-data-link-span');
if (pdfDataLinkPrevious != null) {pdfDataLinkPrevious.remove() ; }
var pdfDataLinkHtml = '<button class="pdf-data-link-span">PDF Export</button>' ;
fp.append(pdfDataLinkHtml);
fp.on('click', function() {
self.createPDF();
});
}
};
self.createPDF = function () {
var headers = [],
data = [],
footers = {},
gridWidth = self.scope.totalRowWidth(),
margin = 15; // mm defined as unit when setting up jsPDF
angular.forEach(self.scope.columns, function (col) {
if (col.visible && (col.width === undefined || col.width > 0)) {
headers.push({name: col.field, prompt:col.displayName, width: col.width * (185 / gridWidth), align: (col.colDef.align || 'left')});
if (col.colDef.totalsRow) {
footers[col.field] = self.scope.getTotalVal(col.field, col.filter).toString();
}
}
});
angular.forEach(self.grid.filteredRows, function (row) {
data.push(angular.copy(row.entity));
});
var doc = new jsPDF('landscape','mm','a4');
doc.setFontStyle('bold');
doc.setFontSize(24);
if (self.scope.reportSchema && self.scope.reportSchema.title) doc.text(self.scope.reportSchema.title,margin,margin);
doc.setFontStyle('normal');
doc.setFontSize(12);
doc.cellInitialize();
doc.table(margin, 24, data, {headers:headers, footers:footers, printHeaders: true, autoSize: false, margins: {left:margin,top:margin,bottom:margin,width:doc.internal.pageSize - margin}});
doc.output('dataurlnewwindow');
};
}
/** ====================================================================
* jsPDF Cell plugin
* Copyright (c) 2013 Youssef Beddad, youssef.beddad@gmail.com
* 2013 Eduardo Menezes de Morais, eduardo.morais@usp.br
* 2013 Lee Driscoll, https://github.com/lsdriscoll
* 2014 Juan Pablo Gaviria, https://github.com/juanpgaviria
* 2014 James Hall, james@parall.ax
*
* Permission is hereby granted, free of charge, to any person obtaining
* a copy of this software and associated documentation files (the
* "Software"), to deal in the Software without restriction, including
* without limitation the rights to use, copy, modify, merge, publish,
* distribute, sublicense, and/or sell copies of the Software, and to
* permit persons to whom the Software is furnished to do so, subject to
* the following conditions:
*
* The above copyright notice and this permission notice shall be
* included in all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
* MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
* LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
* OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
* WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
* ====================================================================
*/
(function (jsPDFAPI) {
'use strict';
/*jslint browser:true */
/*global document: false, jsPDF */
var fontName,
fontSize,
fontStyle,
padding = 3,
margin = 13,
headerFunction,
lastCellPos = { x: undefined, y: undefined, w: undefined, h: undefined, ln: undefined },
pages = 1,
setLastCellPosition = function (x, y, w, h, ln) {
lastCellPos = { 'x': x, 'y': y, 'w': w, 'h': h, 'ln': ln };
},
getLastCellPosition = function () {
return lastCellPos;
};
jsPDFAPI.setHeaderFunction = function (func) {
headerFunction = func;
};
jsPDFAPI.getTextDimensions = function (txt) {
fontName = this.internal.getFont().fontName;
fontSize = this.table_font_size || this.internal.getFontSize();
fontStyle = this.internal.getFont().fontStyle;
// 1 pixel = 0.264583 mm and 1 mm = 72/25.4 point
var px2pt = 0.264583 * 72 / 25.4,
dimensions,
text;
text = document.createElement('font');
text.id = "jsPDFCell";
text.style.fontStyle = fontStyle;
text.style.fontName = fontName;
text.style.fontSize = fontSize + 'pt';
text.innerText = txt;
document.body.appendChild(text);
dimensions = { w: (text.offsetWidth + 1) * px2pt, h: (text.offsetHeight + 1) * px2pt};
document.body.removeChild(text);
return dimensions;
};
jsPDFAPI.cellAddPage = function () {
this.addPage();
setLastCellPosition(this.margins.left, this.margins.top, undefined, undefined);
//setLastCellPosition(undefined, undefined, undefined, undefined, undefined);
pages += 1;
};
jsPDFAPI.cellInitialize = function () {
lastCellPos = { x: undefined, y: undefined, w: undefined, h: undefined, ln: undefined };
pages = 1;
};
jsPDFAPI.cell = function (x, y, w, h, txt, ln, align) {
var curCell = getLastCellPosition();
// If this is not the first cell, we must change its position
if (curCell.ln !== undefined) {
if (curCell.ln === ln) {
//Same line
x = curCell.x + curCell.w;
y = curCell.y;
} else {
//New line
if ((curCell.y + curCell.h + h + margin) >= this.internal.pageSize.height - this.margins.bottom) {
this.cellAddPage();
if (this.printHeaders && this.tableHeaderRow) {
this.printHeaderRow(ln, true);
}
}
//We ignore the passed y: the lines may have diferent heights
y = (getLastCellPosition().y + getLastCellPosition().h);
}
}
if (txt[0] !== undefined) {
if (this.printingHeaderRow) {
this.rect(x, y, w, h, 'FD');
} else {
this.rect(x, y, w, h);
}
if (align === 'right') {
var textSize;
if (txt instanceof Array) {
for(var i = 0; i<txt.length; i++) {
var currentLine = txt[i];
textSize = this.getStringUnitWidth(currentLine) * this.internal.getFontSize() / (72/25.6);
this.text(currentLine, x + w - textSize - padding, y + this.internal.getLineHeight()*(i+1));
}
} else {
textSize = this.getStringUnitWidth(txt) * this.internal.getFontSize() / (72/25.6);
this.text(txt, x + w - textSize - padding, y + this.internal.getLineHeight());
}
} else {
this.text(txt, x + padding, y + this.internal.getLineHeight());
}
}
setLastCellPosition(x, y, w, h, ln);
return this;
};
/**
* Return an array containing all of the owned keys of an Object
* @type {Function}
* @return {String[]} of Object keys
*/
jsPDFAPI.getKeys = (typeof Object.keys === 'function')
? function (object) {
if (!object) {
return [];
}
return Object.keys(object);
}
: function (object) {
var keys = [],
property;
for (property in object) {
if (object.hasOwnProperty(property)) {
keys.push(property);
}
}
return keys;
};
/**
* Return the maximum value from an array
* @param array
* @param comparisonFn
* @returns {*}
*/
jsPDFAPI.arrayMax = function (array, comparisonFn) {
var max = array[0],
i,
ln,
item;
for (i = 0, ln = array.length; i < ln; i += 1) {
item = array[i];
if (comparisonFn) {
if (comparisonFn(max, item) === -1) {
max = item;
}
} else {
if (item > max) {
max = item;
}
}
}
return max;
};
/**
* Create a table from a set of data.
* @param {Integer} [x] : left-position for top-left corner of table
* @param {Integer} [y] top-position for top-left corner of table
* @param {Object[]} [data] As array of objects containing key-value pairs corresponding to a row of data.
* @param {Object} [config.headers] String[] Omit or null to auto-generate headers at a performance cost
* @param {Object} [config.footers] Object containing key-value pairs. Omit or null if not required
* @param {Object} [config.printHeaders] True to print column headers at the top of every page
* @param {Object} [config.autoSize] True to dynamically set the column widths to match the widest cell value
* @param {Object} [config.margins] margin values for left, top, bottom, and width
* @param {Object} [config.fontSize] Integer fontSize to use (optional)
*/
jsPDFAPI.table = function (x,y, data, config) {
if (!data) {
throw 'No data for PDF table';
}
var headerNames = [],
headerPrompts = [],
header,
i,
ln,
cln,
columnMatrix = {},
columnWidths = {},
columnData,
column,
columnMinWidths = [],
columnAligns = [],
j,
tableHeaderConfigs = [],
model,
jln,
func,
//set up defaults. If a value is provided in config, defaults will be overwritten:
autoSize = false,
printHeaders = true,
fontSize = 12,
headers = null,
footers = null,
margins = {left:0, top:0, bottom: 0, width: this.internal.pageSize.width};
if (config) {
//override config defaults if the user has specified non-default behavior:
if(config.autoSize === true) {
autoSize = true;
}
if(config.printHeaders === false) {
printHeaders = false;
}
if(config.fontSize){
fontSize = config.fontSize;
}
if(config.margins){
margins = config.margins;
}
if (config.headers) {
headers = config.headers;
}
if (config.footers) {
footers = config.footers;
}
}
/**
* @property {Number} lnMod
* Keep track of the current line number modifier used when creating cells
*/
this.lnMod = 0;
lastCellPos = { x: undefined, y: undefined, w: undefined, h: undefined, ln: undefined },
pages = 1;
this.printHeaders = printHeaders;
this.margins = margins;
this.setFontSize(fontSize);
this.table_font_size = fontSize;
// Set header values
if (headers === undefined || (headers === null)) {
// No headers defined so we derive from data
headerNames = this.getKeys(data[0]);
} else if (headers[0] && (typeof headers[0] !== 'string')) {
// var px2pt = 0.264583 * 72 / 25.4;
var constant = 1.5; // arrived at by trial and error
// Split header configs into names and prompts
for (i = 0, ln = headers.length; i < ln; i += 1) {
header = headers[i];
headerNames.push(header.name);
headerPrompts.push(header.prompt);
columnWidths[header.name] = header.width * constant;
columnAligns[header.name] = header.align;
}
} else {
headerNames = headers;
}
if (autoSize) {
// Create a matrix of columns e.g., {column_title: [row1_Record, row2_Record]}
func = function (rec) {
return rec[header];
};
for (i = 0, ln = headerNames.length; i < ln; i += 1) {
header = headerNames[i];
columnMatrix[header] = data.map(
func
);
// get header width
columnMinWidths.push(this.getTextDimensions(headerPrompts[i] || header).w);
column = columnMatrix[header];
// get cell widths
for (j = 0, cln = column.length; j < cln; j += 1) {
columnData = column[j];
columnMinWidths.push(this.getTextDimensions(columnData).w);
}
// get footer width
if (footers) {
columnMinWidths.push(this.getTextDimensions(footers[i]).w);
}
// get final column width
columnWidths[header] = jsPDFAPI.arrayMax(columnMinWidths);
}
}
// -- Construct the table
if (printHeaders) {
var lineHeight = this.calculateLineHeight(headerNames, columnWidths, headerPrompts.length?headerPrompts:headerNames);
// Construct the header row
for (i = 0, ln = headerNames.length; i < ln; i += 1) {
header = headerNames[i];
tableHeaderConfigs.push([x, y, columnWidths[header], lineHeight, String(headerPrompts.length ? headerPrompts[i] : header),0,columnAligns[header]]);
}
// Store the table header config
this.setTableHeaderRow(tableHeaderConfigs);
// Print the header for the start of the table
this.printHeaderRow(1, false);
}
// Construct the data rows
for (i = 0, ln = data.length; i < ln; i += 1) {
var lineHeight;
model = data[i];
lineHeight = this.calculateLineHeight(headerNames, columnWidths, model);
for (j = 0, jln = headerNames.length; j < jln; j += 1) {
header = headerNames[j];
this.cell(x, y, columnWidths[header], lineHeight, model[header], i + 2, columnAligns[header]);
}
}
if (footers) {
// Construct the header row
for (var fi = 0; fi < headerNames.length; fi ++) {
header = headerNames[fi];
tableHeaderConfigs[fi][4] = footers[header] || ' ';
}
// Print the header for the start of the table
this.printHeaderRow(i + 2, false);
}
this.table_x = x;
this.table_y = y;
return this;
};
/**
* Calculate the height for containing the highest column
* @param {String[]} headerNames is the header, used as keys to the data
* @param {Integer[]} columnWidths is size of each column
* @param {Object[]} model is the line of data we want to calculate the height of
*/
jsPDFAPI.calculateLineHeight = function (headerNames, columnWidths, model) {
var header, lineHeight = 0;
for (var j = 0; j < headerNames.length; j++) {
header = headerNames[j];
model[header] = this.splitTextToSize(String(model[header]), columnWidths[header] - padding);
var h = this.internal.getLineHeight() * model[header].length + padding;
if (h > lineHeight)
lineHeight = h;
}
return lineHeight;
};
/**
* Store the config for outputting a table header
* @param {Object[]} config
* An array of cell configs that would define a header row: Each config matches the config used by jsPDFAPI.cell
* except the ln parameter is excluded
*/
jsPDFAPI.setTableHeaderRow = function (config) {
this.tableHeaderRow = config;
};
/**
* Output the store header row
* @param lineNumber The line number to output the header at
*/
jsPDFAPI.printHeaderRow = function (lineNumber, new_page) {
if (!this.tableHeaderRow) {
throw 'Property tableHeaderRow does not exist.';
}
var tableHeaderCell,
tmpArray,
i,
ln;
this.printingHeaderRow = true;
if (headerFunction !== undefined) {
var position = headerFunction(this, pages);
setLastCellPosition(position[0], position[1], position[2], position[3], -1);
}
this.setFontStyle('bold');
var tempHeaderConf = [];
for (i = 0, ln = this.tableHeaderRow.length; i < ln; i += 1) {
this.setFillColor(200,200,200);
tableHeaderCell = this.tableHeaderRow[i];
if (new_page) {
tableHeaderCell[1] = this.margins.top;
tempHeaderConf.push(tableHeaderCell);
}
tmpArray = [].concat(tableHeaderCell);
tmpArray[5] = lineNumber;
this.cell.apply(this, tmpArray);
}
if (tempHeaderConf.length > 0){
this.setTableHeaderRow(tempHeaderConf);
}
this.setFontStyle('normal');
this.printingHeaderRow = false;
};
})(jsPDF.API);