mqzheng/board-summay-sheet
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix pdf bug

Browse Source
This commit is contained in:
郑茂强 2018-09-13 14:35:36 +08:00
parent cb498be45c
commit 33faab5032
4 changed files with 85 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
package-lock.json generated
View File

@ -805,12 +805,30 @@
"commander": "*" "commander": "*"
} }
}, },
"@types/html2canvas": {
"version": "0.0.33",
"resolved": "http://r.cnpmjs.org/@types/html2canvas/download/@types/html2canvas-0.0.33.tgz",
"integrity": "sha1-5AdvDqZk081uFGDILkixd3dAUv4=",
"requires": {
"@types/jquery": "*"
}
},
"@types/jest": { "@types/jest": {
"version": "23.3.2", "version": "23.3.2",
"resolved": "http://r.cnpmjs.org/@types/jest/download/@types/jest-23.3.2.tgz", "resolved": "http://r.cnpmjs.org/@types/jest/download/@types/jest-23.3.2.tgz",
"integrity": "sha1-B7kPat911Cw0IwwCaiUp5Wwknbs=", "integrity": "sha1-B7kPat911Cw0IwwCaiUp5Wwknbs=",
"dev": true "dev": true
}, },
"@types/jquery": {
"version": "3.3.6",
"resolved": "http://r.cnpmjs.org/@types/jquery/download/@types/jquery-3.3.6.tgz",
"integrity": "sha1-WTLq2SYwfKIeWzaAglf3ySawZWU="
},
"@types/jspdf": {
"version": "1.1.31",
"resolved": "http://r.cnpmjs.org/@types/jspdf/download/@types/jspdf-1.1.31.tgz",
"integrity": "sha1-iN6AGP/rjyZPl1dPKxxVuMVAUyY="
},
"@types/node": { "@types/node": {
"version": "10.9.4", "version": "10.9.4",
"resolved": "http://r.cnpmjs.org/@types/node/download/@types/node-10.9.4.tgz", "resolved": "http://r.cnpmjs.org/@types/node/download/@types/node-10.9.4.tgz",
@ -5708,7 +5726,8 @@
"ansi-regex": { "ansi-regex": {
"version": "2.1.1", "version": "2.1.1",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"aproba": { "aproba": {
"version": "1.2.0", "version": "1.2.0",
@ -5729,12 +5748,14 @@
"balanced-match": { "balanced-match": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"brace-expansion": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"balanced-match": "^1.0.0", "balanced-match": "^1.0.0",
"concat-map": "0.0.1" "concat-map": "0.0.1"
@ -5749,17 +5770,20 @@
"code-point-at": { "code-point-at": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"console-control-strings": { "console-control-strings": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.2", "version": "1.0.2",
@ -5876,7 +5900,8 @@
"inherits": { "inherits": {
"version": "2.0.3", "version": "2.0.3",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.5",
@ -5888,6 +5913,7 @@
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"number-is-nan": "^1.0.0" "number-is-nan": "^1.0.0"
} }
@ -5902,6 +5928,7 @@
"version": "3.0.4", "version": "3.0.4",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"brace-expansion": "^1.1.7" "brace-expansion": "^1.1.7"
} }
@ -5909,12 +5936,14 @@
"minimist": { "minimist": {
"version": "0.0.8", "version": "0.0.8",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"minipass": { "minipass": {
"version": "2.2.4", "version": "2.2.4",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"safe-buffer": "^5.1.1", "safe-buffer": "^5.1.1",
"yallist": "^3.0.0" "yallist": "^3.0.0"
@ -5933,6 +5962,7 @@
"version": "0.5.1", "version": "0.5.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "0.0.8"
} }
@ -6013,7 +6043,8 @@
"number-is-nan": { "number-is-nan": {
"version": "1.0.1", "version": "1.0.1",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"object-assign": { "object-assign": {
"version": "4.1.1", "version": "4.1.1",
@ -6025,6 +6056,7 @@
"version": "1.4.0", "version": "1.4.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"wrappy": "1" "wrappy": "1"
} }
@ -6110,7 +6142,8 @@
"safe-buffer": { "safe-buffer": {
"version": "5.1.1", "version": "5.1.1",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"safer-buffer": { "safer-buffer": {
"version": "2.1.2", "version": "2.1.2",
@ -6146,6 +6179,7 @@
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"code-point-at": "^1.0.0", "code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0", "is-fullwidth-code-point": "^1.0.0",
@ -6165,6 +6199,7 @@
"version": "3.0.1", "version": "3.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"ansi-regex": "^2.0.0" "ansi-regex": "^2.0.0"
} }
@ -6208,12 +6243,14 @@
"wrappy": { "wrappy": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"yallist": { "yallist": {
"version": "3.0.2", "version": "3.0.2",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
} }
} }
}, },

2
package.json
View File

@ -9,6 +9,8 @@
"test:unit": "vue-cli-service test:unit" "test:unit": "vue-cli-service test:unit"
}, },
"dependencies": { "dependencies": {
"@types/html2canvas": "0.0.33",
"@types/jspdf": "^1.1.31",
"abab": "^2.0.0", "abab": "^2.0.0",
"html2canvas": "^1.0.0-alpha.12", "html2canvas": "^1.0.0-alpha.12",
"jspdf": "^1.4.1", "jspdf": "^1.4.1",

45
src/components/pdf.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<div class='pdf'> <div class='pdf'>
<button @click="createPdf">print PDF</button> <button @click="createPdf">print PDF</button>
<button @click="createExcel">print EXCEL</button> <button @click="createExcel">print EXCEL</button>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -12,39 +12,40 @@ import html2canvas from 'html2canvas';
export default Vue.extend({ export default Vue.extend({
data() { data() {
return { return {
canvasUrl: '', canvasUrl: '' as string,
}; };
}, },
methods: { methods: {
createPdf() { createPdf() {
html2canvas(document.getElementById('order-details')).then( const elements: any = document.getElementById('order-details');
(canvas: any) => { html2canvas(elements, {
canvas.setAttribute('id', 'canvas'); scale: 2,
document.body.appendChild(canvas); }).then((canvas: any) => {
const canvasElement: any = document.getElementById('canvas'); canvas.setAttribute('id', 'canvas');
this.canvasUrl = canvasElement.toDataURL(); document.body.appendChild(canvas);
const doc = new jsPDF({ const canvasElement: any = document.getElementById('canvas');
unit: 'cm', this.canvasUrl = canvasElement.toDataURL();
}); const doc = new jsPDF({
const height = canvasElement.height / window.outerHeight; unit: 'cm',
doc.addImage(this.canvasUrl, 0.5, 0.5, 20, 29 * height); });
doc.save('test' + '.pdf'); const canvasHeight = canvasElement.style.height.replace('px', '');
}, const height = canvasHeight / window.outerHeight;
); doc.addImage(this.canvasUrl, 'JPEG', 0.5, 0.5, 20, 29 * height);
doc.save('test' + '.pdf');
});
const canvasElementToRemove: any = document.getElementById('canvas');
canvasElementToRemove.remove();
}, },
createExcel() { createExcel() {
const tabs = document.getElementsByTagName('table'); const tabs = document.getElementsByTagName('table');
let allElementText: any; let allElementText: any;
for (const tab of tabs) { for (const tab of tabs) {
let tabText: string = '<table border="2px"><tr>'; let tabText: string = '<table border="2px"><tr>';
for (const row of tab.rows) { for (const row of tab.rows) {
tabText += row.innerHTML + '</tr>'; tabText += row.innerHTML + '</tr>';
} }
allElementText += tabText + '</table>'; allElementText += tabText + '</table>';
} }
window.open( window.open(
'data:application/vnd.ms-excel,' + encodeURIComponent(allElementText), 'data:application/vnd.ms-excel,' + encodeURIComponent(allElementText),
); );

19
src/components/table.vue
View File

@ -44,14 +44,15 @@
<td colspan="2">{{orderDetails.addOn}}</td> <td colspan="2">{{orderDetails.addOn}}</td>
</tr> </tr>
<tr class='table-header-one'>
<th colspan="3">材料:{{board.matierial}}</th>
<th colspan="7">颜色:{{board.color}}</th>
<th colspan="4">共{{board.boardInfos.length}}条记录</th>
</tr>
<th v-for="(header,index) in tableTitle" :key="index">{{header}}</th>
<tbody> <tbody>
<tr class='table-header-one'>
<th colspan="3">材料:{{board.matierial}}</th>
<th colspan="7">颜色:{{board.color}}</th>
<th colspan="4">共{{board.boardInfos.length}}条记录</th>
</tr>
<th v-for="(header,index) in tableTitle" :key="index+header">{{header}}</th>
<tr v-for="(info,index) in board.boardInfos" :key="index"> <tr v-for="(info,index) in board.boardInfos" :key="index">
<td v-for="(each,index) in info " :key="index">{{each}}</td> <td v-for="(each,index) in info " :key="index">{{each}}</td>
</tr> </tr>
@ -191,6 +192,10 @@ table {
border: 0px; border: 0px;
} }
} }
td {
width: 7.1%;
text-align: center;
}
</style> </style>