Print Background Image As Watermark

In This Topic

SpreadJS enables users to print any background image of their choice as a watermark.

This feature is useful especially when users want to print worksheets along with their company logo, tagline, copyright information or any other data embedded in the background of each page or several pages so as to indicate the authenticity of their brand or simply protect their content from getting copied by any other organisation.

The watermark() method of the PrintInfo class can be used to print background image as watermark.

Using Code

Refer to the following example code in order to print background image as watermark.

JavaScript	Copy Code
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script> <link href="css/gc.spread.sheets.excel2013white.12.2.0.css" rel="stylesheet" /> <script src="scripts/gc.spread.sheets.all.12.2.0.min.js"></script> <script src="scripts/gc.spread.sheets.print.12.2.0.min.js"></script> <script> $(document).ready(function () { // Initializing Spread var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 }); spread.suspendPaint(); // Fetch ActiveSheet activeSheet = spread.getSheet(0); // Set Sheet's RowCount/ ColCount activeSheet.setRowCount(200); activeSheet.setColumnCount(8); // Set value for (var r = 0, rc = activeSheet.getRowCount(); r < rc; r++) { for (var c = 0, cc = activeSheet.getColumnCount(); c < cc; c++) { activeSheet.setValue(r, c, r + c); } } spread.resumePaint(); var printInfo = activeSheet.printInfo(); // For printing watermark on all pages var watermark1 = { x: 0, y: 0, width: 80, height: 80, imageSrc: "../image/gc1.png", page: "all" }; // For printing watermark on selected pages var watermark2 = { x: 650, y: 1000, width: 100, height: 80, imageSrc: "../image/gc2.png", page: "0,1,3" }; printInfo.watermark([watermark1, watermark2]); $("#print").click(function () { spread.print(); }); }); </script> </head> <body> <input type="button" style=" margin-left:16px" id="print" value="Click to Print"> <div id="ss" style="height:400px;width:600px"></div> </body> </html>

JavaScript

Copy Code

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<link href="css/gc.spread.sheets.excel2013white.12.2.0.css" rel="stylesheet" />
<script src="scripts/gc.spread.sheets.all.12.2.0.min.js"></script>
<script src="scripts/gc.spread.sheets.print.12.2.0.min.js"></script>
<script>
$(document).ready(function ()
{
 // Initializing Spread
 var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'),  { sheetCount: 1 });
 spread.suspendPaint();
 
// Fetch ActiveSheet
activeSheet = spread.getSheet(0);

// Set Sheet's RowCount/ ColCount
activeSheet.setRowCount(200);
activeSheet.setColumnCount(8);
// Set value
for (var r = 0, rc = activeSheet.getRowCount(); r < rc; r++) {
for (var c = 0, cc = activeSheet.getColumnCount(); c < cc; c++) {
activeSheet.setValue(r, c, r + c);
}
}
spread.resumePaint();
var printInfo = activeSheet.printInfo();

// For printing watermark on all pages
var watermark1 = { x: 0, y: 0, width: 80, height: 80, imageSrc: "../image/gc1.png", page: "all" };

// For printing watermark on selected pages
var watermark2 = { x: 650, y: 1000, width: 100, height: 80, imageSrc: "../image/gc2.png", page: "0,1,3" };
 printInfo.watermark([watermark1, watermark2]);
$("#print").click(function ()
{
 spread.print();
});
});
</script>
</head>
<body>
<input type="button" style=" margin-left:16px" id="print" value="Click to Print">
<div id="ss" style="height:400px;width:600px"></div>
</body>
</html>

Product Support Forum | Print this page