自定义导出PDF

<template> <div class="sample-tutorial"> <gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread"> </gc-spread-sheets> <div class="options-container"> <div class="container"> <p>Adjust the options below then click the <b>Set PrintInfo</b> button to apply these options to the Spread PrintInfo.</p> <p> Click the <b>Export PDF</b> button to see how these settings affect the way the workbook is saved to PDF.</p> <div class="row"> <div class="group"> <label>RowStart:</label> <input v-model="printInfo.rowStart" id="rowStart" v-on:change="rowStartChange"> </div> <div class="group"> <label>RowEnd:</label> <input v-model="printInfo.rowEnd" id="rowEnd" v-on:change="rowEnd"> </div> </div> <div class="row"> <div class="group"> <label>ColumnStart:</label> <input v-model="printInfo.columnStart" id="columnStart" v-on:change="columnStart"> </div> <div class="group"> <label>ColumnEnd:</label> <input v-model="printInfo.columnEnd" id="columnEnd" v-on:change="columnEnd"> </div> </div> <div class="row"> <div class="group"> <label>RepeatRowStart:</label> <input v-model="printInfo.repeatRowStart" id="repeatRowStart" v-on:change="repeatRowStart"> </div> <div class="group"> <label>RepeatRowEnd:</label> <input id="repeatRowEnd" v-model="printInfo.repeatRowEnd" v-on:change="repeatRowEnd"> </div> </div> <div class="row"> <div class="group"> <label>RepeatColumnStart:</label> <input id="repeatColumnStart" v-model="printInfo.repeatColumnStart" v-on:change="repeatColumnStart"> </div> <div class="group"> <label>RepeatColumnEnd:</label> <input id="repeatColumnEnd" v-model="printInfo.repeatColumnEnd" v-on:change="repeatColumnEnd"> </div> </div> <div class="row"> <div class="group"> <label> <input type="checkbox" id="showBorder" v-model="printInfo.showBorder" v-on:change="showBorder"> ShowBorder </label> </div> <div class="group"> <label> <input type="checkbox" id="showGridLine" v-model="printInfo.showGridLine" v-on:change="showGridLine"> ShowGridLine </label> </div> <div class="group"> <label> <input type="checkbox" id="blackAndWhite" v-model="printInfo.blackAndWhite" v-on:change="blackAndWhite"> Black And White </label> </div> </div> <div class="row"> <div class="group"> <label>ShowRowHeader:</label> <select id="showRowHeader" v-model="printInfo.showRowHeader" v-on:change="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" v-model="printInfo.showColumnHeader" v-on:change="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" v-model="printInfo.headerLeft" v-on:change="headerLeft"> </div> <div class="group"> <label>HeaderLeftImage:</label> <select id="headerLeftImage" v-model="printInfo.headerLeftImage" v-on:change="headerLeftImage"> <option value="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option> <option value="$DEMOROOT$/spread/source/images/olympic.jpg">Olympic</option> </select> </div> </div> <div class="row"> <div class="group"> <label>HeaderCenter:</label> <input id="headerCenter" v-model="printInfo.headerCenter" v-on:change="headerCenter"> </div> <div class="group"> <label>HeaderCenterImage:</label> <select id="headerCenterImage" v-model="printInfo.headerCenterImage" v-on:change="headerCenterImage"> <option value="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option> <option value="$DEMOROOT$/spread/source/images/olympic.jpg">Olympic</option> </select> </div> </div> <div class="row"> <div class="group"> <label>HeaderRight:</label> <input id="headerRight" v-model="printInfo.headerRight" v-on:change="headerRight"> </div> <div class="group"> <label>HeaderRightImage:</label> <select id="headerRightImage" v-model="printInfo.headerRightImage" v-on:change="headerRightImage"> <option value="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option> <option value="$DEMOROOT$/spread/source/images/olympic.jpg">Olympic</option> </select> </div> </div> <div class="row"> <div class="group"> <label>FooterLeft:</label> <input id="footerLeft" v-model="printInfo.footerLeft" v-on:change="footerLeft"> </div> <div class="group"> <label>FooterLeftImage:</label> <select id="footerLeftImage" v-model="printInfo.footerLeftImage" v-on:change="footerLeftImage"> <option value="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option> <option value="$DEMOROOT$/spread/source/images/olympic.jpg">Olympic</option> </select> </div> </div> <div class="row"> <div class="group"> <label>FooterCenter:</label> <input id="footerCenter" v-model="printInfo.footerCenter" v-on:change="footerCenter"> </div> <div class="group"> <label>FooterCenterImage:</label> <select id="footerCenterImage" v-model="printInfo.footerCenterImage" v-on:change="footerCenterImage"> <option value="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option> <option value="$DEMOROOT$/spread/source/images/olympic.jpg">Olympic</option> </select> </div> </div> <div class="row"> <div class="group"> <label>FooterRight:</label> <input id="footerRight" v-model="printInfo.footerRight" v-on:change="footerRight"> </div> <div class="group"> <label>FooterRightImage:</label> <select id="footerRightImage" v-model="printInfo.footerRightImage" v-on:change="footerRightImage"> <option value="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option> <option value="$DEMOROOT$/spread/source/images/olympic.jpg">Olympic</option> </select> </div> </div> <div class="row"> <div class="group"> <label></label> <input type="button" id="btnSetPrintInfo" value="Set PrintInfo" v-on:click='setPrintInfoBut'> </div> </div> <hr style="border: 1px solid white;border-bottom-color: lightgray;" /> <div> <input type="button" style="margin-bottom: 6px" value="Export PDF" id="savePDF" v-on:click='savePDF'> </div> </div> </div> </div> </template> <script> import Vue from "vue"; import '@grapecity-software/spread-sheets-resources-zh'; GC.Spread.Common.CultureManager.culture("zh-cn"); import '@grapecity-software/spread-sheets-vue'; import GC from '@grapecity-software/spread-sheets'; import '@grapecity-software/spread-sheets-print'; import '@grapecity-software/spread-sheets-pdf'; import './styles.css'; let App = Vue.extend({ name: "app", data: function() { return { autoGenerateColumns: false, spread: null, printInfo: { rowStart: -1, rowEnd: -1, columnStart: -1, columnEnd: 5, repeatRowStart: 0, repeatRowEnd: 1, repeatColumnStart: -1, repeatColumnEnd: -1, showBorder: false, showGridLine: false, blackAndWhite: false, showRowHeader: 1, showColumnHeader: 1, headerLeft: '', headerLeftImage: '', headerCenter: '', headerCenterImage: '', headerRight: '', footerLeft: '', headerRightImage: '', footerLeftImage: '', footerCenter: '', footerCenterImage: '', footerRight: '', footerRightImage: '' } }; }, methods: { footerRightImage(e) { this.printInfo.footerRightImage = e.target.value; }, footerRight(e) { this.printInfo.footerRight = e.target.value; }, footerCenterImage(e) { this.printInfo.footerCenterImage = e.target.value; }, footerCenter(e) { this.printInfo.footerCenter = e.target.value; }, footerLeftImage(e) { this.printInfo.footerLeftImage = e.target.value; }, headerRightImage(e) { this.printInfo.headerRightImage = e.target.value; }, footerLeft(e) { this.printInfo.footerLeft = e.target.value; }, headerRight(e) { this.printInfo.headerRight = e.target.value; }, headerCenterImage(e) { this.printInfo.headerCenterImage = e.target.value; }, headerCenter(e) { this.printInfo.headerCenter = e.target.value; }, headerLeftImage(e) { this.printInfo.headerLeftImage = e.target.value; }, headerLeft(e) { this.printInfo.headerLeft = e.target.value; }, showColumnHeader(e) { this.printInfo.showColumnHeader = e.target.value; }, showRowHeader(e) { this.printInfo.showRowHeader = e.target.value; }, blackAndWhite(e) { this.printInfo.blackAndWhite = e.target.checked; }, showGridLine(e) { this.printInfo.showGridLine = e.target.checked; }, showBorder(e) { this.printInfo.showBorder = e.target.checked; }, repeatColumnEnd(e) { this.printInfo.repeatColumnEnd = e.target.value; }, repeatColumnStart(e) { this.printInfo.repeatColumnStart = e.target.value; }, repeatRowEnd(e) { this.printInfo.repeatRowEnd = e.target.value; }, repeatRowStart(e) { this.printInfo.repeatRowStart = e.target.value; }, rowEnd(e) { this.printInfo.rowEnd = e.target.value; }, rowStartChange(e) { this.printInfo.rowStart = e.target.value; }, columnEnd(e) { this.printInfo.columnEnd = e.target.value; }, columnStart(e) { this.printInfo.columnStart = e.target.value; }, savePDF() { this.spread.savePDF(function(blob) { saveAs(blob, 'download.pdf'); }, console.log); }, setPrintInfoBut() { const stateInfo = this.printInfo; function setPrintInfoNumberValueItem(printInfo, key) { let value = parseInt(stateInfo[key]); if (!isNaN(value)) { printInfo[key](value); } } let sheet = this.spread.getActiveSheet(), printInfo = sheet.printInfo(); ["rowStart", "rowEnd", "columnStart", "columnEnd", "repeatRowStart", "repeatRowEnd", "repeatColumnStart", "repeatColumnEnd" ].forEach(function(name) { setPrintInfoNumberValueItem(printInfo, name); }); printInfo.showBorder(stateInfo.showBorder); printInfo.showGridLine(stateInfo.showGridLine); printInfo.blackAndWhite(stateInfo.blackAndWhite); printInfo.showRowHeader(parseInt(stateInfo.showRowHeader)); printInfo.showColumnHeader(parseInt(stateInfo.showColumnHeader)); printInfo.headerLeft(stateInfo.headerLeft); printInfo.headerLeftImage(stateInfo.headerLeftImage); printInfo.headerCenter(stateInfo.headerCenter); printInfo.headerCenterImage(stateInfo.headerCenterImage); printInfo.headerRight(stateInfo.headerRight); printInfo.headerRightImage(stateInfo.headerRightImage); printInfo.footerLeft(stateInfo.footerLeft); printInfo.footerLeftImage(stateInfo.footerLeftImage); printInfo.footerCenter(stateInfo.footerCenter); printInfo.footerCenterImage(stateInfo.footerCenterImage); printInfo.footerRight(stateInfo.footerRight); printInfo.footerRightImage(stateInfo.footerRightImage); }, initSpread(spread) { this.spread = spread; let sd = data; if (sd && sd.sheets) { if (!spread) { return; } spread.suspendPaint(); spread.fromJSON(sd); let sheet = spread.sheets[0]; sheet.suspendPaint(); this.adjustLayoutForPrint(sheet); this.setPrintInfo(sheet); sheet.resumePaint(); spread.resumePaint(); } }, 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 (let 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 }); }, setPrintInfo(sheet) { let printInfo = sheet.printInfo(); let stateInfo = this.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 stateInfo.rowStart = printInfo.rowStart(); stateInfo.rowEnd = printInfo.rowEnd(); stateInfo.columnStart = printInfo.columnStart(); stateInfo.columnEnd = printInfo.columnEnd(); stateInfo.repeatRowStart = printInfo.repeatRowStart(); stateInfo.repeatRowEnd = printInfo.repeatRowEnd(); stateInfo.repeatColumnStart = printInfo.repeatColumnStart(); stateInfo.repeatColumnEnd = printInfo.repeatColumnEnd(); stateInfo.showBorder = printInfo.showBorder(); stateInfo.showGridLine = printInfo.showGridLine(); stateInfo.blackAndWhite = printInfo.blackAndWhite(); stateInfo.showRowHeader = printInfo.showRowHeader(); stateInfo.showColumnHeader = printInfo.showColumnHeader(); stateInfo.headerLeft = printInfo.headerLeft(); stateInfo.headerLeftImage = printInfo.headerLeftImage(); stateInfo.headerCenter = printInfo.headerCenter(); stateInfo.headerCenterImage = printInfo.headerCenterImage(); stateInfo.headerRight = printInfo.headerRight(); stateInfo.headerRightImage = printInfo.headerRightImage(); stateInfo.footerLeft = printInfo.footerLeft(); stateInfo.footerLeftImage = printInfo.footerLeftImage(); stateInfo.footerCenter = printInfo.footerCenter(); stateInfo.footerCenterImage = printInfo.footerCenterImage(); stateInfo.footerRight = printInfo.footerRight(); stateInfo.footerRightImage = printInfo.footerRightImage(); } }, computed: { dataSource() { return getData(); } } }); new Vue({ render: h => h(App) }).$mount('#app'); </script>

<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/zh/vue/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/spread/source/js/FileSaver.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/data/exportPDF.js" type="text/javascript"></script> <!-- SystemJS --> <script src="$DEMOROOT$/zh/vue/node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app.vue'); System.import('$DEMOROOT$/zh/lib/vue/license.js'); </script> </head> <body> <div id="app" style="height: 100%;"></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; }

(function(global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, meta: { '*.css': { loader: 'css' }, '*.vue': { loader: 'vue-loader' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { '@grapecity-software/spread-sheets': 'npm:@grapecity-software/spread-sheets/index.js', '@grapecity-software/spread-sheets-resources-zh': 'npm:@grapecity-software/spread-sheets-resources-zh/index.js', '@grapecity-software/spread-sheets-print': 'npm:@grapecity-software/spread-sheets-print/index.js', '@grapecity-software/spread-sheets-pdf': 'npm:@grapecity-software/spread-sheets-pdf/index.js', '@grapecity-software/spread-sheets-vue': 'npm:@grapecity-software/spread-sheets-vue/index.js', '@grapecity-software/jsob-test-dependency-package/react-components': 'npm:@grapecity-software/jsob-test-dependency-package/react-components/index.js', 'jszip': 'npm:jszip/dist/jszip.js', 'css': 'npm:systemjs-plugin-css/css.js', 'vue': 'npm:vue/dist/vue.min.js', 'vue-loader': 'npm:systemjs-vue-browser/index.js', 'tiny-emitter': 'npm:tiny-emitter/index.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'js' }, rxjs: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' } } }); })(this);