VueJS 여러개의 grid 를 하나의 pdf 로 export
추천0 비추천 0
페이지 정보
작성자 한효창
작성일 2024-03-28 17:11 조회 23회
댓글 0건
제품 버전 : wijmo.all : 5.20211.794, wijmo.input : 5.20231.888, wijmo.vue2.all : 5.20211.794
본문
관련링크
안녕하세요? 한효창 매니저입니다.
https://dev.mescius.co.kr/bbs/board.php?bo_table=wijmo_qna&wr_id=3524
게시글 추가 문의 드립니다.
댓글로 작성하였으며 추가로 게시글 남깁니다.
위의 게시글에서 언급한 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>
-----------------------------
추가적으로 저희쪽에서 발생하는 에러 상세 전달드립니다.
Uncaught ** Assertion failed in Wijmo: Invalid argument: "value". Error
at _asPdfFont (https://127.0.0.1:5173/node_modules/.vite/deps/@grapecity_wijmo__pdf.js?v=af916bbc:14459:3)
at PdfPageArea2.measureText (https://127.0.0.1:5173/node_modules/.vite/deps/@grapecity_wijmo__pdf.js?v=af916bbc:14820:21)
at _CellRenderer2._calculateTextRect (https://127.0.0.1:5173/node_modules/.vite/deps/@grapecity_wijmo__grid__pdf.js?v=207b8a42:775:31)
at _CellRenderer2.renderCell (https://127.0.0.1:5173/node_modules/.vite/deps/@grapecity_wijmo__grid__pdf.js?v=207b8a42:632:44)
at RowRange2.forEach (https://127.0.0.1:5173/node_modules/.vite/deps/@grapecity_wijmo__grid__pdf.js?v=207b8a42:988:25)
at PanelSectionRenderer2.render (https://127.0.0.1:5173/node_modules/.vite/deps/@grapecity_wijmo__grid__pdf.js?v=207b8a42:539:9)
at FlexGridRenderer2.render (https://127.0.0.1:5173/node_modules/.vite/deps/@grapecity_wijmo__grid__pdf.js?v=207b8a42:376:24)
at _FlexGridPdfCoreConverter2._drawInternal (https://127.0.0.1:5173/node_modules/.vite/deps/@grapecity_wijmo__grid__pdf.js?v=207b8a42:238:9)
logError @ chunk-LR6Z6VXI.js?v=5d7632bc:1926
handleError @ chunk-LR6Z6VXI.js?v=5d7632bc:1913
callWithErrorHandling @ chunk-LR6Z6VXI.js?v=5d7632bc:1865
callWithAsyncErrorHandling @ chunk-LR6Z6VXI.js?v=5d7632bc:1871
invoker @ chunk-LR6Z6VXI.js?v=5d7632bc:10527
------------------------------------------------------
추가로 아래 버전으로 변경 후 테스트를 진행 해 보았으나 동일한 오류가 발생합니다.
"@grapecity/wijmo.all": "5.20232.939",
"@grapecity/wijmo.input": "5.20232.939",
"@grapecity/wijmo.vue2.all": "5.20232.939",
댓글목록
등록된 댓글이 없습니다.
1 답변
