savePDFメソッドを使用すると、すべてのシート、または指定のシートをエクスポートできます。
個々のシートに対し、シートのprintInfoオプションを設定して、個別に詳細オプションを設定できます。
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="ja-jp" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/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$/ja/purejs/node_modules/@mescius/spread-sheets-print/dist/gc.spread.sheets.print.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-pdf/dist/gc.spread.sheets.pdf.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-resources-ja/dist/gc.spread.sheets.resources.ja.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>以下のオプションを変更して、画面下部にスクロールして［PrintInfoを設定］ボタンをクリックすると、SpreadのPrintInfoにこれらのオプションが設定されます。［PDFにエクスポート］ボタンをクリックすると、これらの設定に基づき、ワークブックがどのようにPDFファイルとして保存されたかを確認できます。</p>
<div class="row">
<div class="group">
<label>RowStart:</label>
<input id="rowStart">
</div>
<div class="group">
<label>RowEnd:</label>
<input id="rowEnd">
</div>
</div>
<div class="row">
<div class="group">
<label>ColumnStart:</label>
<input id="columnStart">
</div>
<div class="group">
<label>ColumnEnd:</label>
<input id="columnEnd">
</div>
</div>
<div class="row">
<div class="group">
<label>RepeatRowStart:</label>
<input id="repeatRowStart">
</div>
<div class="group">
<label>RepeatRowEnd:</label>
<input id="repeatRowEnd">
</div>
</div>
<div class="row">
<div class="group">
<label>RepeatColumnStart:</label>
<input id="repeatColumnStart">
</div>
<div class="group">
<label>RepeatColumnEnd:</label>
<input id="repeatColumnEnd">
</div>
</div>
<div class="row">
<div class="group">
<label>
<input type="checkbox" id="showBorder">
ShowBorder
</label>
</div>
<div class="group">
<label>
<input type="checkbox" id="showGridLine">
ShowGridLine
</label>
</div>
<div class="group">
<label>
<input type="checkbox" id="blackAndWhite">
Black And White
</label>
</div>
</div>
<div class="row">
<div class="group">
<label>ShowRowHeader:</label>
<select id="showRowHeader">
<option value="0">Inherit</option>
<option value="1">Hide</option>
<option value="2">Show</option>
<option value="3">ShowOnce</option>
</select>
</div>
<div class="group">
<label>ShowColumnHeader:</label>
<select id="showColumnHeader">
<option value="0">Inherit</option>
<option value="1">Hide</option>
<option value="2">Show</option>
<option value="3">ShowOnce</option>
</select>
</div>
</div>
<div class="row">
<div class="group">
<label>HeaderLeft:</label>
<input id="headerLeft">
</div>
<div class="group">
<label>HeaderLeftImage:</label>
<select id="headerLeftImage">
<option value="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option>
<option value="$DEMOROOT$/spread/source/images/olympic.jpg" selected>Olympic</option>
</select>
</div>
</div>
<div class="row">
<div class="group">
<label>HeaderCenter:</label>
<input id="headerCenter">
</div>
<div class="group">
<label>HeaderCenterImage:</label>
<select id="headerCenterImage">
<option value="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option>
<option value="$DEMOROOT$/spread/source/images/olympic.jpg" selected>Olympic</option>
</select>
</div>
</div>
<div class="row">
<div class="group">
<label>HeaderRight:</label>
<input id="headerRight">
</div>
<div class="group">
<label>HeaderRightImage:</label>
<select id="headerRightImage">
<option value="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option>
<option value="$DEMOROOT$/spread/source/images/olympic.jpg" selected>Olympic</option>
</select>
</div>
</div>
<div class="row">
<div class="group">
<label>FooterLeft:</label>
<input id="footerLeft">
</div>
<div class="group">
<label>FooterLeftImage:</label>
<select id="footerLeftImage">
<option value="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option>
<option value="$DEMOROOT$/spread/source/images/olympic.jpg" selected>Olympic</option>
</select>
</div>
</div>
<div class="row">
<div class="group">
<label>FooterCenter:</label>
<input id="footerCenter">
</div>
<div class="group">
<label>FooterCenterImage:</label>
<select id="footerCenterImage">
<option value="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option>
<option value="$DEMOROOT$/spread/source/images/olympic.jpg" selected>Olympic</option>
</select>
</div>
</div>
<div class="row">
<div class="group">
<label>FooterRight:</label>
<input id="footerRight">
</div>
<div class="group">
<label>FooterRightImage:</label>
<select id="footerRightImage">
<option value="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option>
<option value="$DEMOROOT$/spread/source/images/olympic.jpg" selected>Olympic</option>
</select>
</div>
</div>
<div class="row">
<div class="group">
<label></label>
<input type="button" id="btnSetPrintInfo" value="PrintInfoを設定">
</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;
}
