ピボットグリッド:Excel/PDFエクスポート

PivotGridFlexGridを拡張するので、通常のFlexGridをエクスポートするのと同じようにXLSXおよびPDFにエクスポートできます。

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as wjOlap from '@grapecity/wijmo.olap'; import * as wjGridXlsx from '@grapecity/wijmo.grid.xlsx'; import * as wjGridPdf from '@grapecity/wijmo.grid.pdf'; import * as wjPdf from '@grapecity/wijmo.pdf'; import { CellRange } from '@grapecity/wijmo.grid'; import { getData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // initialize pivot engine let ng = new wjOlap.PivotEngine({ autoGenerateFields: false, fields: [ { binding: 'date', header: '日付' }, { binding: 'buyer', header: '担当者' }, { binding: 'type', header: '分類' }, { binding: 'amount', header: '金額' } ], itemsSource: getData(1000), valueFields: ['金額'], rowFields: ['担当者', '分類'], showRowTotals: 'Subtotals', showColumnTotals: 'Subtotals', }); // let amountField = ng.fields.getField('金額'); amountField.format = 'c0'; // let dateField = ng.fields.getField('日付'); dateField.format = 'yyyy'; // show dates as years // // show pivot panel let pivotPanel = new wjOlap.PivotPanel('#pivotPanel', { itemsSource: ng }); // // show pivot grid let pivotGrid = new wjOlap.PivotGrid('#pivotGrid', { itemsSource: ng }); // // export the grid to CSV // NOTE: does not require any additional modules document.getElementById('csv').addEventListener('click', () => { let rng = new CellRange(0, 0, pivotGrid.rows.length - 1, pivotGrid.columns.length - 1), csv = pivotGrid.getClipString(rng, true, true, true); // save CSV with column and row headers exportFile(csv, 'PivotGrid.csv'); }); // // export the grid to XLSX // NOTE: requires jszip, wijmo.xlsx, and wijmo.grid.xlsx document.getElementById('xlsx').addEventListener('click', () => { // create book with current view let book = wjGridXlsx.FlexGridXlsxConverter.saveAsync(pivotGrid, { includeColumnHeaders: true, includeRowHeaders: true }); book.sheets[0].name = 'PivotGrid'; // // save the book book.saveAsync('PivotGrid.xlsx'); }); // // export grid to PDF // NOTE: requires wijmo.pdf and wijmo.grid.pdf document.getElementById('pdf').addEventListener('click', () => { wjGridPdf.FlexGridPdfConverter.export(pivotGrid, 'PivotGrid.pdf', { embeddedFonts: [{ source: 'https://demo.grapecity.com/wijmo/sample/fonts/ipaexg.ttf', name: 'ipaexg' }], maxPages: 10, scaleMode: wjGridPdf.ScaleMode.PageWidth, documentOptions: { compress: true, header: { declarative: { text: '\t&[Page] / &[Pages]' } }, footer: { declarative: { text: '\t&[Page] / &[Pages]' } }, info: { author: 'GrapeCity', title: 'PivotGrid' } }, styles: { cellStyle: { font: { family: 'ipaexg' }, backgroundColor: '#ffffff', borderColor: '#c6c6c6' }, altCellStyle: { backgroundColor: '#f9f9f9' }, groupCellStyle: { backgroundColor: '#dddddd' }, headerCellStyle: { backgroundColor: '#eaeaea' } } }); }); // // create a PDF document with the PivotGrid and some other content // NOTE: requires wijmo.pdf and wijmo.grid.pdf document.getElementById('pdfdoc').addEventListener('click', () => { // create the document let doc = new wjPdf.PdfDocument({ compress: true, header: { declarative: { text: '\t&[Page] / &[Pages]' } }, ended: (sender, args) => { wjPdf.saveBlob(args.blob, 'PivotGridDoc.pdf'); } }); doc.registerFont({ source: 'https://demo.grapecity.com/wijmo/sample/fonts/ipaexg.ttf', name: 'ipaexg' }); doc.setFont(new wjPdf.PdfFont('ipaexg')); // // add some content doc.drawText('これはピボットグリッドコントロールです。'); // // add the grid (400pt wide) wjGridPdf.FlexGridPdfConverter.draw(pivotGrid, doc, 400, null, { styles: { cellStyle: { font: { family: 'ipaexg' } } } }); // // finish document doc.end(); }); } function exportFile(csv, fileName) { var fileType = 'txt/csv;charset=utf-8'; if (navigator.msSaveBlob) { // IE navigator.msSaveBlob(new Blob([csv], { type: fileType }), fileName); } else { var e = document.createElement('a'); e.setAttribute('href', 'data:' + fileType + ',' + encodeURIComponent(csv)); e.setAttribute('download', fileName); e.style.display = 'none'; document.body.appendChild(e); e.click(); document.body.removeChild(e); } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Grapecity Wijmo OLAP Pivot Grid Export</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-xs-5"> <div id="pivotPanel"></div> </div> <div class="col-xs-7"> <div id="pivotGrid"></div> </div> </div> <p> グリッドをエクスポート: <button id="csv" class="btn btn-primary"> CSV </button> <button id="xlsx" class="btn btn-primary"> XLSX </button> <button id="pdf" class="btn btn-primary"> PDF </button> <button id="pdfdoc" class="btn btn-primary"> PdfDocument </button> </p> </div> </body> </html> import * as wjCore from '@grapecity/wijmo'; // // get the raw data export function getData(cnt) { let today = new Date(), buyers = ['成宮 真紀', '山本 雅治', '加藤 泰江', '川村 匡'], types = ['音楽', 'ビデオ', '本', '家電', 'パソコン', '食品'], data = []; // for (let i = 0; i < cnt; i++) { data.push({ date: wjCore.DateTime.addDays(today, -Math.random() * 365 * 3), buyer: randomItem(buyers), type: randomItem(types), amount: 20 + Math.random() * 1000 }); } // return data; } // function randomItem(arr) { return arr[Math.floor(Math.random() * arr.length)]; } .wj-pivotgrid { max-height: 400px; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); } body { margin-bottom: 48pt; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as wjOlap from '@grapecity/wijmo.olap'; import * as wjGridXlsx from '@grapecity/wijmo.grid.xlsx'; import * as wjGridPdf from '@grapecity/wijmo.grid.pdf'; import * as wjPdf from '@grapecity/wijmo.pdf'; import { CellRange } from '@grapecity/wijmo.grid'; // import { Component, Inject, enableProdMode, NgModule, ViewChild } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { WjOlapModule } from '@grapecity/wijmo.angular2.olap'; import { DataService } from './app.data'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { @ViewChild('grid') pivotGrid: wjOlap.PivotGrid; ng: wjOlap.PivotEngine; // constructor(@Inject(DataService) private dataService: DataService) { this.ng = new wjOlap.PivotEngine({ autoGenerateFields: false, fields: [ { binding: 'date', header: '日付' }, { binding: 'buyer', header: '担当者' }, { binding: 'type', header: '分類' }, { binding: 'amount', header: '金額' } ], itemsSource: dataService.getData(1000), // raw data valueFields: ['金額'], // summarize amounts rowFields: ['担当者', '分類'], // by buyer and Type showRowTotals: 'Subtotals', showColumnTotals: 'Subtotals', }); this.ng.fields.getField('金額').format = 'c0'; this.ng.fields.getField('日付').format = 'yyyy'; } // export(docType: string) { if (docType === 'csv') { let grid = this.pivotGrid, rng = new CellRange(0, 0, grid.rows.length - 1, grid.columns.length - 1), csv = grid.getClipString(rng, true, true, true); // save CSV with column and row headers this.exportFile(csv, 'PivotGrid.csv'); } else if (docType === 'xlsx') { // // create book with current view let book = wjGridXlsx.FlexGridXlsxConverter.saveAsync(this.pivotGrid, { includeColumnHeaders: true, includeRowHeaders: true }); book.sheets[0].name = 'PivotGrid'; // // save the book book.saveAsync('PivotGrid.xlsx'); } else if (docType === 'pdf') { wjGridPdf.FlexGridPdfConverter.export(this.pivotGrid, 'PivotGrid.pdf', { embeddedFonts: [{ source: 'https://demo.grapecity.com/wijmo/sample/fonts/ipaexg.ttf', name: 'ipaexg' }], maxPages: 10, scaleMode: wjGridPdf.ScaleMode.PageWidth, documentOptions: { compress: true, header: { declarative: { text: '\t&[Page] / &[Pages]' } }, footer: { declarative: { text: '\t&[Page] / &[Pages]' } }, info: { author: 'GrapeCity', title: 'PivotGrid' } }, styles: { cellStyle: { font: { family: 'ipaexg' }, backgroundColor: '#ffffff', borderColor: '#c6c6c6' }, altCellStyle: { backgroundColor: '#f9f9f9' }, groupCellStyle: { backgroundColor: '#dddddd' }, headerCellStyle: { backgroundColor: '#eaeaea' } } }); } else if (docType === 'pdfdoc') { // create the document let doc = new wjPdf.PdfDocument({ compress: true, header: { declarative: { text: '\t&[Page] / &[Pages]' } }, ended: function (sender: wjPdf.PdfDocument, args: wjPdf.PdfDocumentEndedEventArgs) { wjPdf.saveBlob(args.blob, 'PivotGridDoc.pdf'); } }); doc.registerFont({ source: 'https://demo.grapecity.com/wijmo/sample/fonts/ipaexg.ttf', name: 'ipaexg' }); doc.setFont(new wjPdf.PdfFont('ipaexg')); // // add some content doc.drawText('これはピボットグリッドコントロールです。'); // // add the grid (400pt wide) wjGridPdf.FlexGridPdfConverter.draw(this.pivotGrid, doc, 400, null, { styles: { cellStyle: { font: { family: 'ipaexg' } } } }); // // finish document doc.end(); } } exportFile(content: string, fileName: string) { var fileType = 'txt/csv;charset=utf-8'; if (navigator.msSaveBlob) { // IE navigator.msSaveBlob(new Blob([content], { type: fileType }), fileName); } else { var e = document.createElement('a'); e.setAttribute('href', 'data:' + fileType + ',' + encodeURIComponent(content)); e.setAttribute('download', fileName); e.style.display = 'none'; document.body.appendChild(e); e.click(); document.body.removeChild(e); } } } // @NgModule({ imports: [WjOlapModule, BrowserModule], declarations: [AppComponent], providers: [DataService], bootstrap: [AppComponent] }) export class AppModule { } // enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Grapecity Wijmo OLAP Pivot Grid Export</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Polyfills --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.min.js"></script> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html> <div class="container-fluid"> <div class="row"> <div class="col-xs-5"> <wj-pivot-panel [itemsSource]="ng"></wj-pivot-panel> </div> <div class="col-xs-7"> <wj-pivot-grid #grid [itemsSource]="ng"></wj-pivot-grid> </div> </div> <p> グリッドをエクスポート: <button id="csv" class="btn btn-primary" (click)="export('csv')"> CSV </button> <button id="xlsx" class="btn btn-primary" (click)="export('xlsx')"> XLSX </button> <button id="pdf" class="btn btn-primary" (click)="export('pdf')"> PDF </button> <button id="pdfdoc" class="btn btn-primary" (click)="export('pdfdoc')"> PdfDocument </button> </p> </div> import { Injectable } from '@angular/core'; import * as wjCore from '@grapecity/wijmo'; // export interface DataItem { date: Date; buyer: string; type: string; amount: number; } // function randomItem(arr: string[]): string { return arr[Math.floor(Math.random() * arr.length)]; } // @Injectable() export class DataService { getData(cnt: number): DataItem[] { let today = new Date(), buyers = ['成宮 真紀', '山本 雅治', '加藤 泰江', '川村 匡'], types = ['音楽', 'ビデオ', '本', '家電', 'パソコン', '食品'], data = []; // for (let i = 0; i < cnt; i++) { data.push({ date: wjCore.DateTime.addDays(today, -Math.random() * 365 * 3), buyer: randomItem(buyers), type: randomItem(types), amount: 20 + Math.random() * 1000 }); } // return data; } } .wj-pivotgrid { max-height: 400px; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); } p button.btn { margin-right: 6px; } body { margin-bottom: 48pt; } import './app.css'; import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; // import * as React from 'react'; import * as ReactDOM from 'react-dom'; // import * as olap from '@grapecity/wijmo.olap'; import * as gridXlsx from '@grapecity/wijmo.grid.xlsx'; import * as gridPdf from '@grapecity/wijmo.grid.pdf'; import * as pdf from '@grapecity/wijmo.pdf'; import { CellRange } from '@grapecity/wijmo.grid'; import * as Olap from '@grapecity/wijmo.react.olap'; import { getData } from './data'; // class App extends React.Component { // constructor(props) { super(props); this.state = { ng: new olap.PivotEngine({ autoGenerateFields: false, fields: [ { binding: 'date', header: '日付' }, { binding: 'buyer', header: '担当者' }, { binding: 'type', header: '分類' }, { binding: 'amount', header: '金額' } ], itemsSource: getData(1000), valueFields: ['金額'], rowFields: ['担当者', '分類'], showRowTotals: 'Subtotals', showColumnTotals: 'Subtotals' }) }; } // render() { return (<div className="container-fluid"> <div className="row"> <div className="col-xs-5"> <Olap.PivotPanel itemsSource={this.state.ng}></Olap.PivotPanel> </div> <div className="col-xs-7"> <Olap.PivotGrid itemsSource={this.state.ng} initialized={this._initializePivotGrid.bind(this)}></Olap.PivotGrid> </div> </div> <p> グリッドをエクスポート:&nbsp; <button id="csv" className="btn btn-primary" onClick={() => this._exportGrid('csv')}> CSV </button> &nbsp; <button id="xlsx" className="btn btn-primary" onClick={() => this._exportGrid('xlsx')}> XLSX </button> &nbsp; <button id="pdf" className="btn btn-primary" onClick={() => this._exportGrid('pdf')}> PDF </button> &nbsp; <button id="pdfdoc" className="btn btn-primary" onClick={() => this._exportGrid('pdfdoc')}> PdfDocument </button> </p> </div>); } // componentDidMount() { this.state.ng.fields.getField('金額').format = 'c0'; this.state.ng.fields.getField('日付').format = 'yyyy'; } // _initializePivotGrid(sender) { this._pivotGrid = sender; } // _exportGrid(docType) { if (docType === 'csv') { let grid = this._pivotGrid, rng = new CellRange(0, 0, grid.rows.length - 1, grid.columns.length - 1), csv = grid.getClipString(rng, true, true, true); // save CSV with column and row headers this._exportFile(csv, 'PivotGrid.csv'); } else if (docType === 'xlsx') { // create book with current view let book = gridXlsx.FlexGridXlsxConverter.saveAsync(this._pivotGrid, { includeColumnHeaders: true, includeRowHeaders: true }); book.sheets[0].name = 'PivotGrid'; // save the book book.saveAsync('PivotGrid.xlsx'); } else if (docType === 'pdf') { gridPdf.FlexGridPdfConverter.export(this._pivotGrid, 'PivotGrid.pdf', { embeddedFonts: [{ source: 'https://demo.grapecity.com/wijmo/sample/fonts/ipaexg.ttf', name: 'ipaexg' }], maxPages: 10, scaleMode: gridPdf.ScaleMode.PageWidth, documentOptions: { compress: true, header: { declarative: { text: '\t&[Page] / &[Pages]' } }, footer: { declarative: { text: '\t&[Page] / &[Pages]' } }, info: { author: 'GrapeCity', title: 'PivotGrid' } }, styles: { cellStyle: { font: { family: 'ipaexg' }, backgroundColor: '#ffffff', borderColor: '#c6c6c6' }, altCellStyle: { backgroundColor: '#f9f9f9' }, groupCellStyle: { backgroundColor: '#dddddd' }, headerCellStyle: { backgroundColor: '#eaeaea' } } }); } else if (docType === 'pdfdoc') { // create the document let doc = new pdf.PdfDocument({ compress: true, header: { declarative: { text: '\t&[Page] / &[Pages]' } }, ended: (sender, args) => { pdf.saveBlob(args.blob, 'PivotGridDoc.pdf'); } }); doc.registerFont({ source: 'https://demo.grapecity.com/wijmo/sample/fonts/ipaexg.ttf', name: 'ipaexg' }); doc.setFont(new pdf.PdfFont('ipaexg')); // add some content doc.drawText('これはピボットグリッドコントロールです。'); // add the grid (400pt wide) gridPdf.FlexGridPdfConverter.draw(this._pivotGrid, doc, 400, null, { styles: { cellStyle: { font: { family: 'ipaexg' } } } }); // finish document doc.end(); } } // _exportFile(content, fileName) { let fileType = 'txt/csv;charset=utf-8'; if (navigator.msSaveBlob) { // IE navigator.msSaveBlob(new Blob([content], { type: fileType }), fileName); } else { let e = document.createElement('a'); e.setAttribute('href', 'data:' + fileType + ',' + encodeURIComponent(content)); e.setAttribute('download', fileName); e.style.display = 'none'; document.body.appendChild(e); e.click(); document.body.removeChild(e); } } } // ReactDOM.render(<App />, document.getElementById('app')); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>AutoComplete</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div id="app"></div> </body> </html> .wj-pivotgrid { max-height: 400px; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); } body { margin-bottom: 48pt; } import * as wjcCore from '@grapecity/wijmo'; export function getData(cnt) { var today = new Date(), buyers = ['成宮 真紀', '山本 雅治', '加藤 泰江', '川村 匡'], types = ['音楽', 'ビデオ', '本', '家電', 'パソコン', '食品'], data = []; for (var i = 0; i < cnt; i++) { data.push({ date: wjcCore.DateTime.addDays(today, -Math.random() * 365 * 3), buyer: randomItem(buyers), type: randomItem(types), amount: 20 + Math.random() * 1000 }); } return data; } function randomItem(arr) { return arr[Math.floor(Math.random() * arr.length)]; } <template> <div class="container-fluid"> <div class="row"> <div class="col-xs-5"> <wj-pivot-panel :items-source="ng"></wj-pivot-panel> </div> <div class="col-xs-7"> <wj-pivot-grid :items-source="ng" :initialized="initializePivotGrid"></wj-pivot-grid> </div> </div> <p> グリッドをエクスポート: <button id="xlsx" class="btn btn-primary" @click="exportGrid('csv')"> CSV </button> <button id="xlsx" class="btn btn-primary" @click="exportGrid('xlsx')"> XLSX </button> <button id="pdf" class="btn btn-primary" @click="exportGrid('pdf')"> PDF </button> <button id="pdfdoc" class="btn btn-primary" @click="exportGrid('pdfdoc')"> PdfDocument </button> </p> </div> </template> <script> import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import Vue from 'vue'; import '@grapecity/wijmo.vue2.olap'; import * as wjcOlap from '@grapecity/wijmo.olap'; import * as wjcGridXlsx from '@grapecity/wijmo.grid.xlsx'; import * as wjcGridPdf from '@grapecity/wijmo.grid.pdf'; import * as wjcPdf from '@grapecity/wijmo.pdf'; import { CellRange } from '@grapecity/wijmo.grid'; import { getData } from './data' let App = Vue.extend({ name: "app", data: function() { return { ng: new wjcOlap.PivotEngine({ autoGenerateFields: false, fields: [ { binding: 'date', header: '日付' }, { binding: 'buyer', header: '担当者' }, { binding: 'type', header: '分類' }, { binding: 'amount', header: '金額' } ], itemsSource: getData(1000), // raw data valueFields: ['金額'], // summarize amounts rowFields: ['担当者', '分類'], // by buyer and Type showRowTotals: 'Subtotals', showColumnTotals: 'Subtotals', }) }; }, mounted: function() { this.ng.fields.getField('金額').format = 'c0'; this.ng.fields.getField('日付').format = 'yyyy'; }, methods: { initializePivotGrid(pivotGrid) { this.pivotGrid = pivotGrid; }, exportGrid(docType) { if (docType === 'csv') { let grid = this.pivotGrid, rng = new CellRange(0, 0, grid.rows.length - 1, grid.columns.length - 1), csv = grid.getClipString(rng, true, true, true); // save CSV with column and row headers this.exportFile(csv, 'PivotGrid.csv'); } else if (docType === 'xlsx') { // create book with current view let book = wjcGridXlsx.FlexGridXlsxConverter.saveAsync(this.pivotGrid, { includeColumnHeaders: true, includeRowHeaders: true }); book.sheets[0].name = 'PivotGrid'; // save the book book.saveAsync('PivotGrid.xlsx'); } else if (docType === 'pdf') { wjcGridPdf.FlexGridPdfConverter.export(this.pivotGrid, 'PivotGrid.pdf', { embeddedFonts: [{ source: 'https://demo.grapecity.com/wijmo/sample/fonts/ipaexg.ttf', name: 'ipaexg' }], maxPages: 10, scaleMode: wjcGridPdf.ScaleMode.PageWidth, documentOptions: { compress: true, header: { declarative: { text: '\t&[Page] / &[Pages]' } }, footer: { declarative: { text: '\t&[Page] / &[Pages]' } }, info: { author: 'GrapeCity', title: 'PivotGrid' } }, styles: { cellStyle: { font: { family: 'ipaexg' }, backgroundColor: '#ffffff', borderColor: '#c6c6c6' }, altCellStyle: { backgroundColor: '#f9f9f9' }, groupCellStyle: { backgroundColor: '#dddddd' }, headerCellStyle: { backgroundColor: '#eaeaea' } } }); } else if (docType === 'pdfdoc') { // create the document let doc = new wjcPdf.PdfDocument({ compress: true, header: { declarative: { text: '\t&[Page] / &[Pages]' } }, ended: (sender, args) => { wjcPdf.saveBlob(args.blob, 'PivotGridDoc.pdf'); } }); doc.registerFont({ source: 'https://demo.grapecity.com/wijmo/sample/fonts/ipaexg.ttf', name: 'ipaexg' }); doc.setFont(new wjcPdf.PdfFont('ipaexg')); // add some content doc.drawText('これはピボットグリッドコントロールです。'); // add the grid (400pt wide) wjcGridPdf.FlexGridPdfConverter.draw(this.pivotGrid, doc, 400, null, { styles: { cellStyle: { font: { family: 'ipaexg' } } } }); // finish document doc.end(); } }, exportFile(content, fileName) { let fileType = 'txt/csv;charset=utf-8'; if (navigator.msSaveBlob) { // IE navigator.msSaveBlob(new Blob([content], { type: fileType }), fileName); } else { let e = document.createElement('a'); e.setAttribute('href', 'data:' + fileType + ',' + encodeURIComponent(content)); e.setAttribute('download', fileName); e.style.display = 'none'; document.body.appendChild(e); e.click(); document.body.removeChild(e); } } } }); new Vue({ render: h => h(App) }).$mount("#app"); </script> <style> .wj-pivotgrid { max-height: 400px; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); } body { margin-bottom: 48pt; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Grapecity Wijmo OLAP Pivot Grid Export</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app.vue'); </script> </head> <body> <div id="app"> </div> </body> </html> import * as wjcCore from '@grapecity/wijmo'; // export function getData(cnt) { let today = new Date(), buyers = ['成宮 真紀', '山本 雅治', '加藤 泰江', '川村 匡'], types = ['音楽', 'ビデオ', '本', '家電', 'パソコン', '食品'], data = []; // for (let i = 0; i < cnt; i++) { data.push({ date: wjcCore.DateTime.addDays(today, -Math.random() * 365 * 3), buyer: randomItem(buyers), type: randomItem(types), amount: 20 + Math.random() * 1000 }); } // return data; } // function randomItem(arr) { return arr[Math.floor(Math.random() * arr.length)]; }