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

2
package.json
View File

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

21
src/components/pdf.vue
View File

@ -12,13 +12,15 @@ import html2canvas from 'html2canvas';
export default Vue.extend({
data() {
return {
canvasUrl: '',
canvasUrl: '' as string,
};
},
methods: {
createPdf() {
html2canvas(document.getElementById('order-details')).then(
(canvas: any) => {
const elements: any = document.getElementById('order-details');
html2canvas(elements, {
scale: 2,
}).then((canvas: any) => {
canvas.setAttribute('id', 'canvas');
document.body.appendChild(canvas);
const canvasElement: any = document.getElementById('canvas');
@ -26,25 +28,24 @@ export default Vue.extend({
const doc = new jsPDF({
unit: 'cm',
});
const height = canvasElement.height / window.outerHeight;
doc.addImage(this.canvasUrl, 0.5, 0.5, 20, 29 * height);
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() {
const tabs = document.getElementsByTagName('table');
let allElementText: any;
for (const tab of tabs) {
let tabText: string = '<table border="2px"><tr>';
for (const row of tab.rows) {
tabText += row.innerHTML + '</tr>';
}
allElementText += tabText + '</table>';
}
window.open(
'data:application/vnd.ms-excel,' + encodeURIComponent(allElementText),
);

9
src/components/table.vue
View File

@ -44,14 +44,15 @@
<td colspan="2">{{orderDetails.addOn}}</td>
</tr>
<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}}</th>
<th v-for="(header,index) in tableTitle" :key="index+header">{{header}}</th>
<tbody>
<tr v-for="(info,index) in board.boardInfos" :key="index">
<td v-for="(each,index) in info " :key="index">{{each}}</td>
</tr>
@ -191,6 +192,10 @@ table {
border: 0px;
}
}
td {
width: 7.1%;
text-align: center;
}
</style>