页面分页打印,echarts图解决办法;生成PDF

1:echarts图片前端打印不是很完美,对于VUE2.0版本不是很有好

2:360浏览器不支持vue的最新版本的插件vue3-print-nb

3:vue-print-nb 可以打印带有echarts 一页内容,并且还存在bug,第一次点击打印没有,第二次打印才会出现,并且不会分页,显然是不可以的

解决方案:将echarts弄成base64图片,注意缓存时间,时间太短图片生成不出来;并且打印只能是页面的显示内容,隐藏内容不会被打印出来,所以最好再写一个页面

<Row><Col span="2">&nbsp;</Col><Col span="20"><div class="tableWrap"  style="height: 300px;width: 100%"><divref="myStacked"id="myStacked"style="height: 300px;width: 100%"></div></div></Col></Row>1:注意div标签要给高度,不然echarts显示不出来const myStacked = echarts.init(this.$refs.myStacked);setTimeout(()=>{this.myStackedImg = myStacked.getDataURL({type: "jpg",pixelRatio: 1, //放大2倍backgroundColor: "#fff", // 背景颜色});},1000)1:getDataURL 是获取base64的图片方法<Modal v-model="previewsModel" title="报告pdf" :mask-closable="false"width="1200"  footer-hide :styles="{top: '100px'}"><riskReportPdf2style="height: 500px;overflow: auto":myStackedImg="myStackedImg":myPiepagetwoImg="myPiepagetwoImg":myPiePage2Img="myPiePage2Img":myColumnPage4Img="myColumnPage4Img"....../></Modal>1:注入vue-print-nb 和 Vue import Print from 'vue-print-nb';
import Vue from 'vue';
Vue.use(Print, {manualPageBreak: true});
<Card class="box-card" :body-style="{ padding: '20px',minHeight: 'calc(100vh - 100px)'}">// 打印的标签id regAccountConfirmDiv111<div id="regAccountConfirmDiv111" ref="regAccountConfirmDiv111" style="padding: 20px">// 分页 page-break-before:always;<div style="page-break-before:always;"><Row><Col span="24" style="text-align: center;"><img :src="myStackedImg" alt="交易数量" style="display: inline-block;border: 1px solid #000000;margin-top: 10px" /></Col></Row></div></div>
</Card>1:注意 <div style="page-break-before:always;"> 是分页的标识print() {this.$print(this.$refs.regAccountConfirmDiv111);},
.......

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/4076.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

BIM为电力、供水和道路工程无缝集成,助力智慧城市计划

在道路和公用事业工程中利用 Bentley Open 系列应用程序&#xff0c;项目进度加快 10%&#xff0c;节省成本 1,000 万印度卢比 推动基础设施现代化&#xff0c;实现智慧城市愿景 Dholera特别投资区位于印度艾哈迈达巴德西南 100 公里处&#xff0c;毗邻古吉拉特邦的贸易中心&a…

英智数字孪生机器人解决方案,赋能仓库物流模式全面升级

工业机械臂、仓储机器人、物流机器人等模式的机器人系统在现代产业中扮演着愈发重要的角色&#xff0c;他们的发展推动了自动化和智能化水平的提高&#xff0c;有助于为制造业、物流业、医疗保健业和服务业等行业创造新效率并提升人们的生活质量。 行业面临的挑战 机器人开发、…

区块链 | OpenSea:Wyvern protocol

目录 Wyvern on the OpenSea 1 交易流程 1.1 卖家 1.2 买家 2 组成部分 2.1 WyvernProxyRegistry 2.2 OwnableDelegateProxy 2.3 NFT Contract 2.4 OpenSea Order Book 2.5 Wyvern Exchange Contract 3 总结 &#x1f951;原文&#xff1a;Wyvern on the …

如何写好代码?

文章目录 前言内容代码应当易于理解命名注释格式循环和逻辑设计函数设计类其它&#xff08;编程规范、静态检查工具&#xff09;重构 前言 在软件开发领域&#xff0c;写好代码是至关重要的一环。不论是在学校学习的学生&#xff0c;刚刚毕业的应届生&#xff0c;还是刚步入企…

数据结构-二叉树-链式

一、链式二叉树的结构 typedef int BTNodeDataType; typedef struct BTNode {BTNodeDataType data;struct BTNode* left;struct BTNode* right; }BTNode; 二叉树的前中后序遍历 前序&#xff1a;根左右 中序&#xff1a;左根右 后序&#xff1a;左右根 void PreOrder(BTNo…

spring boot3单模块项目工程搭建-上(个人开发模板)

⛰️个人主页: 蒾酒 &#x1f525;系列专栏&#xff1a;《spring boot实战》 目录 写在前面 上文衔接 常规目录创建 common目录 exception.handle目录 result.handle目录 controller目录 service目录 mapper目录 entity目录 test目录 写在最后 写在前面 本文…

uniapp视频播放器(h5+app)

关于uniapp视频播放器遇到的一些问题&#xff0c;mark下。 中途遇到了很多问题&#xff0c;如果有相同的伙伴遇到了类似的&#xff0c;欢迎交流 官方的video播放器在app上不友好&#xff0c;有以下功能不支持。 loadedmetadata、controlstoggle不支持导致只能手写控制层。 不…

Linux实验一:Linux环境及编程工具

目录 一、实验目的二、实验内容三、参考代码四、实验步骤步骤1. 编辑源代码test1.c步骤2. 编译源代码test1.c步骤3. 调试test1步骤4. 重新编译运行test1.c 五、实验结果六、实验总结 一、实验目的 1、掌握Linux C开发过程中的基本概念&#xff1b; 2、掌握如vim&#xff0c;GC…

keepalived检测Nginx高可用

node1 192.168.136.55 node2 192.168.136.56 两台机器都安装dnf install keepalived nginx [rootnode1 ~]# echo "web test page, ip is hostname -I." > /usr/share/nginx/html/index.html [rootnode2 ~]# echo "web test page, ip is hostname -I."…

【科学研究】农村出身:一种复杂的情感结构

::: block-1 “时问桫椤”是一个致力于为本科生到研究生教育阶段提供帮助的不太正式的公众号。我们旨在在大家感到困惑、痛苦或面临困难时伸出援手。通过总结广大研究生的经验&#xff0c;帮助大家尽早适应研究生生活&#xff0c;尽快了解科研的本质。祝一切顺利&#xff01;—…

LeetCode 面试题 17.08 —— 马戏团人塔

阅读目录 1. 题目2. 解题思路3. 代码实现 1. 题目 2. 解题思路 首先&#xff0c;我们对人的身高按照从小到大排序&#xff0c;特别注意&#xff0c;对于身高相等的人&#xff0c;要按照体重从高到低排序。这时候&#xff0c;序列已经满足了在上面的人要比下面的人矮一点&#…

在开发软件以便未来本地化到其他语言时需要考虑的事项

我们准备了一份关于开发软件以便未来本地化到其他语言时需要考虑的事项的简要指南。这非常重要&#xff0c;因为您的软件在其他国家市场上的销售可能会带来比本国市场更多的收入。 在开发软件时考虑到未来本地化到其他语言的一些重要方面包括&#xff1a; 设计多语言支持&…

有什么因素会影响IP稳定性?

IP稳定性指的是IP地址在一段时间内保持不变的能力&#xff0c;对于网络连接的安全性和可靠性至关重要。以下是一些可能影响IP稳定性的主要因素&#xff1a; 网络服务提供商&#xff08;ISP&#xff09;的政策&#xff1a;不同的ISP对于IP地址的管理和使用有不同的政策。一些IS…

springboot+thymeleaf实现一个简单的监听在线人数功能

功能步骤&#xff1a; 1. 当用户访问登录页面时&#xff0c;Logincontroller的showLoginForm方法被调用&#xff0c;返回登录页面的视图名字。 2. 用户提交表单&#xff0c;调用LoginController的login方法。 3.login方法 4.登录验证通过&#xff0c;home方法会被调用&#xf…

C++解方程组的库

解决多元多次方程组的问题&#xff0c;你可以考虑以下几个C库&#xff1a; Eigen: Eigen库是一个高性能的C模板库&#xff0c;用于线性代数运算。它提供了强大的矩阵运算功能&#xff0c;可以用来解多元一次方程组。对于多次方程组&#xff0c;你可能需要结合Eigen和一些数值优…

C++笔试强训day7

目录 1.字符串中找出连续最长的数字串 2.岛屿数量 3.拼三角 1.字符串中找出连续最长的数字串 链接 我的思路很简洁&#xff0c;就是双指针遍历&#xff0c;然后不断更新左位置left和右位置right和长度len。 然后我写代码的时候代码思路没跟上原本思路&#xff0c;直接把所有…

HTTP网络协议,接口请求的内容类型 content-type(2024-04-27)

1、简介 Content-Type&#xff08;内容类型&#xff09;&#xff0c;一般是指网页中存在的 Content-Type&#xff0c;用于定义网络文件的类型和网页的编码&#xff0c;决定浏览器将以什么形式、什么编码读取这个文件&#xff0c;这就是经常看到一些 PHP 网页点击的结果却是下载…

OSI七层模型、TCP/IP五层模型理解(个人解读,如何理解网络模型)

OSI七层模型 七层模型&#xff0c;亦称OSI&#xff08;Open System Interconnection&#xff09;。参考模型是国际标准化组织&#xff08;ISO&#xff09;制定的一个用于计算机或通信系统间互联的标准体系&#xff0c;一般称为OSI参考模型或七层模型。它是一个七层的、抽象的模…

航片卫星影像局部几何纠偏-道路错位校正

原图道路错位如下图所示&#xff1a; 局部几何纠偏结果如下图所示&#xff1a; 操作视频教程&#xff1a; MCM智拼图软件V8.5-局部位置纠偏-几何校正-PS联动_哔哩哔哩_bilibili

11 c++版本的贪吃蛇

前言 呵呵 这大概是 大学里面的 c 贪吃蛇了吧 有一些 面向对象的理解, 但是不多 最近 因为想要 在单片机上面移植一下 贪吃蛇, 所以 重新拿出了一下 这份代码 然后 将它更新为 c 版本, 还是 用了一些时间 这里 具体的实现 就不赘述, 仅仅是 发一下代码 以及 具体的使用…