前端 - downPdf是导出图片的方法，俩个页面这个页面导不出，搞不懂为啥？

Question

<template>
  <div class="fillcontain">
    <div >
      <el-form :inline="true" ref="add_data" :model="search_data">
        <el-button @click="downPdf">点击</el-button>
        <el-form-item label="地址：">
          <el-input
            v-model="search_data.address"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态：">
          <el-select v-model="search_data.status">
            <el-option
              v-for="(formteam, index) in format_status_list"
              :key="index"
              :label="formteam"
              :value="formteam"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="租户：">
          <el-input
            v-model="search_data.userlist_name"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item class="btnSearch">
          <el-button
            type="primary "
            size="small"
            icon="el-icon-search"
            @click="handleSearch()"
            >筛选</el-button
          >
          <el-button
            type="primary "
            size="small"
            icon="el-icon-search"
            @click="reset()"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="table_container">
      <el-table
        :data="tableData"
        style="width: 100%"
        max-height="450"
        border
        :row-class-name="tableRowClassName"
      >
        <el-table-column type="index" label="序号" align="center">
        </el-table-column>
        <el-table-column prop="address" label="地址" align="center">
        </el-table-column>
        <el-table-column prop="price" label="价格" align="center">
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center">
        </el-table-column>
        <el-table-column prop="userlist_name" label="租户" align="center">
        </el-table-column>
        <el-table-column label="操作" prop="operation" align="center">
          <template slot-scope="scope">
            <el-button
              size="small"
              type="primary"
              v-if="scope.row.status == '已出租' ? false : true"
              @click="confirm(scope.row)"
              >确认租赁</el-button
            >
            <el-button
              size="small"
              type="primary"
              @click="handleView(scope.$index, scope.row)"
              >查看详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <HouseViewDialog
      :dialog3="dialog3"
      @update="getProfile"
      :formData="Data"
    ></HouseViewDialog>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="90%">
      <div class="contract" id="article-content">
    <el-button @click="downPdf"></el-button>
        <h1>合同</h1>
        <h3 style="font-weight:600,line-height:40px">订立合同双方</h3>
        <p>出租方：{{ form.username }}，以下简称甲方</p>
        <p>承租方：{{ name }}，以下简称乙方</p>
        <p>
          根据《中华人民共和国》及有关规定，为明确甲、乙双方的权利义务关系，经双方协商一致，签订本合同。
        </p>
        <p>第一条 甲方将自有的坐落在{{ address }}出租给乙方使用。</p>
        <p>第二条　乙方有下列情形之一的，甲方可以终止合同，收回房屋：</p
        <div class="datastyle">
          <span>出租方：{{ form.username }}</span
          ><span>日期:{{ date }}</span>
        </div>
        <P>承租方:</P>
        <vue-esign
          ref="esign"
          :width="300"
          :height="100"
          :isCrop="isCrop"
          style="border: 1px dashed"
          :lineWidth="lineWidth"
          :lineColor="lineColor"
          :bgColor.sync="bgColor"
        />
        <p>请在此签名</p>
      </div>
      <button @click="handleReset">清空画板</button>
      <span slot="footer" class="dialog-footer">
        <el-button @click="canceldia()">取 消</el-button>
        <el-button type="primary" @click="exportContract"
          >导出合同</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { gethouse, getOwnerName } from "../api/house.js";
import HouseViewDialog from "../components/HouseViewDialog";
import html2canvas from "html2canvas";
import jsPDF from "jspdf";
export default {
  name: "personalhouseList",
  components: {
    HouseViewDialog,
  },
  data() {
    return {
      lineWidth: 6,
      lineColor: "#000000",
      bgColor: "",
      resultImg: "",
      isCrop: false,
      //筛选条件数据
      search_data: {
        address: "",
        status: "",
        userlist_name: "",
      },
      Data: {
        dialogVisible: false,
        detail: "",
      },
      dialogVisible: false,
      dialog3: {
        show: false,
        title: "",
      },
      tableData: [],
      allTableData: [],
      format_status_list: ["未出租", "已出租"],
      form: { username: "" },
      houseName: "",
      username: "",
      price: "",
      canvas: "",
      ctx: null,
      name: "",
      address: "",
      date: "",
    };
  },
  created() {
    //this.initPage()
    this.handleSearch();
  },
  methods: {
    handleReset() {
      this.$refs.esign.reset();
    },
    handleGenerate() {
      this.$refs.esign
        .generate()
        .then((res) => {
            this.downPdf()
        })
        .catch((err) => {
          this.$message.warning("请先签字后导出合同"); // 画布没有签字时会执行这里 'Not Signned'
        });
    },
    tableRowClassName({ row, rowIndex }) {
      if (row["status"] == "未出租") {
        return "warning-row";
      }
    },

    exportContract(){
        this.handleGenerate()
    },
    downPdf() {
      document.documentElement.scrollTop = 0;
      let canvas = document.createElement("canvas"); // 生成canvas上下文
      let context = canvas.getContext("2d");
      let _articleHtml = document.getElementById("article-content");
      let _w = _articleHtml.clientWidth; //获取需要导出pdf区域的宽度和高度
      let _h = _articleHtml.clientHeight;
      let scale = 3;
      if (_w > _h) {
        _h = _w;
      }
      canvas.width = _w * scale;
      canvas.height = _h * scale;
      context.scale(scale, scale);
      let opts = {
        scale: 1,
        width: _w, //dom 原始宽度
        height: _h,
        canvas: canvas,
        useCORS: true, //允许canvas画布内可以跨域请求外部链接图片, 允许跨域请求。
      };
      // 以上部分都是为了强化清晰度的，放大canvas画布
      html2canvas(_articleHtml, opts).then((canvas) => {
        this.createPdfAll(canvas, scale);
      });
    },
    createPdfAll(canvas, scale) {
      let contentWidth = canvas.width / scale;
      let contentHeight = canvas.height / scale;
      let pdf = new jsPDF("", "pt", [contentWidth, contentHeight]); //自定义宽高
      let pageData = canvas.toDataURL("image/jpeg", 1.0); //转换图片为dataURL
      pdf.addImage(pageData, "JPEG", 0, 0, contentWidth, contentHeight); //添加图像到页面
      pdf.save(`合同.pdf`);
    },
    confirm(data) {
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      this.date = year + "年" + month + "月" + day + "日";
      getOwnerName({ userid: data.ownerid }).then((res) => {
        this.address = data.address;
        this.name = this.$store.getters.user;
        this.form.username = res.data[0].name;
        this.dialogVisible = true;
      });
    },

    handleSearch() {
      console.log(this.search_data);
      gethouse(this.search_data).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data;
          console.log(this.tableData);
        } else {
          this.$message({
            message: "获取房屋信息列表失败",
            type: "warning",
          });
        }
      });
    },
    canceldia() {
      this.dialogVisible = false;
      this.handleReset();
    },
    reset() {
      this.search_data = {
        address: "",
        status: "",
        userlist_name: "",
      };
      this.handleSearch();
    },
    handleView(index, row) {
      this.Data = JSON.parse(JSON.stringify(row));
      this.dialog3 = {
        show: true,
        title: "房屋详情",
      };
    },

    handleCurrentChange(page) {
      // 当前页
      let sortnum = this.paginations.page_size * (page - 1);
      let table = this.allTableData.filter((item, index) => {
        return index >= sortnum;
      });
      // 设置默认分页数据
      this.tableData = table.filter((item, index) => {
        return index < this.paginations.page_size;
      });
    },
    handleSizeChange(page_size) {
      // 切换size
      this.paginations.page_index = 1;
      this.paginations.page_size = page_size;
      this.tableData = this.allTableData.filter((item, index) => {
        return index < page_size;
      });
    },
    setPaginations() {
      // 总页数
      this.paginations.total = this.allTableData.length;
      this.paginations.page_index = 1;
      this.paginations.page_size = 5;
      // 设置默认分页数据
      this.tableData = this.allTableData.filter((item, index) => {
        return index < this.paginations.page_size;
      });
    },
  },
};
</script>

<style scoed>
.fillcontain {
  width: 100%;
  height: 100%;
  padding: 16px;
  box-sizing: border-box;
}
.btnRight {
  float: right;
}
.pagination {
  text-align: right;
  margin-top: 10px;
}
.contract h1 {
  font-size: 30px;
  padding-bottom: 10px;
  text-align: center;
  border-bottom: 1px solid black;
}
.contract p {
  line-height: 30px;
}
.contract h3 {
  font-weight: 600;
}

.warning-row {
  color: green !important;
}
.datastyle {
  display: flex;
  justify-content: flex-start;
}
.datastyle span {
  display: inline-block;
  padding-right: 150px;
}
</style>

Answer 1

首先看下控制台有没有报错，如果有报错按照对应的错误排查
如果没有报错按照调用的方法，在方法里面加个debugger调试，看执行的参数获取情况，看哪个参数没有获取到还是空的