From 509016c3a2ec5a50fe140c136ed68e13e63282a2 Mon Sep 17 00:00:00 2001
From: zuozhengqing <a13193816592@163.com>
Date: 星期五, 01 十二月 2023 10:16:50 +0800
Subject: [PATCH] 出入库明细单打印，调整canvas重绘宽度比例
---
src/views/overview/previewExcel.vue | 32 ++++++++++++++++++++++++--------
1 files changed, 24 insertions(+), 8 deletions(-)
diff --git a/src/views/overview/previewExcel.vue b/src/views/overview/previewExcel.vue
index 07acb3b..4590fe9 100644
--- a/src/views/overview/previewExcel.vue
+++ b/src/views/overview/previewExcel.vue
@@ -1,5 +1,11 @@
<template>
<div>
+
+ <button @click="cropAndDownload">鎴彇鍥剧墖</button>
+ <!-- 鏄剧ず瑁佸壀鍚庣殑鍥剧墖 -->
+ <div style="width: 800px;">
+ <img style="width: 100%;" id="export-pdf" v-if="croppedImage" :src="croppedImage" alt="Cropped Image" />
+ </div>
<div ref="elementToCrop" >
<div style="width: 100%;">
<vue-office-excel :minRowLength="0" :src="excel" @rendered="rendered"/>
@@ -20,19 +26,17 @@
data() {
return {
excel: '',//excel鏂囨。鍦板潃
- cutWidth:200,
+ cutAfterWidth:this.$route.params.cutAfterWidth,//瑁佸壀鍚庤鍑忓幓鐨勫
+ // cutAfterWidth:0,
+ croppedImage: null, // 鍥剧墖
};
},
computed: {
},
created() {
+ console.log(this.$route.params.baseOperationType,"鐪嬬湅")
if(this.$route.params.baseOperationType!=undefined){
this.excel=this.$route.params.url
- if(this.this.$route.params.baseOperationType===1){
- this.cutWidth=200
- }else if(this.this.$route.params.baseOperationType===2){
- this.cutWidth=315
- }
}
},
mounted() {
@@ -52,14 +56,16 @@
const canvas = await html2canvas(elementToCrop);
const croppedCanvas = document.createElement("canvas");
const croppedContext = croppedCanvas.getContext("2d");
- croppedCanvas.width = canvas.width - this.cutWidth; // 鍘绘帀宸﹀彸鍚�100px
+ croppedCanvas.width = canvas.width ; //瑁佸壀鍓�
croppedCanvas.height = canvas.height - 100; // 鍘绘帀涓婁笅鍚�100px
// 鍦ㄦ柊鐨凜anvas涓婄粯鍒惰鍓悗鐨勫浘鍍�
croppedContext.drawImage(
canvas,
50, // 寮�濮嬭鍓殑宸︿晶浣嶇疆
20, // 寮�濮嬭鍓殑涓婁晶浣嶇疆
- croppedCanvas.width, // 瑁佸壀鍚庣殑瀹藉害
+ croppedCanvas.width=croppedCanvas.width/100*this.cutAfterWidth,
+ // croppedCanvas.width-=croppedCanvas.width/100*46.7, // 瑁佸壀鍚庣殑瀹藉害 鍏ュ簱鍗曚繚鐣欏師鍥惧搴�53.3%
+ // croppedCanvas.width-=croppedCanvas.width/100*49.2, // 瑁佸壀鍚庣殑瀹藉害 鍑哄簱鍗曚繚鐣欏師鍥惧搴�50.8%
croppedCanvas.height-300, // 瑁佸壀鍚庣殑楂樺害
0, // 鏂癈anvas涓粯鍒剁殑宸︿晶浣嶇疆
0, // 鏂癈anvas涓粯鍒剁殑涓婁晶浣嶇疆
@@ -85,9 +91,19 @@
const scaledHeight = canvas.height * scale;
// 灏哻anvas鍏冪礌杞崲涓簆ng锛屾彃鍏ュ埌PDF鏂囨。涓�
pdf.addImage(croppedImage, "PNG",0,0,scaledWidth,scaledHeight);
+
+ // 锛堝彲閫夛級浣犱篃鍙互灏嗚鍓悗鐨勫浘鐗囦繚瀛樹负鏂囦欢
+ // this.saveCroppedImageToFile(croppedImage);
// 淇濆瓨PDF鏂囨。
pdf.save("export.pdf");
},
+ // 锛堝彲閫夛級淇濆瓨瑁佸壀鍚庣殑鍥剧墖涓烘枃浠�
+ saveCroppedImageToFile(dataUrl) {
+ const link = document.createElement("a");
+ link.href = dataUrl;
+ link.download = "cropped_image.png";
+ link.click();
+ },
},
components: {
VueOfficeExcel,
--
Gitblit v1.8.0