网页打印 纸张大小配置为 根据 模板设置的默认尺寸大小

chenhaozhe

2025-12-15 b5b941ea3bf47ed36bf21ca072eb792fc3386c12

网页打印 纸张大小配置为 根据 模板设置的默认尺寸大小

 .env.staging

@@ -9,7 +9,7 @@
ENV = 'staging'

# 智云迈思L-MOM管理系统/测试环境
VUE_APP_BASE_API = 'http://192.168.0.51:81/API/'
VUE_APP_BASE_API = 'http://localhost:81/API/'

# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true

 src/views/component/printList/barcode.vue

@@ -1,13 +1,15 @@
<template>
  <div>
    <button @click="getTemp">打印</button>
    <div id="report_holder"> </div>
  <div style="padding: 10px">
    <el-button type="primary" @click="getTemp">打印</el-button>
    <!-- <el-button type="primary" @click="getTempMeta">获取元数据</el-button> -->
    <div id="report_holder"></div>
  </div>
</template>

<script>
import PrintJS from 'print-js'
import PrintJS from "print-js";
import axios from "axios";
import { watch } from "vue";
export default {
  name: "HBarPlanPrintWeb",
  data() {
@@ -16,7 +18,7 @@
      handleMessage: this.$route.query,
      pageSize: {
        width: 0,
        height: 0
        height: 0,
      },
      reportViewer: null,
      baseUrl: process.env.VUE_APP_BASE_API,
@@ -24,17 +26,27 @@
        recordset: [],
      },
      grfPath: "",

    }
    };
  },
  async mounted() {
    // 获取 打印的数据
    await this.getPrintData()

    await this.getPrintData();
    // 获取打印纸张大小
    rubylong.grhtml5.barcodeURL = this.baseUrl + "/Utility/Barcode.ashx";
    this.reportViewer = rubylong.grhtml5.insertReportViewer("report_holder", this.grfPath,  this.json_data.recordset,
    this.reportViewer = rubylong.grhtml5.insertReportViewer(
      "report_holder",
      this.grfPath,
      this.json_data
    );
    this.reportViewer.start();
  },
  watch: {
    // 监听reportViewer是否已经构建完成，构建完成后 获取grf文件的打印页面大小
    'reportViewer.generated'(newVal, oldVal) {
      if(newVal == true) {
        this.getTempMeta()
      }
    },
  },
  methods: {
    getUrlVars_JSON() {
@@ -45,6 +57,7 @@
      return datajson;
    },
    async getPrintData() {
      // 在大批量打印的时候 url长度可能超get允许的长度 后端需按需求 改成POST请求
      let OpenTmp = decodeURIComponent(this.$route.query.OpenTmp);
      let sql = "";
      if (this.$route.query.Type == "Kf_SellOutBillList") {
@@ -78,51 +91,59 @@
              GROUP BY CEILING(CAST(t.row_num AS FLOAT) / 2)
              ORDER BY orderid;`;
      }
      try{
        let res =  await axios.get(this.baseURL + "/CommonModel/searchMethod", {
      try {
        let res = await axios.get(this.baseUrl + "/CommonModel/searchMethod", {
          params: {
            sql: sql,
            user: sessionStorage["HUserName"],
            ModRightNameCheck: "",
            // , "HSubID": data[i].hsubid
          },
        })
        });
        // 将 渲染数据 和 模板加载到本地
        let result = res.data;
          this.json_data.recordset = result.data;
          this.grfPath = "./static/grf/" + OpenTmp + ".grf"
          console.log(this.json_data);
      }catch(err) {
        this.json_data.recordset = result.data;
        this.grfPath = "./static/grf/" + OpenTmp + ".grf";
        console.log(this.json_data);
      } catch (err) {
        this.$modal.msgError("接口请求失败!" + err);
      }

    },
    getTempMeta() {
      let grfMeta = JSON.parse(this.reportViewer.reportText);
      console.log("grfMeta", grfMeta)
      this.pageSize.width = grfMeta.Printer.Width * 10 + "mm";
      this.pageSize.height = grfMeta.Printer.Height * 10 + "mm";
      console.log("pageSize: ",this.pageSize)
    },
    getTemp() {
      // 对每个要打印的对象添加分页
      let docs = document.querySelectorAll('[_grrecno]')
      this.pageSize.width = docs[0].offsetWidth
      this.pageSize.height = docs[0].offsetHeight
      let docs = document.querySelectorAll("[_grrecno]");
      // this.pageSize.width = docs[0].offsetWidth;
      // this.pageSize.height = docs[0].offsetHeight;
      docs.forEach((elem, index) => {
        elem.classList.add('printable')
      })
      let styles = document.querySelectorAll('[id^="_gridcss"]')
      this.styleList.push(...styles)
        elem.classList.add("printable");
      });
      let styles = document.querySelectorAll('[id^="_gridcss"]');
      this.styleList.push(...styles);

      this.execPrint()
      this.execPrint();
    },
    execPrint() {
      PrintJS({
        printable: 'report_holder',
        printable: "report_holder",
        scanStyles: false,
        type: 'html',
        style: this.styleList[0].innerText + ` @media print {
        type: "html",
        style:
          this.styleList[0].innerText +
          ` @media print {
            .printable {
              page-break-inside: avoid;
              page-break-after: always;
            }

            @page {
              size: ${this.pageSize.width + 1}px ${this.pageSize.height + 1}px;
              size: ${this.pageSize.width} ${this.pageSize.height};
              margin: 0;
              padding: 0;
            }
@@ -132,12 +153,10 @@
              padding: 0;
            }
        `,
      })


    }
  }
}
      });
    },
  },
};
</script>

<style></style>
<style></style>