###vue表格渲染图片,鼠标移入图片放大，并将表格导出为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>
###这里是导出PDF的方法，创建一个PDF导出方法的js文件，将getPdf方法挂在vue原型链上，里面的依赖需要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')
})
}
},
}