你可以通过 sheet.savePDF 方法导出所有的工作表或者某一个工作表成PDF。
对于每一个工作表你都可以设置它更详细的属性。
function _getElementById(id) {
return document.getElementById(id);
}
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 1});
initSpread(spread);
_getElementById('btnSetPrintInfo').onclick = function () {
function setPrintInfoNumberValueItem(printInfo, key) {
var value = parseInt(_getElementById(key).value);
if (!isNaN(value)) {
printInfo[key](value);
}
}
var sheet = spread.getActiveSheet(),
printInfo = sheet.printInfo();
["rowStart", "rowEnd", "columnStart", "columnEnd",
"repeatRowStart", "repeatRowEnd", "repeatColumnStart", "repeatColumnEnd"
].forEach(function (name) {
setPrintInfoNumberValueItem(printInfo, name);
});
printInfo.showBorder(_getElementById('showBorder').checked);
printInfo.showGridLine(_getElementById('showGridLine').checked);
printInfo.blackAndWhite(_getElementById('blackAndWhite').checked);
printInfo.showRowHeader(+_getElementById('showRowHeader').value);
printInfo.showColumnHeader(+_getElementById('showColumnHeader').value);
printInfo.headerLeft(_getElementById('headerLeft').value);
printInfo.headerLeftImage(_getElementById('headerLeftImage').value);
printInfo.headerCenter(_getElementById('headerCenter').value);
printInfo.headerCenterImage(_getElementById('headerCenterImage').value);
printInfo.headerRight(_getElementById('headerRight').value);
printInfo.headerRightImage(_getElementById('headerRightImage').value);
printInfo.footerLeft(_getElementById('footerLeft').value);
printInfo.footerLeftImage(_getElementById('footerLeftImage').value);
printInfo.footerCenter(_getElementById('footerCenter').value);
printInfo.footerCenterImage(_getElementById('footerCenterImage').value);
printInfo.footerRight(_getElementById('footerRight').value);
printInfo.footerRightImage(_getElementById('footerRightImage').value);
};
};
function adjustLayoutForPrint(sheet) {
sheet.setRowHeight(0, 30);
sheet.getRange(0, 0, 1, 5).hAlign(1).vAlign(1).font("bold 14px Times");
sheet.setColumnWidth(0, 220);
sheet.setColumnWidth(2, 120);
sheet.setColumnWidth(3, 50);
sheet.setColumnWidth(4, 180);
sheet.getRange(1, 0, 200, 5).textIndent(1);
sheet.getRange(-1, 3, -1, 1).hAlign(1).textIndent(0);
sheet.addColumns(0, 1);
sheet.setColumnWidth(0, 30);
for (var r = 5; r <= 200; r += 5) {
sheet.getCell(r, 0)
.text(r + '')
.font("normal 9px Times");
}
sheet.addRows(0, 1);
sheet.setRowHeight(0, 10);
sheet.getRange(1, 1, 202, 5).setBorder(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin), {all: true});
}
function setPrintInfo(sheet) {
var printInfo = sheet.printInfo();
// custom printInfo for default output
printInfo.showBorder(false);
printInfo.showGridLine(false);
printInfo.blackAndWhite(false);
printInfo.columnEnd(5);
printInfo.repeatRowStart(0);
printInfo.repeatRowEnd(1);
printInfo.showColumnHeader(GC.Spread.Sheets.Print.PrintVisibilityType.hide);
printInfo.showRowHeader(GC.Spread.Sheets.Print.PrintVisibilityType.hide);
printInfo.headerCenter("Olympic Athletes");
printInfo.headerLeft("&G");
printInfo.headerLeftImage("$DEMOROOT$/spread/source/images/olympic.jpg");
printInfo.footerCenter("&P/&N");
// sync with UI setting items
_getElementById('rowStart').value = printInfo.rowStart();
_getElementById('rowEnd').value = printInfo.rowEnd();
_getElementById('columnStart').value = printInfo.columnStart();
_getElementById('columnEnd').value = printInfo.columnEnd();
_getElementById('repeatRowStart').value = printInfo.repeatRowStart();
_getElementById('repeatRowEnd').value = printInfo.repeatRowEnd();
_getElementById('repeatColumnStart').value = printInfo.repeatColumnStart();
_getElementById('repeatColumnEnd').value = printInfo.repeatColumnEnd();
_getElementById('showBorder').checked = printInfo.showBorder();
_getElementById('showGridLine').checked = printInfo.showGridLine();
_getElementById('blackAndWhite').checked = printInfo.blackAndWhite();
_getElementById('showRowHeader').value = printInfo.showRowHeader();
_getElementById('showColumnHeader').value = printInfo.showColumnHeader();
_getElementById('headerLeft').value = printInfo.headerLeft();
_getElementById('headerLeftImage').value = printInfo.headerLeftImage();
_getElementById('headerCenter').value = printInfo.headerCenter();
_getElementById('headerCenterImage').value = printInfo.headerCenterImage();
_getElementById('headerRight').value = printInfo.headerRight();
_getElementById('headerRightImage').value = printInfo.headerRightImage();
_getElementById('footerLeft').value = printInfo.footerLeft();
_getElementById('footerLeftImage').value = printInfo.footerLeftImage();
_getElementById('footerCenter').value = printInfo.footerCenter();
_getElementById('footerCenterImage').value = printInfo.footerCenterImage();
_getElementById('footerRight').value = printInfo.footerRight();
_getElementById('footerRightImage').value = printInfo.footerRightImage();
}
function initSpread(spread) {
_getElementById('savePDF').onclick = function () {
spread.savePDF(function (blob) {
saveAs(blob, 'download.pdf');
}, console.log);
};
var sd = data;
if (sd && sd.sheets) {
if (!spread) {
return;
}
spread.suspendPaint();
spread.fromJSON(sd);
var sheet = spread.sheets[0];
sheet.suspendPaint();
adjustLayoutForPrint(sheet);
setPrintInfo(sheet);
sheet.resumePaint();
spread.resumePaint();
}
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta name="spreadjs culture" content="zh-cn" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js"
type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/FileSaver.js" type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-print/dist/gc.spread.sheets.print.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-pdf/dist/gc.spread.sheets.pdf.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js"
type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/data/exportPDF.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
<div class="options-container">
<div class="container">
<p>调整以下选项，然后点击 <b>设置打印信息</b> 按钮将这些选项应用到 Spread 打印信息中。</p>
<p> 点击 <b>导出 PDF</b> 按钮，查看这些设置如何影响工作簿保存为 PDF 的方式。</p>
<div class="row">
<div class="group">
<label>起始行:</label>
<input id="rowStart">
</div>
<div class="group">
<label>结束行:</label>
<input id="rowEnd">
</div>
</div>
<div class="row">
<div class="group">
<label>起始列:</label>
<input id="columnStart">
</div>
<div class="group">
<label>结束列:</label>
<input id="columnEnd">
</div>
</div>
<div class="row">
<div class="group">
<label>重复起始行:</label>
<input id="repeatRowStart">
</div>
<div class="group">
<label>重复结束行:</label>
<input id="repeatRowEnd">
</div>
</div>
<div class="row">
<div class="group">
<label>重复起始列:</label>
<input id="repeatColumnStart">
</div>
<div class="group">
<label>重复结束列:</label>
<input id="repeatColumnEnd">
</div>
</div>
<div class="row">
<div class="group">
<label>
<input type="checkbox" id="showBorder">
显示边框
</label>
</div>
<div class="group">
<label>
<input type="checkbox" id="showGridLine">
显示网格线
</label>
</div>
<div class="group">
<label>
<input type="checkbox" id="blackAndWhite">
黑白模式
</label>
</div>
</div>
<div class="row">
<div class="group">
<label>显示行标题:</label>
<select id="showRowHeader">
<option value="0">继承</option>
<option value="1">隐藏</option>
<option value="2">显示</option>
<option value="3">仅显示一次</option>
</select>
</div>
<div class="group">
<label>显示列标题:</label>
<select id="showColumnHeader">
<option value="0">继承</option>
<option value="1">隐藏</option>
<option value="2">显示</option>
<option value="3">仅显示一次</option>
</select>
</div>
</div>
<div class="row">
<div class="group">
<label>页眉左侧:</label>
<input id="headerLeft">
</div>
<div class="group">
<label>页眉左侧图片:</label>
<select id="headerLeftImage">
<option value="$DEMOROOT$/spread/source/images/apple.jpg">苹果</option>
<option value="$DEMOROOT$/spread/source/images/olympic.jpg">奥运</option>
</select>
</div>
</div>
<div class="row">
<div class="group">
<label>页眉居中:</label>
<input id="headerCenter">
</div>
<div class="group">
<label>页眉居中图片:</label>
<select id="headerCenterImage">
<option value="$DEMOROOT$/spread/source/images/apple.jpg">苹果</option>
<option value="$DEMOROOT$/spread/source/images/olympic.jpg">奥运</option>
</select>
</div>
</div>
<div class="row">
<div class="group">
<label>页眉右侧:</label>
<input id="headerRight">
</div>
<div class="group">
<label>页眉右侧图片:</label>
<select id="headerRightImage">
<option value="$DEMOROOT$/spread/source/images/apple.jpg">苹果</option>
<option value="$DEMOROOT$/spread/source/images/olympic.jpg">奥运</option>
</select>
</div>
</div>
<div class="row">
<div class="group">
<label>页脚左侧:</label>
<input id="footerLeft">
</div>
<div class="group">
<label>页脚左侧图片:</label>
<select id="footerLeftImage">
<option value="$DEMOROOT$/spread/source/images/apple.jpg">苹果</option>
<option value="$DEMOROOT$/spread/source/images/olympic.jpg">奥运</option>
</select>
</div>
</div>
<div class="row">
<div class="group">
<label>页脚居中:</label>
<input id="footerCenter">
</div>
<div class="group">
<label>页脚居中图片:</label>
<select id="footerCenterImage">
<option value="$DEMOROOT$/spread/source/images/apple.jpg">苹果</option>
<option value="$DEMOROOT$/spread/source/images/olympic.jpg">奥运</option>
</select>
</div>
</div>
<div class="row">
<div class="group">
<label>页脚右侧:</label>
<input id="footerRight">
</div>
<div class="group">
<label>页脚右侧图片:</label>
<select id="footerRightImage">
<option value="$DEMOROOT$/spread/source/images/apple.jpg">苹果</option>
<option value="$DEMOROOT$/spread/source/images/olympic.jpg">奥运</option>
</select>
</div>
</div>
<div class="row">
<div class="group">
<label></label>
<input type="button" id="btnSetPrintInfo" value="设置打印信息">
</div>
</div>
<hr style="border: 1px solid white;border-bottom-color: lightgray;" />
<div>
<input type="button" style="margin-bottom: 6px" value="导出 PDF" id="savePDF">
</div>
</div>
</div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.option-row {
font-size: 14px;
padding: 5px;
margin-top: 10px;
}
.container {
width: 100%;
height: calc(100% - 40px);
box-sizing: border-box;
}
.group {
padding-bottom: 8px;
}
label {
display: inline-block;
min-width: 130px;
}
input,
select {
margin-top: 6px;
padding: 4px 6px;
width: 100%;
display: block;
box-sizing: border-box;
}
input[type=checkbox] {
width: auto;
display: inline-block;
}
hr {
border: 1px solid white;
border-bottom-color: lightgray;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
