downPdf是导出图片的方法，我在我的另一个页面可以导出，但是这个页面导出的是全空白，有什么原因嘛？
<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>
以上是 downPdf是导出图片的方法，我在我的另一个页面可以导出，但是这个页面导出的是全空白，有什么原因嘛？ 的全部内容， 来源链接： utcz.com/p/934145.html
