vue打印echarts
业务需求:
需要在打印表格的时候,打印echarts,综合网上的资料。ps:坑真的多,晚上找到的资料基本都是粘贴复制,误人子弟我真是服了.
废话少说,先上截图.
首页是通过正常的echarts获取的,没啥好说的,其余的echats是通过v-echarts循环生成的,具体可以百度.
先说一下吧,一开始找到了一个print.js插件,但是每次生成echarts,第二次打开后便会重新生成img,因为pdf无法打印echarts,便在原来的基础上修改了一下,图片正常显示,基本完美解决了. 重要的一点是,打印的尺寸是A4,位置居中,这样预览的样式不会出现偏差.
步骤:
-
打印内容ref自己可以随意去,插件会通过此名称代用.
-
打印方法:
-
printPDF() { this.$print(this.$refs.print);
},
通过此方法便会开始打印。
截图代码:
<div ref="print" id="print" style="text-align: center;margin: 0 auto;width: 595px;">
<el-row style="height: 100%;page-break-after:always">
<el-col :span="24" style="font-size: 40px;font-weight: 500;margin-top: 150px;font-family: 宋体">******股份有限公司</el-col>
<el-col :span="24" style="font-size: 26px;margin-top: 60px;font-weight: 500;font-family: 宋体">上<br/>传<br/>数<br/>据<br/>质<br/>量<br/>分<br/>析<br/>报<br/>告</el-col>
<el-col :span="12">
<div id="left_echart" class="left_box">
</div>
</el-col>
<el-col :span="12">
<div id="right_echart" class="right_box">
</div>
</el-col>
<el-col :span="24" style="margin-top: 100px">
<div style="font-family: 宋体;font-size: 12px">数据上传时间:<span style="margin-left: 10px">2022-12-21</span></div>
</el-col>
<el-col :span="24">
<div style="font-family: 宋体;font-size: 12px">质量分析时间:<span style="margin-left: 10px">2022-12-31</span></div>
</el-col>
</el-row>
<el-row>
<!-- 根据当前煤矿的所属系统编码生成测点信息-->
<el-col :span="24" v-for="(list,i) in PDFList" class="selfTable">
<el-col :span="24" style="font-family: 宋体;font-size: 12px;font-weight: 600;margin-top: 100px">主通风机监控系统</el-col>
<el-col :span="24">
<el-col :span="12">
<div class="left_box">
<ve-pie :series="setting.series" :legend="setting.legend" :colors="setting.color" :title="setting.title" :legend-position="setting.legendPosition" :height="setting.height" :tooltip-visible="setting.tooltip" :settings="chartSettings" ref="leftPie"></ve-pie>
</div>
</el-col>
<el-col :span="12">
<div class="right_box">
<ve-pie :series="setting.series" :legend="setting.legend" :colors="setting.color" :title="setting.title" :legend-position="setting.legendPosition" :height="setting.height" :tooltip-visible="setting.tooltip" :settings="chartSettings" ref="rightPie"></ve-pie>
</div>
</el-col>
</el-col>
<table cellspacing="0" cellpadding="0" border="1">
<thead>
<tr>
<td>序号</td>
<td>设备名称</td>
<td>测点名称</td>
<td>测点值</td>
<td>参考上限</td>
<td>参考下限</td>
<td>是否合格</td>
<td>异常情况</td>
</tr>
</thead>
<tbody v-if="list.length">
<tr v-for="(item,i) in list">
<td>{{i 1}}</td>
<td>{{item.deviceName}}</td>
<td>{{item.pointName}}</td>
<td>{{item.pointValue}}</td>
<td>{{item.maxLevel}}</td>
<td>{{item.minLevel}}</td>
<td>{{item.qualified}}</td>
<td>{{item.abnormal}}</td>
</tr>
</tbody>
</table>
<div v-if="!list.length" class="table-empty">
<span class="table-empty-text">暂无数据</span>
</div>
</el-col>
</el-row>
</div>
如果有需要插件的可以私聊我。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhibeaih
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22 -
excel打印预览压线压字怎么办
PHP中文网 06-22