出入库明细单打印，调整canvas重绘宽度比例

zuozhengqing

2023-12-01 509016c3a2ec5a50fe140c136ed68e13e63282a2

 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
      // 在新的Canvas上绘制裁剪后的图像
      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, // 新Canvas中绘制的左侧位置
        0, // 新Canvas中绘制的上侧位置
@@ -85,9 +91,19 @@
      const scaledHeight = canvas.height * scale;
      // 将canvas元素转换为png，插入到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,