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

news2024/12/27 13:07:02

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);
 },
.......



在这里插入图片描述

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

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

相关文章

Barnes-Hut t-SNE:大规模数据的高效降维算法

在数据科学和分析中&#xff0c;理解高维数据集中的底层模式是至关重要的。t-SNE已成为高维数据可视化的有力工具。它通过将数据投射到一个较低维度的空间&#xff0c;提供了对数据结构的详细洞察。但是随着数据集的增长&#xff0c;标准的t-SNE算法在计算有些困难&#xff0c;…

Laravel 6 - 第十五章 验证器

​ 文章目录 Laravel 6 - 第一章 简介 Laravel 6 - 第二章 项目搭建 Laravel 6 - 第三章 文件夹结构 Laravel 6 - 第四章 生命周期 Laravel 6 - 第五章 控制反转和依赖注入 Laravel 6 - 第六章 服务容器 Laravel 6 - 第七章 服务提供者 Laravel 6 - 第八章 门面 Laravel 6 - …

数据结构(七)---树

目录 一.树的基本概念 二.树的性质 三.二叉树 1.二叉树的基本概念 2.特殊的二叉树 &#xff08;1&#xff09;满二叉树 &#xff08;2&#xff09;完全二叉树 &#xff08;3&#xff09;二叉排序树 &#xff08;4&#xff09;平衡二叉树 3.二叉树的性质 4.完全二叉树…

SpringBoot测试报错:Failed to load ApplicationContext(pom文件加载完,版本号依然标红)

这里写自定义目录标题 问题描述解决方案 问题描述 在快速入门Mybatis的程序中 加载完Maven依赖之后 想执行下面的测试程序 结果报错: Unable to instantiate org.mybatis.spring.boot.autoconfigure.MybatisDependsOnDatabaseInitializationDetector [org.springframework.…

WEB攻防-ASP中间件IIS文件上传解析安全漏洞

漏洞原理&#xff1a; 基于文件 IIS6.0默认不解析;号后面的内容&#xff0c;例如1.asp;.jpg会当成1.asp解析&#xff0c;相当于分号截断。 基于文件夹 IIS6.0会将/*.asp/文件夹下的文件当成asp解析。 案例&#xff1a; 写一个木马文件&#xff0c;并改为jpg后缀 GIF89agif8…

APP自定义身份证相机(Android +iOS)

基本上同时兼容安卓和苹果的插件都需要付费&#xff0c;这里我找了2个好用的免费插件 1.仅支持安卓&#xff1a;自定义身份证相机&#xff08;支持蒙版自定义&#xff09;&#xff0c;内置蒙版&#xff0c;照片预览&#xff0c;身份证裁剪 - DCloud 插件市场、 2.支持iOS(已测…

MySQL简解

文章目录 1. MySQL框架2. 执行流程2.1. 连接池&#xff1a;2.2. SQL 前端(SEVER)2.2.0. 查询缓存2.2.1. SQL 接口2.2.2. SQL 解析器2.2.3. SQL 执行器2.2.4. INNODB 中读写操作 2.3. 数据的保存形式 3.其他重要概念3.1. 索引3.1.1. 简单概念3.1.2. 索引优化&#xff1a;1. Usin…

用这个方法,让你轻松从零搭建产品知识库

在市场竞争日益激烈的今天&#xff0c;一个系统化的产品知识库对于企业的重要性不言而喻。它不仅可以帮助团队成员快速掌握产品信息&#xff0c;提升服务效率&#xff0c;还能为客户提供及时准确的产品支持。那么&#xff0c;怎样才能从零开始&#xff0c;轻松搭建起一个合适的…

计算机服务器中了devicdata勒索病毒怎么处理,devicdata勒索病毒解密工具流程

随着网络技术的不断发展与应用&#xff0c;越来越多的企业离不开网络&#xff0c;通过网络可以开展各项工作业务&#xff0c;网络也为企业的生产运营提供各类极大便利&#xff0c;大大提高了生产效率&#xff0c;但网络在为企业提供便利的同时&#xff0c;也为企业的数据安全带…

html网页在展示时,监听网络是否断网,如果断网页面暂停点击响应

序言&#xff1a; 集合百家之所长&#xff0c;方著此篇文章&#xff0c;废话少说&#xff0c;直接上代码&#xff0c;找好你的测试网页&#xff0c;进行配置&#xff0c;然后复制粘贴代码&#xff0c;就可以了。 1.css文件内容 #newbody{display: none;width: 100%;height: 9…

Linux系统-服务器硬件及RAID配置

目录 一.服务器 1.服务器与普通计算机的区别 2.功能 3.分类&#xff08;按照产品形态分&#xff09; 4.架构&#xff08;按照指令集类型&#xff09; 5.相关指令 5.1.查看服务器CPU的信息 5.2.查看服务器内存的信息 二.RAID磁盘阵列&#xff08;Redundant Array …

2024.04.24记录所解决的问题

一解决了使用VM虚拟机作为dubbo-admin服务器提供者在浏览器访问失败问题 一开始在服务器上面即使运行了zookeeper和dubbo-admin容器都没有访问出dubbo-admin的界面管理器。查看了其他映射端口以及注册中心的地址等等其他参数&#xff0c;都不行&#xff0c;然后就一直没有去处…

基于小程序实现的查寝打卡系统

作者主页&#xff1a;Java码库 主营内容&#xff1a;SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app等设计与开发。 收藏点赞不迷路 关注作者有好处 文末获取源码 技术选型 【后端】&#xff1a;Java 【框架】&#xff1a;ssm 【…

面试ssss

响应式布局 响应式布局是一种设计和开发网页的方法&#xff0c;使网页能够适应不同的设备和屏幕尺寸&#xff0c;提供更好的用户体验。它通过使用媒体查询&#xff08;Media Queries&#xff09;和弹性布局&#xff08;Flexbox&#xff09;等技术&#xff0c;根据设备的特性和…

【Django】django.core.exceptions.AppRegistryNotReady: Apps aren‘t loaded yet.

其中django后台manage.py入口程序报错&#xff0c;检索很多问题解决方案&#xff0c;这里记录下个人问题原因 1.django启动异常问题详情 django.core.exceptions.AppRegistryNotReady: Apps aren’t loaded yet. 2.问题原因 Python第三方包安装版本不一致或缺少依赖包&…

cdo 修改 calendar 为标准的格式

使用ncl脚本时出现警告&#xff1a;day_of_year: illegal calendar proleptic_gregorian 其原因是读取的降水nc文件是我手动合并生成&#xff0c;所以时间的calendar不是很标准&#xff0c;数据信息如下所示&#xff0c;可以发现Calendar是proleptic_gregorian&#xff0c;这…

互联网盲盒小程序模式,入局市场的渠道选择

近年来&#xff0c;盲盒吸引了无数的消费者&#xff0c;还打造了“万物皆可盲盒”的市场&#xff0c;成为了当下拥有巨大发展前景的行业之一&#xff01;当然&#xff0c;盲盒市场除了吸引消费者外&#xff0c;还获得了众多商家和创业者的青睐。 盲盒作为一种娱乐消费方式&…

C++ | Leetcode C++题解之第42题接雨水

题目&#xff1a; 题解&#xff1a; class Solution { public:int trap(vector<int>& height) {int n height.size();if (n 0) {return 0;}vector<int> leftMax(n);leftMax[0] height[0];for (int i 1; i < n; i) {leftMax[i] max(leftMax[i - 1], he…

linux 守护进程的实现

文章目录 1. 守护进程及实现步骤2. 使用fork 方式创建守护进程3. 使用daemon 函数创建 1. 守护进程及实现步骤 特点&#xff1a; 长期运行&#xff1a;守护进程是一种生存期很长的一种进程&#xff0c;它们一般在系统启动时开始运行&#xff0c;除非强行终止&#xff0c;否则…

《QT实用小工具·三十八》QT炫酷的菜单控件

1、概述 源码放在文章末尾 非常飘逸的 Qt 菜单控件&#xff0c;带有各种动画效果&#xff0c;用起来也十分方便。 无限层级&#xff0c;响应键盘、鼠标单独操作&#xff0c;支持单快捷键。 允许添加自定义 widget、layout&#xff0c;当做特殊的 QDialog 使用。 项目demo演示…