From d68b036a3b3c67273b8effa3c9925ef3869a91ba Mon Sep 17 00:00:00 2001
From: haoxuan <haoxuan>
Date: 星期三, 07 二月 2024 13:56:50 +0800
Subject: [PATCH] wms项目 wms系统参数设置的页面开发+路由+是否显示表头配置
---
src/views/overview/previewExcel.vue | 41 +++++++++++++++++++++++++++--------------
1 files changed, 27 insertions(+), 14 deletions(-)
diff --git a/src/views/overview/previewExcel.vue b/src/views/overview/previewExcel.vue
index 07acb3b..39e9dc0 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"/>
@@ -19,21 +25,16 @@
},
data() {
return {
- excel: '',//excel鏂囨。鍦板潃
- cutWidth:200,
+ excel:'',
+ cutAfterWidth:0,
+ // croppedImage: null, // 鍥剧墖
};
},
computed: {
},
created() {
- 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
- }
- }
+ this.excel=this.$route.query.url
+ this.cutAfterWidth=this.$route.query.cutAfterWidth
},
mounted() {
},
@@ -42,8 +43,8 @@
methods: {
rendered(){
console.log("娓叉煋瀹屾垚")
- if(this.$route.params.baseOperationType!=undefined){
- this.excel=this.$route.params.url
+ if(this.$route.query.url){
+ this.excel=this.$route.query.url
this.cropAndDownload()
}
},
@@ -52,14 +53,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 +88,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