js
复制代码
import htmlToPdf from './utils/htmlToPdf.js'
Vue.use(htmlToPdf)
// htmlToPdf.js
// 导出页面为PDF格式
/*
用法
1. main.js中引入
import htmlToPdf from '@/util/htmlToPdf'
Vue.use(htmlToPdf)
2. vue页面中调用
按钮中方法 @click="getPdf()"
data中声明变量
data() {
return {
htmlTitle: "测试导出文件", // 生成pdf的名称
......
3. 打印内容 id必须为pdfDom
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
install(Vue, options) {
Vue.prototype.getPdf = function() {
var title = this.htmlTitle //
html2Canvas(document.querySelector('#pdfDom'), {
allowTaint: true,
taintTest: false,
useCORS: true,
// y: 72, // 对Y轴进行裁切
// width:1200,
// height:5000,
dpi: window.devicePixelRatio * 4, //将分辨率提高到特定的DPI 提高四倍
scale: 4 //按比例增加分辨率
}).then(function(canvas) {
let contentWidth = canvas.width
let contentHeight = canvas.height
let pageHeight = contentWidth / 592.28 * 841.89
let leftHeight = contentHeight
let position = 0
let imgWidth = 595.28
let imgHeight = 592.28 / contentWidth * contentHeight
let pageData = canvas.toDataURL('image/jpeg', 1.0)
let PDF = new JsPDF('', 'pt', 'a4')
if (leftHeight < pageHeight) {
PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
} else {
while (leftHeight > 0) {
PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
leftHeight -= pageHeight
position -= 841.89
if (leftHeight > 0) {
PDF.addPage()
}
}
}
PDF.save(title + '.pdf')
})
}
}
}
vue
复制代码
<template>
<div>
<el-form :inline=true label-width="80px" :model="form">
<el-form-item label="近几天">
<el-input v-model="form.day"></el-input>
</el-form-item>
<el-form-item label="科室编号">
<el-input v-model="form.dept_no"></el-input>
</el-form-item>
<el-form-item >
<el-button type="primary" @click="getlist">搜索</el-button>
</el-form-item>
<el-form-item >
<el-button type="warning" @click="getPdf()" :disabled='istrue'>导出文件</el-button>
</el-form-item>
</el-form>
<div id="pdfDom" class="tableBox" ref="print">
<div style="margin-left: 10%; margin-top: 3%">
<div style="display: flex">
<div style="width: 50%">
<el-image :src="require('@/assets/image/logo.jpg')" style="width: 60%; height: 80px"></el-image>
<p style="margin-left: 1%">Created Date:{{ formatDateTime() }}</p>
</div>
<div style="width: 35%; text-align: right; position: relative;font-size:18px">
<span style="align: left" contenteditable="true">Temp Low Alarm : {{ minTemperature }} </span>
<br />
<span style="align: left" contenteditable="true">Temp High Alarm : {{ maxTemperature }} </span>
<br />
<span style="align: left" contenteditable="true">Data Points: : {{ '-' }} </span>
</div>
</div>
<div style="display: flex">
<div>
<el-descriptions title="Device Configuration" column="1">
<el-descriptions-item label="Device ID"
><span contenteditable="true">{{ tableData1.length > 0 ? tableData1[0].deviceId : '' }}</span></el-descriptions-item
>
<el-descriptions-item label="Device Model"> <span contenteditable="true">G-2540M</span></el-descriptions-item>
<el-descriptions-item label="Firmware Version"> <span contenteditable="true">RYB-17.6.8</span></el-descriptions-item>
<el-descriptions-item label="Hardware Version"> <span contenteditable="true"> RYB-1.5.6pro</span></el-descriptions-item>
</el-descriptions>
</div>
<div>
<el-descriptions title="Order Information" column="1">
<el-descriptions-item label="Shipment ID"><span contenteditable="true">-</span></el-descriptions-item>
<el-descriptions-item label="Local"><span contenteditable="true"> 深圳市 </span></el-descriptions-item>
<el-descriptions-item label="Project Num"><span contenteditable="true"> </span></el-descriptions-item>
</el-descriptions>
</div>
</div>
<div>
<div>
<el-descriptions title="Logging Summary" column="2">
<el-descriptions-item label="Threshold(Low~High)">2°C~8°C</el-descriptions-item>
<el-descriptions-item label="Start Record Delay">-</el-descriptions-item>
<el-descriptions-item label="Highest Temperature"> {{maxTemperature}}</el-descriptions-item>
<el-descriptions-item label="Lowest Temperature">{{minTemperature}} </el-descriptions-item>
<el-descriptions-item label="Average"> {{avaTemperature}}</el-descriptions-item>
<el-descriptions-item label="MKT"> -</el-descriptions-item>
<el-descriptions-item label="Reporting Interval"> 5 Mins</el-descriptions-item>
<el-descriptions-item label="Record Interval">20 Mins</el-descriptions-item>
</el-descriptions>
</div>
</div>
<div style="background: #fff; width: 85%">
<div ref="barChart" style="width: 100%; height: 500px"></div>
</div>
<div style="display: flex; width: 90%">
<el-table :data="tableData1" style="width: 18%">
<el-table-column prop="create_date" label="Date"></el-table-column>
<el-table-column prop="temperature" label="°C" width="80px"></el-table-column>
</el-table>
<el-table :data="tableData2" style="width: 18%">
<el-table-column prop="create_date" label="Date"></el-table-column>
<el-table-column prop="temperature" label="°C" width="80px"></el-table-column>
</el-table>
<el-table :data="tableData3" style="width: 18%">
<el-table-column prop="create_date" label="Date"></el-table-column>
<el-table-column prop="temperature" label="°C" width="80px"></el-table-column>
</el-table>
<el-table :data="tableData4" style="width: 18%">
<el-table-column prop="create_date" label="Date"></el-table-column>
<el-table-column prop="temperature" label="°C" width="80px"></el-table-column>
</el-table>
<el-table :data="tableData5" style="width: 18%">
<el-table-column prop="create_date" label="Date"></el-table-column>
<el-table-column prop="temperature" label="°C" width="80px"></el-table-column>
</el-table>
</div>
</div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts'
import { getTableGcp } from '@/api/table/tableCommon'
export default {
name: 'App',
mounted() {
this.initChart()
},
created() {
//this.getlist()
},
data() {
return {
//chart:null,
tableData: [],
tableData2: [],
istrue:true,
minTemperature:'',
avaTemperature:'',
maxTemperature:'',
form:{
day: 1,
dept_no: '',
},
tableData4: [],
tableData5:[],
tableData1: [],
tableData3: [],
}
},
methods: {
findMinMaxTemperature(data) {
// 检查数据是否为空
// 初始化最大值和最小值为集合中的第一个元素的temperature
let maxTemp = data[0].temperature;
let minTemp = data[0].temperature;
// 遍历集合，更新最大值和最小值
for (let i = 1; i < data.length; i++) {
const temp = data[i].temperature;
if (temp > maxTemp) {
maxTemp = temp;
}
if (temp < minTemp) {
minTemp = temp;
}
}
let sum = 0;
for (let i = 0; i < data.length; i++) {
sum += data[i].temperature;
}
this.maxTemperature = maxTemp ;
this.minTemperature = minTemp;
this.avaTemperature =(Math.round((sum / data.length) * 100) / 100);
} ,
getlist() {
if(this.form.dept_no == ''){
this.msgError("请输入科室编号")
return
}
getTableGcp('/api/LogTemperature/GetTemperature?dept_no=' + this.form.dept_no + '&days=' + this.form.day).then((response) => {
this.tableData = response.data
this.tableData1=[];
this.tableData2=[];
this.tableData3=[];
this.tableData4=[];
this.tableData5=[];
if(this.tableData.length <1){
this.msgError('暂未查到温湿度数据记录')
}else{
this.findMinMaxTemperature(this.tableData)
this.istrue = false
}
console.log(this.tableData,'11')
const totalItems = this.tableData.length
const itemsPerArray = Math.floor(totalItems / 5)
const remainder = totalItems % 5
// 分配主要部分
for (let i = 0; i < itemsPerArray; i++) {
this.tableData1.push(this.tableData[i])
this.tableData2.push(this.tableData[i + itemsPerArray])
this.tableData3.push(this.tableData[i + itemsPerArray * 2])
this.tableData4.push(this.tableData[i + itemsPerArray * 3])
this.tableData5.push(this.tableData[i + itemsPerArray * 4])
}
this.initChart()
})
},
initChart() {
// 基于准备好的dom，初始化echarts实例
const myChart = echarts.init(this.$refs.barChart)
// 指定图表的配置项和数据
const option = {
xAxis: {
type: 'category',
data: this.tableData.map((x) => x.create_date),
},
yAxis: {
type: 'value',
},
series: [
{
data: this.tableData.map((x) => x.temperature),
type: 'line',
smooth: true,
},
],
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
},
formatDateTime(date = new Date()) {
let year = date.getFullYear()
let month = String(date.getMonth() + 1).padStart(2, '0') // 月份是从0开始的
let day = String(date.getDate()).padStart(2, '0')
let hours = String(date.getHours()).padStart(2, '0')
let minutes = String(date.getMinutes()).padStart(2, '0')
let seconds = String(date.getSeconds()).padStart(2, '0')
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
},
},
}
</script>
<style>
.tableBox {
/* 确保内容不会因页面大小而截断 */
width: 100%;
overflow-x: auto;
}
</style>