htmlToPdf

1. 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')
   			})
   		}
   	}
   }
   

   <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>