vue页面转pdf后分页时文字被横向割裂

news2024/12/29 9:35:14

效果

在这里插入图片描述

预期效果

在这里插入图片描述

 //避免分页被截断
    async outPutPdfFn (id, title) {
      const _t = this;
      const A4_WIDTH = 592.28;
      const A4_HEIGHT = 841.89;
      // dom的id。
      let target = document.getElementById('pdf');
      let pageHeight = target.scrollWidth / A4_WIDTH * A4_HEIGHT;
      // 获取分割dom,此处为class类名为item的dom
      let lableListID = document.getElementsByClassName('item');
      // 进行分割操作,当dom内容已超出a4的高度,则将该dom前插入一个空dom,把他挤下去,分割
      for (let i = 0; i < lableListID.length; i++) {
        const currentItem = lableListID[i];
        let elToTop = document.getElementById('title').offsetTop + currentItem.offsetTop
        if (elToTop + currentItem.offsetHeight > pageHeight && elToTop < pageHeight) {
          let divParent = currentItem.parentNode; // 获取该div的父节点
          let newNode = document.createElement('div');
          newNode.className = 'emptyDiv';
          newNode.style.height = 8 + 'px';
          newNode.style.width = '100%';
          divParent.insertBefore(newNode, currentItem);
        }
      }
      await _t.$nextTick();
      _t.getPdf({
        id,
        title,
        backgroundColor: '#fff'
      }).then(base64 => {
        uni.postMessage({
          data: {
            pb: base64,
            name: title
          }
        })
        _t.navigateBack();
      })
    },

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

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

相关文章

Spring Boot 整合MyBatis(超详细)

&#x1f600;前言 本篇博文关于Spring Boot 整合MyBatis&#xff0c;希望你能够喜欢 &#x1f3e0;个人主页&#xff1a;晨犀主页 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是晨犀&#xff0c;希望我的文章可以帮助到大家&#xff0c;您的满意是我的动力&#x…

wazuh初次理解-8-23

一、wazuh配置&#xff1a; 1、进入官网下载OVA启动软件&#xff1a; Virtual Machine (OVA) - Installation alternatives 2、进入虚拟机进行配置&#xff1a; 3、登录提示&#xff1a; 4、将网络连接模式更改为NAT&#xff0c;否则不能上网&#xff1b; 4、重启网络&#…

Rabbitmq配置调优

1、参数调优 queue_index_embed_msgs_below&#xff1a; 控制消息的存储位置。是独立存储到msg_store中&#xff0c;还是嵌入消息的索引一并存储。默认值是4096&#xff08;字节&#xff09;&#xff0c;即小于4KB的消息会嵌入到消息索引中一并存储。**注&#xff1a;**4KB包括…

电气器件系列四十二:线性直流稳压电源

线性稳压电源是比较早使用的一类直流稳压电源。根据调整管的工作状态&#xff0c;我们常把稳压电源分成两类&#xff1a;线性稳压电源和开关稳压电源。线性稳压直流电源的特点是&#xff1a;输出电压比输入电压低&#xff1b;反应速度快&#xff0c;输出纹波较小&#xff1b;工…

ast在python架构中的使用

AST学习 AST简介&#xff1a; AST(Abstract syntac tree)是编译原理中的概念&#xff0c;是对源代码语法结构的一种抽象表示&#xff0c;它以树的形式表现编程语言的语法结构&#xff0c;树上的每个节点都表示源代码中的一种结构。 下面的代码展示了以demo.py中的ast语法&…

实景无人直播小白如何操作?抖音/直播带货/实况

在当今数字娱乐领域实景无人直播系统成为了一种备受关注的娱乐方式。这种系统能够将真实场景以实时视频的形式传输到用户终端&#xff0c;让用户可以身临其境地观赏各种精彩的场景。本文将深入探讨实景无人直播系统的操作指南&#xff0c;旨在为读者提供专业性、思考深度和逻辑…

简单版的数组实现哈希表

package com.wei.mybatisflex;import java.util.ArrayList; import java.util.List;/*** 用数组实现哈希表*/ public class ArrayToHash {/*** 键值对定义*/class Pair{private int key;private String val;public Pair(int key, String val) {this.key key;this.val val;}}p…

java八股文面试[数据结构]——HashMap和HashTable区别

HashMap源码中的重要常量 DEFAULT_INITIAL_CAPACITY: HashMap的默认容量&#xff0c;16 MAXIMUM_CAPACITY&#xff1a; HashMap的最大支持容量&#xff0c;2^30 TREEIFY_THRESHOLD&#xff1a;Bucket中链表长度大于该默认值&#xff0c;转化为红黑树。 UNTREEIFY_THRESHOLD…

无涯教程-PHP - 返回类型声明

在PHP 7中&#xff0c;引入了一个新函数返回类型声明&#xff0c;返回类型声明指定函数应返回的值的类型&#xff0c;可以声明返回类型的以下类型。 intfloatbooleanstringinterfacesarraycallable 有效返回类型 <?phpdeclare(strict_types1);function returnIntValue(i…

Java课题笔记~Element UI

Element&#xff1a;是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库&#xff0c;用于快速构建网页。 Element 提供了很多组件&#xff08;组成网页的部件&#xff09;供我们使用。例如 超链接、按钮、图片、表格等等~ 如下图左边的是我们编写页面看到的按钮&#…

如何基于亚马逊云科技打造高性能的 SQL 向量数据库 MyScale

MyScale 是一款完全托管于亚马逊云科技、支持 SQL 的高效向量数据库。MyScale 的优势在于&#xff0c;它在提供与专用向量数据库相匹敌甚至优于的性能的同时&#xff0c;还支持完整的 SQL 语法。在这篇文章中&#xff0c;我们将阐述 MyScale 是如何借助亚马逊云科技的基础设施&…

攻防世界-simple_js

原题 解题思路 js就看源代码&#xff0c;pass是数字&#xff0c;下面还有一串十六进制的编码。 进制转换就是&#xff0c;也是一串数字&#xff0c;那把这两串数字都拿去转ASCII码。 s1 [55,56,54,79,115,69,114,116,107,49,50] s2 [70,65,85,88,32,80,65,83,83,87,79,82,68…

Linux TCP编程流程

一、TCP编程流程 TCP 提供的是面向连接的、可靠的、字节流服务。TCP的服务器端和客户端编程流程如下&#xff1a; 1.socket()方法 用来创建一个套接字&#xff0c;有了套接字就可以通过网络进行数据的收发。这也是为什么进行网络通信的程序首先要创建一个套接字。创建套接字时…

SqlServer2019—解决SQL Server 无法连接127.0.0.1的问题

1、打开SQL Server 2019配置管理器 2、SQL Servere 网络配置(启用 Named Pipes 和 TCP/IP) 3、修改TCP/IP协议(右键选择属性—IP地址)&#xff0c;具体如下图所示&#xff1a; 4、重启SQL Server服务

QT通过ODBC连接GBase 8s数据库(Windows)示例

示例环境&#xff1a; 操作系统&#xff1a;Windows 10 64位数据库及CSDK版本&#xff1a;GBase 8s V8.8_3.0.0_1 64位QT&#xff1a;5.12.0 64位 1&#xff0c;CSDK安装及ODBC配置 1.1&#xff0c;免安装版CSDK 下载免安装版的CSDK驱动&#xff0c;地址&#xff1a;https:…

盛最多水的容器——力扣11

int maxArea(vector<int>& height) {int l=0, r=height.size()

企业如何通过CRM系统获得更多商机?

商机是销售的基础&#xff0c;如何获取更多的商机&#xff0c;是每个企业都关心的问题。通过传统的营销方式来吸引潜在客户&#xff0c;往往成本高、效果低、难以管理。那么有没有一种方式&#xff0c;既节省时间和成本&#xff0c;又可以获取更多商机&#xff1f;当然有&#…

AUTOSAR配置与实践(配置篇) 如何条件控制PDU外发

AUTOSAR配置与实践(配置篇)如何条件控制PDU外发 一、需求1.1 需求简要分析1.2 需求进一步分析二、流程实现和具体配置一、需求 需要针对特定的PDU(外发)进行条件控制,这里要通过不同配置字进行PDU是否外发的控制 1.1 需求简要分析 正常PDU分组时分为两组,接收报文组和…

Javase(中)

一、面向对象进阶 1、static&#xff08;静态是共享的&#xff09; 静态变量 特点&#xff1a;修饰的成员变量被该类的所有对象共享 静态方法 静态方法只能调用静态的东西&#xff0c;非静态方法可以调用所有 static 的注意事项 static的内存图 重识main方法 2、工具类、测…

23.8.11.用apifox端口号与java接口链接的时候少了个/导致连接不成功。

用apifox端口号与java接口链接的时候少了个/导致连接不成功。 原因分析&#xff0c;因为拼接的位置少了个/ 如图所示