出入库明细单打印，调整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"/>
@@ -21,6 +27,8 @@
    return {
      excel: '',//excel文档地址
      cutAfterWidth:this.$route.params.cutAfterWidth,//裁剪后要减去的宽
      // cutAfterWidth:0,
      croppedImage: null, // 图片
    };
  },
  computed: {
@@ -55,7 +63,9 @@
        canvas,
        50, // 开始裁剪的左侧位置
        20, // 开始裁剪的上侧位置
        croppedCanvas.width-this.cutAfterWidth, // 裁剪后的宽度
        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中绘制的上侧位置
@@ -81,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,