###vue form rendering picture, move the mouse into the picture to enlarge, and export the form as PDF
<template>
<div class="table-content" id="pdfDom">
<div class="table-content-top">水果订购系统</div>
<div>
<el-table
:data="tableData"
:header-cell-style="{background:'#d3dfeb',color:'black'}"
style="width: 100%">
<el-table-column
label="序号"
width="60">
<template slot-scope="scope">
<span style="margin-left: 10px">{
{ scope.$index+1 }}</span>
</template>
</el-table-column>
<el-table-column
label="商品编码"
width="100"
align="center">
<template slot-scope="scope">
<span style="margin-left: 10px">{
{ scope.row.bianma }}</span>
</template>
</el-table-column>
<el-table-column
header-align="center"
align="center"
width="100px"
label="图片"
>
<template slot-scope="scope">
<el-popover
placement="right"
title=""
trigger="hover"
style="display: flex;justify-content: center;"
>
<img :src="require('../../assets/fruitImg/'+scope.row.name+'.jpeg')" style="width: 300px;height:250px"/>
<img slot="reference" :src="require('../../assets/fruitImg/'+scope.row.name+'.jpeg')" style="max-height: 50px;max-width: 130px">
</el-popover>
</template>
</el-table-column>
<el-table-column
label="商品名称"
width="140"
align="center">
<template slot-scope="scope">
<el-popover trigger="hover" placement="top">
<p>商品名: {
{ scope.row.name }}</p>
<p>产地: {
{ scope.row.address }}</p>
<div slot="reference" class="name-wrapper">
<el-tag size="medium">{
{ scope.row.name }}</el-tag>
</div>
</el-popover>
</template>
</el-table-column>
<el-table-column
label="批发价"
width="100"
align="center">
<template slot-scope="scope">
<span style="margin-left: 10px">{
{ scope.row.pifajia }}</span>
</template>
</el-table-column>
<el-table-column
label="指导价"
width="100"
align="center">
<template slot-scope="scope">
<span style="margin-left: 10px">{
{ scope.row.zhidaojia }}</span>
</template>
</el-table-column>
<el-table-column
label="可用量"
width="80"
align="center">
<template slot-scope="scope">
<span style="margin-left: 10px">{
{ scope.row.keyongliang }}</span>
</template>
</el-table-column>
<el-table-column
label="单位"
width="80"
align="center">
<template slot-scope="scope">
<span style="margin-left: 10px">{
{ scope.row.danwei }}</span>
</template>
</el-table-column>
<el-table-column label="定购量" align="center" width="150">
<template slot-scope="scope">
<i class="el-icon-remove-outline" style="font-size:20px;" @click="scope.row.pronum>0?scope.row.pronum--:''"></i>
<span style="font-size:20px;padding: 0px 5px;">{
{scope.row.pronum}}</span>
<i class="el-icon-circle-plus-outline" style="font-size:20px" @click="scope.row.pronum<scope.row.keyongliang?scope.row.pronum++:scope.row.keyongliang"></i>
</template>
</el-table-column>
<el-table-column
label="总价格"
width="100"
align="center">
<template slot-scope="scope">
<span style="margin-left: 10px">{
{(scope.row.pifajia*scope.row.pronum).toFixed(2)}}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)">查看</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div>
<el-dialog title="品牌介绍" :visible.sync="dialogFormVisible" width="800px" >
<div class="img-box">
<img :src="icon"/>
</div>
<el-form :model="form" >
<el-form-item label="商品名" :label-width="formLabelWidth">
<el-input v-model="form.name" autocomplete="off" disabled></el-input>
</el-form-item>
<el-form-item label="建议零售价" :label-width="formLabelWidth">
<el-input v-model="form.jianyilingshoujia" autocomplete="off" disabled></el-input>
</el-form-item>
<el-form-item label="批发价" :label-width="formLabelWidth">
<el-input v-model="form.pifajia" autocomplete="off" disabled></el-input>
</el-form-item>
<el-form-item label="产地" :label-width="formLabelWidth">
<el-input v-model="form.address" autocomplete="off" disabled></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
</div>
</el-dialog>
</div>
<div class="countPrice">
<div class="countPronum">总条数:{
{totalcount()}}</div>
<div class="totalPrice">总价：<span>{
{countPrice()}}</span></div>
<el-button type="primary" class="btn" @click="btn()">提交订单</el-button>
<el-button type="primary" class="btn" @click="exportbtn()">表格数据PDF导出</el-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [{
id: '1',
bianma: '5101150',
name: '苹果',
address:'湖北 武汉',
pifajia:'129.3',
pronum:'0',
zhidaojia:'150',
keyongliang:'3',
jianyilingshoujia:'¥150',
danwei:'个'
},{
id: '2',
bianma: '5101151',
name: '车厘子',
address:'河北 石家庄',
pronum:'0',
pifajia:'275.3',
zhidaojia:'500',
keyongliang:'7',
jianyilingshoujia:'¥500',
danwei:'斤'
},{
id: '3',
bianma: '5101152',
name: '橘子',
address:'云南 昆明',
pronum:'0',
pifajia:'199.8',
zhidaojia:'250',
keyongliang:'8',
jianyilingshoujia:'¥250',
danwei:'斤'
},{
id: '4',
bianma: '5101153',
pronum:'0',
name: '榴莲',
address:'湖南 长沙',
pifajia:'300.8',
zhidaojia:'450',
keyongliang:'2',
jianyilingshoujia:'¥450',
danwei:'个'
},{
id: '5',
bianma: '5101154',
name: '椰子',
address:'江苏 南京',
pronum:'0',
pifajia:'720.8',
zhidaojia:'1000',
keyongliang:'1',
jianyilingshoujia:'¥1000',
danwei:'个'
},{
id: '6',
bianma: '5101155',
name: '西瓜',
address:'湖北 武汉',
pifajia:'848',
zhidaojia:'1000',
pronum:'0',
keyongliang:'8',
jianyilingshoujia:'¥1000',
danwei:'个'
},{
id: '7',
bianma: '5101156',
name: '芒果',
address:'浙江 杭州',
pifajia:'318',
zhidaojia:'400',
pronum:'0',
keyongliang:'6',
jianyilingshoujia:'¥400',
danwei:'个'
},{
id: '8',
bianma: '5101157',
name: '葡萄',
address:'中国 上海',
pifajia:'678.4',
pronum:'0',
zhidaojia:'1000',
keyongliang:'8',
jianyilingshoujia:'¥1000',
danwei:'串'
}],
dialogFormVisible:false,
icon:'',
form:{
id: '',
bianma: '',
name: '',
address:'',
pifajia:'',
pronum:'',
zhidaojia:'',
keyongliang:'',
danwei:''
},
formLabelWidth:'90px'
}
},
methods: {
exportbtn(){
let fileName='表格数据PDF'
this.getPdf('pdfDom', fileName)
},
countPrice(){
let total=0;
this.tableData.forEach((item)=>{
total+=item.pifajia*item.pronum;
})
return total.toFixed(2)
},
totalcount(){
let totalcount=0;
this.tableData.forEach((item)=>{
totalcount+=parseInt(item.pronum)
})
return totalcount
},
handleEdit(index,row){
this.dialogFormVisible=true
this.form=row;
this.icon=require("../../assets/fruitImg/"+row.name+".jpeg")
},
handleDelete(index,row){
this.$confirm(`确定删除${row.name}的数据吗?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.tableData.splice(index,1)
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消'
});
});
},
btn(){
this.$confirm('确定提交此订单吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$message({
type: 'success',
message: '提交成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消'
});
});
}
}
}
</script>
<style>
.table-content{
width: 86vw;
height: 100vh;
margin: 0 auto;
background: #f5f5f5;
}
.table-content-top{
text-align: center;
font-size:26px;
padding: 10px 0px;
font-weight:bold;
background: #f5f5f5;
color: #31a6f5;
}
.countPrice{
display: flex;
padding-top: 30px;
padding-bottom: 30px;
font-size: 30px;
}
.countPronum{
padding-right: 30px;
}
.totalPrice span{
color: red;
}
.btn{
margin-left: 260px;
}
.img-box img{
width: 300px;
height: 250px;
padding-left: 30%;
padding-bottom: 10px;
}
.el-form-item{
width:300px;
margin-left: 30px;
}
.el-form{
display: flex;
overflow: hidden;
flex-wrap: wrap;
}
</style>
###Here is the method of exporting PDF, create a js file of PDF export method, hang the getPdf method on the vue prototype chain, and the dependencies inside need to be installed by npm
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
install (Vue, options) {
Vue.prototype.getPdf = function (idStr, title) {
html2Canvas(document.querySelector('#' + idStr), {
// allowTaint: true,
useCORS: true,
// scale: 2, // 提升画面质量，但是会增加文件大小
}).then((canvas) => {
const contentWidth = canvas.width
const contentHeight = canvas.height
/* 导出不分页处理 */
const pageData = canvas.toDataURL('image/jpeg', 1.0)
const pdfWidth = (contentWidth + 10) / 2 * 0.75
const pdfHeight = (contentHeight + 200) / 2 * 0.75 // 500为底部留白
const imgWidth = pdfWidth
const imgHeight = (contentHeight / 2 * 0.75) // 内容图片这里不需要留白的距离
const PDF = new JsPDF('', 'pt', [ pdfWidth, pdfHeight, ])
PDF.addImage(pageData, 'jpeg', 0, 0, imgWidth, imgHeight)
PDF.save(title + '.pdf')
})
}
},
}