カスタムPDFエクスポート

SpreadJSからPDFファイルへのエクスポートはカスタマイズできます。SpreadJSの印刷設定を変更できるため、必要な情報を正確にエクスポートできます。

savePDFメソッドを使用すると、すべてのシート、または指定のシートをエクスポートできます。 個々のシートに対し、シートのprintInfoオプションを設定して、個別に詳細オプションを設定できます。
<template> <div class="sample-tutorial"> <gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread"> </gc-spread-sheets> <div class="options-container"> <div class="container"> <p> 以下のオプションを変更して、画面下部にスクロールして[PrintInfoを設定]ボタンをクリックすると、SpreadのPrintInfoにこれらのオプションが設定されます。[PDFにエクスポート]ボタンをクリックすると、これらの設定に基づき、ワークブックがどのようにPDFファイルとして保存されたかを確認できます。 </p> <div class="row"> <div class="group"> <label>RowStart:</label> <input v-model="printInfoRef.rowStart" id="rowStart" v-on:change="rowStartChange"> </div> <div class="group"> <label>RowEnd:</label> <input v-model="printInfoRef.rowEnd" id="rowEnd" v-on:change="rowEnd"> </div> </div> <div class="row"> <div class="group"> <label>ColumnStart:</label> <input v-model="printInfoRef.columnStart" id="columnStart" v-on:change="columnStart"> </div> <div class="group"> <label>ColumnEnd:</label> <input v-model="printInfoRef.columnEnd" id="columnEnd" v-on:change="columnEnd"> </div> </div> <div class="row"> <div class="group"> <label>RepeatRowStart:</label> <input v-model="printInfoRef.repeatRowStart" id="repeatRowStart" v-on:change="repeatRowStart"> </div> <div class="group"> <label>RepeatRowEnd:</label> <input id="repeatRowEnd" v-model="printInfoRef.repeatRowEnd" v-on:change="repeatRowEnd"> </div> </div> <div class="row"> <div class="group"> <label>RepeatColumnStart:</label> <input id="repeatColumnStart" v-model="printInfoRef.repeatColumnStart" v-on:change="repeatColumnStart"> </div> <div class="group"> <label>RepeatColumnEnd:</label> <input id="repeatColumnEnd" v-model="printInfoRef.repeatColumnEnd" v-on:change="repeatColumnEnd"> </div> </div> <div class="row"> <div class="group"> <label> <input type="checkbox" id="showBorder" v-model="printInfoRef.showBorder" v-on:change="showBorder"> ShowBorder </label> </div> <div class="group"> <label> <input type="checkbox" id="showGridLine" v-model="printInfoRef.showGridLine" v-on:change="showGridLine"> ShowGridLine </label> </div> <div class="group"> <label> <input type="checkbox" id="blackAndWhite" v-model="printInfoRef.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="printInfoRef.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="printInfoRef.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="printInfoRef.headerLeft" v-on:change="headerLeft"> </div> <div class="group"> <label>HeaderLeftImage:</label> <select id="headerLeftImage" v-model="printInfoRef.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="printInfoRef.headerCenter" v-on:change="headerCenter"> </div> <div class="group"> <label>HeaderCenterImage:</label> <select id="headerCenterImage" v-model="printInfoRef.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="printInfoRef.headerRight" v-on:change="headerRight"> </div> <div class="group"> <label>HeaderRightImage:</label> <select id="headerRightImage" v-model="printInfoRef.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="printInfoRef.footerLeft" v-on:change="footerLeft"> </div> <div class="group"> <label>FooterLeftImage:</label> <select id="footerLeftImage" v-model="printInfoRef.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="printInfoRef.footerCenter" v-on:change="footerCenter"> </div> <div class="group"> <label>FooterCenterImage:</label> <select id="footerCenterImage" v-model="printInfoRef.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="printInfoRef.footerRight" v-on:change="footerRight"> </div> <div class="group"> <label>FooterRightImage:</label> <select id="footerRightImage" v-model="printInfoRef.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="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="PDF形式でエクスポート" id="savePDF" v-on:click='savePDF'> </div> </div> </div> </div> </template> <script setup> import '@mescius/spread-sheets-vue'; import { ref } from "vue"; import GC from "@mescius/spread-sheets"; import '@mescius/spread-sheets-print'; import '@mescius/spread-sheets-pdf'; import '@mescius/spread-sheets-resources-ja'; GC.Spread.Common.CultureManager.culture("ja-jp"); const spreadNS = GC.Spread.Sheets; let spread = null; const printInfoRef = ref({ 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: '' }); const footerRightImage = (e) => { printInfoRef.value.footerRightImage = e.target.value; } const footerRight = (e) => { printInfoRef.value.footerRight = e.target.value; } const footerCenterImage = (e) => { printInfoRef.value.footerCenterImage = e.target.value; } const footerCenter = (e) => { printInfoRef.value.footerCenter = e.target.value; } const footerLeftImage = (e) => { printInfoRef.value.footerLeftImage = e.target.value; } const headerRightImage = (e) => { printInfoRef.value.headerRightImage = e.target.value; } const footerLeft = (e) => { printInfoRef.value.footerLeft = e.target.value; } const headerRight = (e) => { printInfoRef.value.headerRight = e.target.value; } const headerCenterImage = (e) => { printInfoRef.value.headerCenterImage = e.target.value; } const headerCenter = (e) => { printInfoRef.value.headerCenter = e.target.value; } const headerLeftImage = (e) => { printInfoRef.value.headerLeftImage = e.target.value; } const headerLeft = (e) => { printInfoRef.value.headerLeft = e.target.value; } const showColumnHeader = (e) => { printInfoRef.value.showColumnHeader = e.target.value; } const showRowHeader = (e) => { printInfoRef.value.showRowHeader = e.target.value; } const blackAndWhite = (e) => { printInfoRef.value.blackAndWhite = e.target.checked; } const showGridLine = (e) => { printInfoRef.value.showGridLine = e.target.checked; } const showBorder = (e) => { printInfoRef.value.showBorder = e.target.checked; } const repeatColumnEnd = (e) => { printInfoRef.value.repeatColumnEnd = e.target.value; } const repeatColumnStart = (e) => { printInfoRef.value.repeatColumnStart = e.target.value; } const repeatRowEnd = (e) => { printInfoRef.value.repeatRowEnd = e.target.value; } const repeatRowStart = (e) => { printInfoRef.value.repeatRowStart = e.target.value; } const rowEnd = (e) => { printInfoRef.value.rowEnd = e.target.value; } const rowStartChange = (e) => { printInfoRef.value.rowStart = e.target.value; } const columnEnd = (e) => { printInfoRef.value.columnEnd = e.target.value; } const columnStart = (e) => { printInfoRef.value.columnStart = e.target.value; } const savePDF = () => { spread.savePDF(function (blob) { saveAs(blob, 'download.pdf'); }, console.log); } const setPrintInfoBut = () => { const stateInfo = printInfoRef.value; function setPrintInfoNumberValueItem(printInfo, key) { let value = parseInt(stateInfo[key]); if (!isNaN(value)) { printInfo[key](value); } } let sheet = 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); } const initSpread = (spreadObj) => { spread = spreadObj; let sd = data; if (sd && sd.sheets) { if (!spread) { return; } spread.suspendPaint(); spread.fromJSON(sd); let sheet = spread.sheets[0]; sheet.suspendPaint(); adjustLayoutForPrint(sheet); setPrintInfo(sheet); sheet.resumePaint(); spread.resumePaint(); registerPDFFont("游明朝", "normal", "$DEMOROOT$/spread/source/data/ipaexm.ttf"); registerPDFFont("Calibri", "normal", "$DEMOROOT$/spread/source/data/ipaexg.ttf"); } } const 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 }); } const setPrintInfo = (sheet) => { let printInfo = sheet.printInfo(); let stateInfo = printInfoRef.value; // 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(); }; const registerPDFFont = (name, type, fontPath) => { const xhr = new XMLHttpRequest(); xhr.open('GET', fontPath, true); xhr.responseType = 'arraybuffer'; xhr.onload = function (e) { if (this.status == 200) { const fontArrayBuffer = this.response; let fonts = {}; fonts[type] = fontArrayBuffer; GC.Spread.Sheets.PDF.PDFFontsManager.registerFont(name, fonts); } }; xhr.send(); }; </script> <style scoped> #app { height: 100%; } .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; } </style>
<!DOCTYPE html> <html lang="en" style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>SpreadJS VUE</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ja/vue3/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/ja/vue3/node_modules/systemjs/dist/system.src.js"></script> <script src="./systemjs.config.js"></script> <script src="./compiler.js" type="module"></script> <script src="$DEMOROOT$/spread/source/js/FileSaver.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/data/exportPDFJP.js" type="text/javascript"></script> <script> var System = SystemJS; System.import("./src/app.js"); System.import('$DEMOROOT$/ja/lib/vue3/license.js'); </script> </head> <body> <div id="app"></div> </body> </html>
(function (global) { SystemJS.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, packageConfigPaths: [ './node_modules/*/package.json', "./node_modules/@mescius/*/package.json", "./node_modules/@babel/*/package.json", "./node_modules/@vue/*/package.json" ], map: { 'vue': "npm:vue/dist/vue.esm-browser.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", '@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js', '@mescius/spread-sheets-resources-ja': 'npm:@mescius/spread-sheets-resources-ja/index.js', '@mescius/spread-sheets-vue': 'npm:@mescius/spread-sheets-vue/index.js', '@mescius/spread-sheets-print': 'npm:@mescius/spread-sheets-print/index.js', '@mescius/spread-sheets-pdf': 'npm:@mescius/spread-sheets-pdf/index.js', }, meta: { '*.css': { loader: 'systemjs-plugin-css' }, '*.vue': { loader: "../plugin-vue/index.js" } } }); })(this);