Custom Printing
SpreadJS provides options to decide what to print and how to print. This can be useful when you have a large sheet, but only want users to be able to print a specific part of that sheet.
You can set the display of print lines in the sheets using the isPrintLineVisible method. Using print lines can let the user easily know if the sheet data will be printed on the correct page when printing.
sheet.isPrintLineVisible(true);
When printing, the following contents are printable:
- visible rows/columns in corner/row header/column header/viewport
- cell text
- cell style(including background image)
- span
- overflow
- picture
- water mark
And the following contents are unprintable:
- hidden rows/columns
- floating object
- comment
- tabStrip
- scrollBar
- group
- filter button
- validation button, highlight circle
- active affect
- selection
- freeze line
- spread's background image
How to print
You can print all sheets or a specified sheet with the sheet.print method.
spread.print(); // print all sheets
// spread.print(1 /* sheetIndex */); // print the 2nd sheet ( 0 based index )
For each sheet, you can insert a page break before the specified row or column with the setRowPageBreak or setColumnPageBreak methods.
// insert a page break before the 6th row
sheet.setRowPageBreak(5, true);
// insert a page break before the 4th column
sheet.setColumnPageBreak(3, true);
For each sheet, you can set detailed options with the Sheet.printInfo method. Here are some of those options:
Appearance:
showGridLine: whether to print the grid lines (default is true).
showBorder: whether to print an outline border around the entire control.
showColumnHeader / showRowHeader: how to print column / row header, a PrintVisibilityType enum value.
- inherit: depends on Sheet's setting ((default) visibility of column / row header).
- hide: do not print.
- show: shows in each page.
- showOnce: shows once (display the header on the 1st page only).
var sheet = spread.sheets[0];
var printInfo = sheet.printInfo();
printInfo.showGridLine(false);
printInfo.showRowHeader(GC.Spread.Sheets.Print.PrintVisibilityType.show);
printInfo.showColumnHeader(GC.Spread.Sheets.Print.PrintVisibilityType.show);
Print range:
You can also manually specify the range of cells that will be printed with the following options:
rowStart: specify the start row index of print range.
rowEnd: specify the end row index of print range.
columnStart: specify the start column index of print range.
columnEnd: specify the end column index of print range.
// set print range to override auto detected end row / column
printInfo.rowEnd(40);
printInfo.columnEnd(12)
Print range is actually a custom name "Print_Area" now, and can be updated automatically when adding or removing rows/columns in the range. You can use it in a formula, like =IFERROR(ROWS(Print_Area),"none") to display how many rows to print.
Alternatively, you can set a formula to the custom name "Print_Area" to set the print range dynamically, such as: =IF(Sheet1!$A$1,Sheet1!$B$1:$C$5,Sheet1!$D$5:$F$8). In that formula, the print range is Sheet1!$B$1:$C$5 if Sheet1!$A$1 has a value of true, otherwise the Print_Area will be Sheet1!$D$5:$F$8.
Note: It's recommend to set the print range using either the "Print_Area" custom name or printInfo, don't use them together.
Repeat items:
repeatColumnStart: specify the start column index of a repeated range to print on left of each page.
repeatColumnEnd: specify the end column index of a repeated range to print on left of each page.
repeatRowStart: specify the start row index of a repeated range to print on top of each page.
repeatRowEnd: specify the end row index of a repeated range to print on top of each page.
printInfo.repeatRowStart(0);
printInfo.repeatRowEnd(1);
printInfo.repeatColumnStart(0)
printInfo.repeatColumnEnd(0)
Header & footer:
You can use the pageHeaderFooter method in the printInfo object to get/set the header or footer print info.
There are 4 types of header/footer print info: normal, first, odd and even.
Multiple options can be used simultaneously. The descriptions are as follows:
| Option name | Priority | Description |
|---|---|---|
| normal | Low | apply to the header/footer of all pages. |
| first | High | apply to the header/footer of first page. |
| odd | Medium | apply to the header/footer of all odd pages. |
| even | Medium | apply to the header/footer of all even pages. |
{
normal:{ // type of header/footer
header:{ // header area
left:"", // the text and format of left section of header area.
center:"", // the text and format of center section of header area.
right:"", // the text and format of right section of header area.
leftImage:"", // the image of left section of header area.
centerImage:"", // the image of center section of header area.
rightImage:"", // the image of right section of header area.
},
footer:{ // footer area
left:"", // the text and format of left section of footer area.
center:"", // the text and format of center section of footer area.
right:"", // the text and format of right section of footer area.
leftImage:"", // the image of left section of footer area.
centerImage:"", // the image of center section of footer area.
rightImage:"", // the image of right section of footer area.
}
}
}
Supported format: the "&" symbol is used as an escape character, and can be used along with the following keywords to print special data:
- P: current page number.
- N: total page count.
- D: current date (today).
- T: current time.
- G: image, related url is set with corresponding Image.
- S: strikethrough.
- U: underline.
- B: bold.
- I: italic.
- ": (double quote), used to set font-family.
- F: spread name.
- A: sheet name.
The following code sets the header/footer of all pages.
printInfo.pageHeaderFooter({
normal: {
header: {
left: "&G",
center: "&\"Comic Sans MS\"System Information",
leftImage: "images/GrapeCity_LOGO.jpg"
},
footer: {
center: "&P/&N"
}
}
})
The following code shows how to use the differentFirstPage method to enable a different header/footer for the first page, and how to set the header/footer of the first page:
// Enable different header/footer of first page.
printInfo.differentFirstPage(true);
// set the header/footer options of first page.
printInfo.pageHeaderFooter({
normal: {
header: {
left: "&G",
center: "&\"Comic Sans MS\"System Information",
leftImage: "images/GrapeCity_LOGO.jpg"
},
footer: {
center: "&P/&N"
}
},
first: {
header: {
left: "&G",
center: "&\"Comic Sans MS\"System Information",
leftImage: "images/GrapeCity_LOGO.jpg"
},
footer: {
center: "&P/&N"
}
}
})
The following code shows how to use the differentOddAndEvenPages method to enable different headers/footers for odd and even pages, and how to set the header/footer of odd and even pages:
// Enable different header/footer of odd and even pages.
printInfo.differentOddAndEvenPages(true);
// set the header/footer options of odd and even pages.
printInfo.pageHeaderFooter({
normal: {
header: {
left: "&G",
center: "&\"Comic Sans MS\"System Information",
leftImage: "images/GrapeCity_LOGO.jpg"
},
footer: {
center: "&P/&N"
}
},
odd: {
header: {
left: "&G",
center: "&\"Comic Sans MS\"System Information",
leftImage: "images/GrapeCity_LOGO.jpg"
},
footer: {
center: "&P/&N"
}
},
even: {
header: {
left: "&G",
center: "&\"Comic Sans MS\"System Information",
leftImage: "images/GrapeCity_LOGO.jpg"
},
footer: {
center: "&P/&N"
}
},
})
Watermark:
A user can add a watermark when printing in SpreadJS.
A user can add multiple watermarks for a page, just like this:
var printInfo = activeSheet.printInfo();
var watermark1 = {x:0, y:0, width:100, height:100, imageSrc:".image/watermart1.jpg", page:"all"};
var watermark2 = {x:400, y:400, width:30, height:30, imageSrc:".image/watermart2.jpg", page:"all"};
printInfo.watermark([watermark1, watermark2]);
A user can add a watermark for different pages, such as a watermark for pages 0, 1, 2, 3, 5, 10, just like this:
var printInfo = activeSheet.printInfo();
var watermark1 = {x:0, y:0, width:100, height:100, imageSrc:".image/watermart1.jpg", page:"0,1,2,3,5,10"};
printInfo.watermark([watermark1]);
A user can add a watermark for odd or even pages, you just need to set the page to "odd" or "even".
BeforPrint event:
SpreadJS supports an event that is fired before printing occurs: GC.Spread.Sheets.Events.BeforePrint.
A user can do something before printing through this event, such as:
- Cancelling the print
- Getting the print content iFrame, so they can print with a different technique, such as flash and so on…
Event args:
- args.iframe: The DOM element that includes all printing content.
- args.cancel: The option that cancels the following printing process. Code see below:
spread.bind(GC.Spread.Sheets.Events.BeforePrint, function (e, args) {
args.cancel = true;
});
Feedback
Submit and view feedback for