wms项目 wms系统参数设置的页面开发+路由+是否显示表头配置

haoxuan

2024-02-07 d68b036a3b3c67273b8effa3c9925ef3869a91ba

 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
      // 在新的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 +88,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,