안녕하세요. 한효창 매니저입니다.
위의 게시글에서 언급한 font 관련 내용은 저희가 구현한 소스가 아니며, 별도로 사용중인 font가 없습니다.
저희 소스로 일부 첨부하였습니다. 해당 소스 적용 후 다운로드 시 유사 오류 발생합니다.
그리고 위즈모 버전 정보를 알려 드리겠습니다.
아래 버전으로 package.json 등록 시 발생합니다.
"@grapecity/wijmo.all": "5.20211.794",
"@grapecity/wijmo.input": "^5.20231.888",
"@grapecity/wijmo.vue2.all": "5.20211.794",
확인 후 회신 부탁드립니다.
감사합니다.
한효창드림
<template>
<div class="container-fluid">
<!-- Export button -->
<button class="btn btn-default" @click="exportPDF">Export</button>
<!-- FlexGrid -->
<wj-flex-grid class="grid" selectionMode="ListBox" headersVisibility="All"
:itemsSource="data" :initialized="initializeGrid">
</wj-flex-grid>
</div>
</wj-flex-grid>
<wj-flex-grid class="grid" selectionMode="ListBox" headersVisibility="All"
:itemsSource="dataTwo" :initialized="initializeGridTwo">
</wj-flex-grid>
</div>
</wj-flex-grid>
</div>
</template>
<script>
import * as wjGrid from '@grapecity/wijmo.grid';
import dayjs from "dayjs";
//pdf 관련 import
import * as wijmo from '@grapecity/wijmo';
import * as pdf from '@grapecity/wijmo.pdf';
import * as gridPdf from '@grapecity/wijmo.grid.pdf';
import { getData,getDataTwo } from './data';
export default {
name: 'HelloWorld',
components: {
wjGrid, wijmo, pdf, gridPdf
},
data: function () {
return {
data: getData(10),
dataTwo: getDataTwo(10),
flexGrid:null,
flexGridTwo:null,
};
},
methods: {
initializeGrid(ctl) {
this.flexGrid = ctl;
},
initializeGridTwo(ctl) {
this.flexGridTwo = ctl;
},
exportPDF() {
const doc = new pdf.PdfDocument({
compress: true,
version: pdf.PdfVersion.v1_5,
header: { declarative: { text: '\t&[Page]\\&[Pages]',
brush: '#bfc1c2'
}
},
lineGap: 2,
pageSettings: {
margins: {
left: 12,
right: 12,
top: 12,
bottom: 12
}
},
ended: (sender, args) => pdf.saveBlob(args.blob, 'LPG Stock Report_' + dayjs().format('YYYY-MM-DD') + '.pdf')
// ended: function (sender, args) {
// pdf.saveBlob(args.blob, 'LPG Stock Report_' + dayjs().format('YYYY-MM-DD') + '.pdf');
// }
});
// console.log("@==> doc: ", doc);
const settings = {
styles: {
cellStyle: { backgroundColor: '#ffffff', borderColor: '#c6c6c6', font: {size: 8 } },
altCellStyle: { backgroundColor: '#f9f9f9', font: {size: 8 } },
groupCellStyle: {font: { weight: "bold", size: 8 }, backgroundColor: '#dddddd' },
headerCellStyle: { backgroundColor: '#eaeaea', font: {size: 8 } }
}
};
gridPdf.FlexGridPdfConverter.draw(this.flexGrid, doc, 600, 600, {maxPages: 10, settings});
doc.moveDown();
gridPdf.FlexGridPdfConverter.draw(this.flexGridTwo, doc, 600, 600, {maxPages: 10, settings});
doc.end();
}
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
label {
display: block !important;
}
.wj-flexgrid {
margin: 10px 0;
}
/* highlight the main column in the group */
.wj-flexgrid .wj-cells .wj-cell.main-column {
background: #e3f4ff;
}
/* some conditional formatting */
.big-val {
font-weight: bold;
color: darkgreen;
}
.small-val {
font-style: italic;
color: rgb(202, 0, 0);
}
/* some animation when collapsing/expanding the groups */
.animated .wj-flexgrid .wj-colheaders .wj-header.wj-cell.wj-colgroup {
transition: all 0.2s;
}
</style>
작성일 2024-03-22 09:36 조회 52회
댓글 0건
2 답변
