页面分页打印,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%">
                  <div
                      ref="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'}">
      <riskReportPdf2
              style="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);
 },
.......



在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

用于车载T-BOX汽车级的RA8900CE

用于车载T-BOX等高精度计时的汽车级时钟模块RTC:RA8900CE.车载实时时钟芯片RA8900CE内置32.768Khz的晶体&#xff0c;实现年、月、日、星期、小时、分钟和秒精准计时。RA8900CE满足AEC-Q200认证&#xff0c;内置温补功能&#xff0c;保证实时时钟的稳定可靠&#xff0c;功耗低至…

X86与FPGA相结合,基于PIB的AI开发——人体姿态识别

人体姿态估计是计算机视觉领域中用于理解和分析人类行为的一个关键技术。它主要涉及到检测和识别图像或视频中人体的各个关键点&#xff0c;并预测这些关键点之间的空间关系&#xff0c;从而构建出人体的骨架模型。 本文将介绍基于PIB板的人体姿态估计案例。这是一个交互式的实…

CentOS-7部署mysql、clickhouse并通过普罗米修斯、grafna监控告警

一、准备工作 1、系统环境 所用镜像&#xff1a;CentOS-7-x86_64-DVD-2009.iso 2、涉及安装包 3、克隆4台虚拟机 用途IP主机名Prometneus服务器192.168.15.129master被监控服务器1192.168.15.133node1mysql、clickhouse、grafana服务器192.168.15.134node2被监控服务器219…

19 Debian如何配置DNS服务(1)缓存服务器

作者&#xff1a;网络傅老师 特别提示&#xff1a;未经作者允许&#xff0c;不得转载任何内容。违者必究&#xff01; Debian如何配置DNS服务&#xff08;1&#xff09;缓存服务器 《傅老师Debian小知识库系列之19》——原创 前言 傅老师Debian小知识库特点&#xff1a; 1、…

MySQL无法打开情况下读取frm文件的表结构

一、背景&#xff1a; 开发人员通过MySQL客户端工具&#xff0c;可以访问MySQL5.7.6&#xff0c;可以访问具体的DB&#xff0c;可以查看小写表的数据&#xff0c;但是无法查看大写表的数据&#xff0c;报错信息为“table does not exist”。 二、检查与分析&#xff1a; ssh登录…

网络安全主题纪录片

网络安全主题纪录片 文章目录 网络安全主题纪录片第四公民黑客帝国系列龙纹身女孩碟中谍系列虎胆龙威4匿名者终结者2&#xff1a;审判日东方快车谋杀案黑客国家公敌我是谁&#xff1a;没有绝对安全的系统黑客军团速度与激情系列十亿美元大劫案勒索软件的背后黑客的恐惧为什么网…

贪心算法-活动安排问题和背包问题

实验6贪心算法-活动安排问题和背包问题 实验目的&#xff1a; 理解贪心算法的基本思想运用贪心算法解决实际问题 实验内容&#xff1a; 采用贪心方法编程实现以下问题的算法 1.如何安排下列活动使得使用的活动场所最少&#xff0c;并给出具体的安排方法。 活动 a b c …

mybatis 生成器,是否功能实现,需写测试类

一、看视频步骤 请按视频流程走 mybatis-18-CSDN直播 二、视频报错 解决思路 网址&#xff1a; 使用配置 | MyBatis-Plus (baomidou.com) 添加代码&#xff1a; 效果图&#xff1a;√ Tests passed: 前面✔&#xff0c;表示正确。 1为最终结果

面包屑新玩法,ReactRouter+Ant Design实现动态渲染

在Ant Design中,可以通过Breadcrumb组件结合react-router库实现动态生成面包屑导航。具体步骤如下: 定义路由配置数据结构 我们需要在路由配置中添加额外的面包屑相关信息,例如面包屑标题、icon等。例如: const routes [{path: /,breadcrumbName: 首页},{path: /users,brea…

【笔试】03

FLOPS FLOPS 是 Floating Point Operations Per Second 的缩写&#xff0c;意为每秒浮点运算次数。它是衡量计算机性能的指标&#xff0c;特别是用于衡量计算机每秒能够执行多少浮点运算。在高性能计算领域&#xff0c;FLOPS 被广泛用来评估超级计算机、CPU、GPU 和其他处理器…

【macOS】M芯片安装windows10以及配置office

背景 M3芯片Macbook ProParallel Desktop19office word visio打算配置一个好用的笔记本&#xff0c;携带着尽快把论文的正文写完&#xff0c;macOS里面的word排版可能出错&#xff0c;所以像配置一个双系统&#xff0c;里面必然要有的是word和visio&#xff0c;其他没有要求 …

使用linux,c++,创作一个简单的五子棋游戏

#include <iostream> #include <vector> #include <unordered_map> using namespace std; // 棋盘大小 const int BOARD_SIZE 15; // 棋子类型 enum ChessType { EMPTY, BLACK, WHITE }; // 棋盘类 class ChessBoard { private: vect…

大数据学习第四天

文章目录 yaml 三大组件的方式交互流程hive 使用安装mysql(hadoop03主机)出现错误解决方式临时密码 卸载mysql (hadoop02主机)卸载mysql(hadoop01主机执行)安装hive上传文件解压解决版本差异修改hive-env.sh修改 hive-site.xml上传驱动包初始化元数据在hdfs 创建hive 存储目录启…

怎么选出一个95分的产品?选品的逻辑到底是什么?如何不选错

大家好&#xff0c;我是电商花花。 选品定生死。 做电商的应该都会听过这句话&#xff0c;可能有些商家也只是听听就过去&#xff0c;如果没有遇到选品的问题就很难感受到。 如果你体验到一款好的产品带来的流量红利&#xff0c;体验一次爆单&#xff0c;就会知道选出优质的…

Reactor 核心概念-响应式编程-003

🤗 ApiHug {Postman|Swagger|Api...} = 快↑ 准√ 省↓ GitHub - apihug/apihug.com: All abou the Apihug apihug.com: We build what we loveApiHug - API design Copilot - IntelliJ IDEs Plugin | MarketplaceReactor 核心库在: reactor-core, 实现。 引入 (gradl…

【头文件】对.h文件的理解

目录 &#x1f31e;1. 头文件的概念 &#x1f30a;1.1 头文件的由来 &#x1f30a;1.2 头文件的作用 &#x1f30a;1.3 在.h文件中实现函数也不会出错的原因 &#x1f31e;2. 简单示例 &#x1f30a;2.1 头文件addition.h &#x1f30a;2.2 头文件接口实现addition.cpp …

Leetcode 119 杨辉三角 II

目录 一、问题描述二、示例及约束三、代码方法一&#xff1a;递推方法二&#xff1a;线性递推 四、总结 一、问题描述 给定一个非负索引 rowIndex&#xff0c;返回「杨辉三角」的第 rowIndex 行。   在「杨辉三角」中&#xff0c;每个数是它左上方和右上方的数的和。   自我…

【JavaEE网络】深入理解Socket套接字及其在网络编程中的应用

目录 Socket套接字UDP VS TCP有连接 VS 无连接可靠传输 VS 不可靠传输面向字节流 VS 面向数据报 全双工 VS 半双工 UDP数据报套接字编程DatagramSocket APIDatagramPacket APIInetSocketAddress APIUDP回显客户端服务器服务器和客户端的工作流程UDP翻译客户端服务器 Socket套接…

轻松找回误删文件,告别企业数据丢失,如何有效利用teamOS二级回收站,提升数据管理效率

在数字化时代&#xff0c;我们越来越依赖电子文件来记录和管理重要信息。 然而&#xff0c;伴随着这种便利的同时&#xff0c;误删或恶意操作导致的文件丢失也成为了一个令人头疼的问题。 那么本文就来谈一谈&#xff0c;企业网盘如何解决误删、甚至恶意删除的问题。 可道云…

高效的数据采集如何促进企业发展?

大数据开启了一个大规模生产、分享和应用数据的时代&#xff0c;它给技术和商业带来了巨大的变化。麦肯锡研究表明&#xff0c;在医疗、零售和制造业领域&#xff0c;大数据每年可以提高劳动生产率0.5-1个百分点。大数据在核心领域的渗透速度有目共睹&#xff0c;然而调查显示&…