1.vue create pdf --------创建名为pdf的vue项目
2.npm install element-ui,pdfjs,jspdf-autotable ---安装三个必备的依赖包
3.main.js里边添加引用
import elementui from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.config.productionTip = falseVue.use(elementui)import less from 'less'Vue.use(less)
4.引入一个解决中文乱码文件的字体文件font.js
5.正文demo
<template><div id="PdfPage2"><button type="button" @click="downloadPdf">导出PDF</button><div id="pdfDom" style="background: #fff"><el-formstyle="margin: 0 auto; text-align: center"ref="DialogForm":model="DialogForm"label-width="120px"size="mini"><div style="border-bottom: 1px dashed #ccc; padding-bottom: 20px"><el-form-item label="场地长度(米)" prop="length" style="width: 45%; display: inline-block; border: none"><el-inputv-model.number="DialogForm.length"autocomplete="off"placeholder="请输入场地长度"clearable></el-input></el-form-item><el-form-item label="场地宽度(米)" prop="width" style="width: 45%; display: inline-block"><el-inputv-model.number="DialogForm.width"autocomplete="off"placeholder="请输入场地宽度"clearable></el-input></el-form-item><div style="border-top: 1px dashed #ccc; padding-top: 20px"><el-form-item label="原点位于方位" prop="direction"><!-- <el-inputv-model.number="DialogForm.width"autocomplete="off"placeholder="请输入方向(如：东南/西南/西北/东北)"clearable></el-input> --><el-selectv-model="DialogForm.direction"placeholder="请选择"style="width: 100%"@change="directionChange"clearable><el-option v-for="item in directionArr" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select></el-form-item><div style="background: #fcd7bd"><p style="color: #cd4201; font-size: 12px">场所空间默认按照正规房间方位朝向，请自行判断方位！</p></div></div></div></el-form><div style="border-bottom: 1px dashed #ccc; padding-bottom: 20px; text-align: center"><el-table :data="stationData" stripe border style="margin-left: 40%" max-height="470px"><el-table-column label="序号" type="index" width="50px" align="center" fixed><template slot-scope="scope">{{ scope.$index + 1 }}</template></el-table-column><el-table-column label="x" prop="x" width="120px" align="center" fixed> </el-table-column><el-table-column label="y" prop="y" width="120px" align="center"></el-table-column></el-table></div><div class="tableBox"><el-table id="indexTable1" :data="innerData" stripe border style="width: 100%" max-height="470px"><el-table-column label="序号" type="index" width="50px" align="center" fixed><template slot-scope="scope">{{ scope.$index + 1 }}</template></el-table-column><el-table-column label="imsi" prop="imsi" width="120px" align="center" fixed> </el-table-column><el-table-column label="imei" prop="imei" width="120px" align="center"></el-table-column><el-table-column label="手机号" prop="isdn" width="120px" align="center"></el-table-column><el-table-column label="手机型号" prop="model" width="120px" align="center"></el-table-column><el-table-column label="运营商" prop="vendortype" align="center"></el-table-column></el-table><el-table id="indexTable2" :data="innerData" stripe border style="width: 100%" max-height="470px"><el-table-column label="序号" type="index" width="50px" align="center" fixed><template slot-scope="scope">{{ scope.$index + 1 }}</template></el-table-column><el-table-column label="imsi" prop="imsi" width="120px" align="center" fixed> </el-table-column><el-table-column label="imei" prop="imei" width="120px" align="center"></el-table-column><el-table-column label="手机号" prop="isdn" width="120px" align="center"></el-table-column><el-table-column label="手机型号" prop="model" width="120px" align="center"></el-table-column><el-table-column label="运营商" prop="vendortype" align="center"></el-table-column></el-table></div></div></div></template><script>// import $ from "jquery";import { jsPDF as JsPDF } from 'jspdf'import 'jspdf-autotable'import pdfFont from './utils/fonts' //引入字体js文件，解决中文乱码export default {name: 'PdfPage2',data() {return {innerData: [{imsi: '1234567890',imei: '1234567890',isdn: '1234567890',model: '华为',vendortype: '电信'},{imsi: '1234567890',imei: '1234567890',isdn: '1234567890',model: '小米',vendortype: '移动'},{imsi: '1234567890',imei: '1234567890',isdn: '1234567890',model: '苹果',vendortype: '电信'},{imsi: '1234567890',imei: '1234567890',isdn: '1234567890',model: '荣耀',vendortype: '联通'},{imsi: '1234567890',imei: '1234567890',isdn: '1234567890',model: '华为',vendortype: '移动'},{imsi: '1234567890',imei: '1234567890',isdn: '1234567890',model: '荣耀',vendortype: '联通'},{imsi: '1234567890',imei: '1234567890',isdn: '1234567890',model: '华为',vendortype: '移动'},{imsi: '1234567890',imei: '1234567890',isdn: '1234567890',model: '荣耀',vendortype: '联通'},{imsi: '1234567890',imei: '1234567890',isdn: '1234567890',model: '华为',vendortype: '移动'},{imsi: '1234567890',imei: '1234567890',isdn: '1234567890',model: '荣耀',vendortype: '联通'},{imsi: '1234567890',imei: '1234567890',isdn: '1234567890',model: '华为',vendortype: '移动'},{imsi: '1234567890',imei: '1234567890',isdn: '1234567890',model: '华为',vendortype: '移动'},{imsi: '1234567890',imei: '1234567890',isdn: '1234567890',model: '荣耀',vendortype: '联通'},{imsi: '1234567890',imei: '1234567890',isdn: '1234567890',model: '华为',vendortype: '移动'},{imsi: '1234567890',imei: '1234567890',isdn: '1234567890',model: '华为',vendortype: '移动'},{imsi: '1234567890',imei: '1234567890',isdn: '1234567890',model: '荣耀',vendortype: '联通'},{imsi: '1234567890',imei: '1234567890',isdn: '1234567890',model: '华为',vendortype: '移动'},{imsi: '1234567890',imei: '1234567890',isdn: '1234567890',model: '华为',vendortype: '移动'},{imsi: '1234567890',imei: '1234567890',isdn: '1234567890',model: '荣耀',vendortype: '联通'},{imsi: '1234567890',imei: '1234567890',isdn: '1234567890',model: '华为',vendortype: '移动'}],outerData: [{imsi: '1234567890',imei: '1234567890',isdn: '1234567890',model: '华为',vendortype: '电信'},{imsi: '1234567890',imei: '1234567890',isdn: '1234567890',model: '小米',vendortype: '移动'},{imsi: '1234567890',imei: '1234567890',isdn: '1234567890',model: '苹果',vendortype: '电信'},{imsi: '1234567890',imei: '1234567890',isdn: '1234567890',model: '荣耀',vendortype: '联通'},{imsi: '1234567890',imei: '1234567890',isdn: '1234567890',model: '华为',vendortype: '移动'}],stationData: [{ x: 1, y: 2 },{ x: 1, y: 2 },{ x: 1, y: 2 },{ x: 1, y: 2 },{ x: 1, y: 2 }],DialogForm: {width: 40,length: 40,direction: 1,domains: [{x: 2,y: 35},{x: 38,y: 5},{x: 35,y: 37},{x: 5,y: 5}]},directionArr: [{ value: 1, label: '东南' },{ value: 2, label: '西南' },{ value: 3, label: '东北' },{ value: 4, label: '西北' }],originObj: {xValue: '东',yValue: '南'},htmlTitle: '页面导出PDF文件名',score: '100'}},methods: {downloadPdf() {const doc = new JsPDF('p', 'pt') // 获取实例// const res = doc.autoTableHtmlToJson(// document.getElementById("indexTable")// );const res = this.innerDataconsole.log('res', res)// 设置中文字体// doc.addFileToVFS("ok.ttf", myFont);// doc.addFont("ok.ttf", "myFont", "normal");// doc.setFont("myFont");doc.addFileToVFS('msyh-normal.ttf', pdfFont)doc.addFont('msyh-normal.ttf', 'myFont', 'normal')doc.setFont('myFont')// doc.addFileToVFS("gbsn00lp-2-normal.ttf", font);// doc.addFont("gbsn00lp-2-normal.ttf", "gbsn00lp-2", "normal");// doc.setFont("font");doc.format = [595.28, 841.89]doc.autoTable({styles: {//设置表格的字体，不然表格中文也乱码fillColor: [255, 255, 255],font: 'myFont',textColor: [0, 0, 0],halign: 'left',fontSize: 12},headStyles: { lineWidth: 1, halign: 'center' },columnStyles: {0: { valign: 'middle', cellWidth: 50 },1: { valign: 'middle', cellWidth: 50 },2: { valign: 'middle' },3: { valign: 'middle', cellWidth: 200 },4: { valign: 'middle', minCellWidth: 30 } // 第4列居中,宽度最小30},theme: 'grid', // 主题startY: 80, // 距离上边的距离margin: 20, // 距离左右边的距离body: res, // 表格内容columns: [// 表头{ header: 'imsi', dataKey: 'imsi' },{ header: 'imei', dataKey: 'imei' },{ header: '手机号', dataKey: 'isdn' },{ header: '手机型号', dataKey: 'model' },{ header: '运营商', dataKey: 'vendortype' }]})const pageWidth = doc.getPageWidth() // A4纸:595.28const x1 = (pageWidth - doc.getTextWidth(this.htmlTitle)) / 2console.log(x1, '123')const totalPages = doc.internal.getNumberOfPages() // 获取当前doc的页数for (let i = 1; i <= totalPages; i++) {if (i == 1) {doc.setPage(i) // 通过循环，跳转至相应的页进行设置// 后面可以进行相应的数据写入操作了，例如以下的添加水印操作doc.setTextColor(150)doc.text(10, 20, 'Watermark')doc.text(20, 60, `总分:${this.score}`)doc.text(x1, 40, this.htmlTitle) // x坐标,y坐标,文字doc.setFontSize(12) // 设置文字大小,下一行起有效doc.save(`${this.htmlTitle}-大数据指数.pdf`)}}},// 设置原点directionChange(val) {console.log('select', val)if (val == 1) {this.originObj.xValue = '东'this.originObj.yValue = '南'} else if (val == 2) {this.originObj.xValue = '西'this.originObj.yValue = '南'} else if (val == 3) {this.originObj.xValue = '东'this.originObj.yValue = '北'} else if (val == 4) {this.originObj.xValue = '西'this.originObj.yValue = '北'}this.$refs.scatter.draw()},removeDomain(item) {if (this.DialogForm.domains.length < 3) {this.$message.warning('监测点至少应设置3个,无法删除！')return}var index = this.DialogForm.domains.indexOf(item)if (index !== -1) {this.DialogForm.domains.splice(index, 1)}},addDomain() {if (this.DialogForm.domains.length >= 6) {this.$message.warning('监测点最多支持6个,暂时不适配更多监测点！')return}this.DialogForm.domains.push({x: null,y: null,key: Date.now()})console.log('添加监测点', this.DialogForm)}}}</script><style scoped>.content {height: calc(100vh - 100px);}@media print {/* 打印页面样式 */.noprint {display: none;}.Front {background-color: white;/* background: url(../assets/beijng.jpg); */background-size: 100% 100%;}.buttonNoPrint {display: none;}.Header {display: none;}.Headers {display: none;}body {-webkit-print-color-adjust: exact;-moz-print-color-adjust: exact;-ms-print-color-adjust: exact;print-color-adjust: exact;}#pdfDom {/* width: 1078px;height: 1568px;height: 7200px;border: 1px #000 solid; */border-bottom: white;margin: 0 auto;/* margin-left: 1%;margin-top: 1%; */}/* 配置页眉页脚的边距，宽度 */@page {size: auto !important;/* margin: 3mm !important; */margin: 1.5em 1.5em 1.5em;}}</style>
6.导出效果图
