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>
如果有需要插件的可以私聊我。
vue打印echarts相关推荐
- Vue:echarts画图实战,异步获取数据在Vue上使用echarts进行画图
Vue:echarts画图实战,异步获取数据在Vue上使用echarts进行画图 一.效果图 二.资源 主题编辑器 ECharts 教程 实现代码------想要进行实战的同学可以研究以下代码,下面的 ...
- Vue:echarts的柱状图怎样按照比例缩小?
Vue:echarts的柱状图怎样按照比例缩小? 资源: vue制作echart图表随着画面等比例放大缩小 第二种方法:在div中使用echarts,利用div的参数来限制echarts生成的图表的大 ...
- Vue:echarts的柱状图为什么X轴上的文字不显示?
Vue:echarts的柱状图为什么X轴上的文字不显示? 资源: echarts x轴文字显示不全(解决方案) echarts柱状图X轴底部文字有的不显示出来?
- Vue:Vue和ECharts,在Vue上进行可视化处理,在Vue上画图
Vue:Vue和ECharts,在Vue上进行可视化处理,在Vue上画图 一.预科知识 Vue CLI ECharts 二.资源 在Vue中使用echarts 如何在 Vue 项目中使用 echart ...
- vue使用echarts可视化图形插件
1.安装echarts: cnpm/npm i echarts -S 2.main.js中 import echarts from 'echart' Vue.prototype.$echa ...
- Go+Vue打印店远程打印小程序源码
简介: Go+Vue打印店远程打印小程序源码,带微信小程序前端代码和后台程序源码,用户可以通过小程序上传文件→店主在线预览(下载)&打印. 网盘下载地址: http://kekewl.cc/j ...
- echarts grid的样式位置_vue使用Echarts vue使用Echarts滚动条
最近公司一个项目需要绘制图标,数据很多都要放在一张图标上面,说起图标肯定先想到Echarts , 刚好Echarts也配置了滚动条.下面分享一下 github: loever/vueEchartsg ...
- Vue将echarts数据导出成excel文件
Vue将echarts数据导出成excel文件 一.下载vendor插件 下载 vendor 文件放置项目的 src 目录下 链接:https://pan.baidu.com/s/1XYYQ186zo ...
- vue项目echarts通过cdn或npm引入
1. vue版本号: 2.6.11 2. vue-cli版本号: 4.5.11 3. 通过CDN的方式引入 3 3.1 .线上链接 1.首先先在public文件夹下的html页面中引入 <scr ...
最新文章
- Java 异步与同步的区别
- Android和iOS那个好?
- VS2008 Web Application和Web Site的区别_转载
- java jxls 科学计数_java通过jxls框架实现导入导出excel
- 关于JavaScript的作用域你应该了解的那点事!
- c语言 指针 a= amp b,c语言初学-引用和指针的异同点
- 了解SQL Server触发器及触发器中的事务
- [导入]画带阴影效果的文字
- Leetcode每日一题:3.无重复字符的最长子串
- MySql查询语句中解决“该列没有包含在聚合函数或者groupby子句中”的相关问题方法...
- Atitit 减少财政支出----获取商家商业机构的补贴措施 attilax大总结.docx
- wsimport指令
- 基于Binder机制之AIDL原理分析
- 在ThinkPHP5.0打造一个专属短信接口
- vue加d3js实现3d饼图
- 网易免费企业邮箱服务器地址
- android 下的 WATCHDOG(2)
- 又一北京“假名媛”曝光,蹭吃蹭喝21天,暴露人性最真实一面
- 从安装Eclipse到用Eclipse写第一个Java程序
- lotus 2k 测试网 多签钱包改为单签
热门文章
- 优炫数据库参编中国信通院《数据库发展研究报告(2022年)》
- 代码报错看不懂!你还用有道词典吗?程序员已经用插件上高速了!
- DOTA 数据集:2806 张遥感图像,近 19 万个标注实例
- 专业英文文档阅读神器
- jQuery 中的动画特效
- 1142 SELECT command denied to user ‘数据库‘@‘localhost‘ for table ‘表‘(没有授权)
- Python GUI之tkinter窗口视窗教程
- js判断对象属性是否存在之深入理解
- /root/GOPATH/pkg/mod/github.com/docker/libnetwork@v0.5.6/osl/namespace_linux.go:13:2: case-insensiti
- 莫兰指数P值,Z值分析