页面分页打印,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.hqwc.cn/news/641595.html

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

相关文章

c#学习入门1

一、环境配置 颜色主题 字体设置 行号设置 二、第一个应用程序 1. 在解决方案下创建一个新项目 第一种注释&#xff1a;两杠注释 第二种注释&#xff1a;星号注释 第三种注释&#xff1a;三杠注释(只有在花括号后面输出才会自动补全&#xff09; 2.控制台输入打印基础语句 输…

vLLM-prefix浅析(System Prompt,大模型推理加速)

原文&#xff1a;vLLM-prefix浅析&#xff08;System Prompt&#xff0c;大模型推理加速&#xff09; 简介 本文浅析了在大模型推理加速方面一个非常优秀的项目 vLLM 的一个新特性 Prefix。在 Prompt 中有相同前缀时可以提高吞吐量降低延迟&#xff0c;换句话说可以省去这部分…

Docker镜像下载

离线安装&#xff1a;物理传输 # 将镜像压缩成tar包 (将nginx 镜像打成tar包&#xff0c;然后拷贝到新机器) docker save -o xxxx.tar nginx:v1.0 # 新的机器加载 docker load -i xxx.tar # 在线安装&#xff1a;先上传到远程镜像仓库 docker tag nginx:v1.0 ldj/nginx:v1.0 #登…

【Java框架】Spring框架(四)——Spring中的Bean的创建与生命周期

目录 SpringBean的创建步骤后置处理器(PostProcessor)BeanFactoryPostProcessorBeanPostProcessorInstantiationAwareBeanPostProcessorpostProcessBeforeInstantiationpostProcessAfterInstantiationpostProcessProperties SmartInstantiationAwareBeanPostProcessordetermine…

大厂常见算法50题-反转链表

专栏持续更新50道算法题&#xff0c;都是大厂高频算法题&#xff0c;建议关注。 文章目录 解法参考链接题目解法一 双指针解法二 递归解法三 妖魔化的双指针总结 解法参考链接 题目 解法一 双指针 定义两个指针&#xff1a; pre 和 cur。pre 在前 cur 在后。每次让 pre的 nex…

C语言进阶课程学习记录-第48课 - 函数设计原则

C语言进阶课程学习记录 - 函数设计原则 本文学习自狄泰软件学院 唐佐林老师的 C语言进阶课程&#xff0c;图片全部来源于课程PPT&#xff0c;仅用于个人学习记录

JVM学习笔记(五)内存模型

目录 1、原子性 1.1 问题分析 1.2 解决方法 2、可见性 2.1 退不出的循环 2.2 解决办法 3、有序性 3.1 诡异的结果 3.2 解决办法 3.3 有序性理解 3.4 happens-before 4、CAS与原子类 4.1 CAS 4.2 乐观锁与悲观锁 4.3 原子操作类 5、synchronized 优化 5.1 轻量…

【力扣 Hot100 | 第五天】4.20(回文链表)

1.回文链表 1.1题目 给你一个单链表的头节点 head &#xff0c;请你判断该链表是否为回文链表。如果是&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 示例一&#xff1a; 输入&#xff1a;head [1,2,2,1] 输出&#xff1a;true示例二&#xff1a; 输入…

深度学习入门(4)

神经网络的构建 import numpy as np import matplotlib.pyplot as plt def sigmoid(x):return 1/(1np.exp(-x)) def identity_function(x):#恒等函数return x def init_network():#进行权重和偏置的初始化&#xff0c;并保存到字典中network{}network[W1]np.array([[0.1,0.3,0…

Pytorch 学习路程 - 1:入门

目录 下载Pytorch 入门尝试 几种常见的Tensor Scalar Vector Matrix AutoGrad机制 线性回归尝试 使用hub模块 Pytorch是重要的人工智能深度学习框架。既然已经点进来&#xff0c;我们就详细的介绍一下啥是Pytorch PyTorch 希望将其代替 Numpy 来利用 GPUs 的威力&…

HCIP-Datacom-ARST必选题库_01_ACL【7道题】

一、单选 1.下面是一台路由器的部分配置,关于该配置描述正确的是&#xff1a; 源地址为1.1.1.1的数据包匹配第一条ACL语句rule 0,匹配规则为允许 源地址为1.1.1.3的数据包匹配第三条ACL语句rule 2,匹配规则为拒绝 源地址为1.1.1.4的数据包匹配第四条ACL语句rule 3,匹配规则为允…

轻松学会微信小程序开发(一)

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…