当前位置: 首页 > news >正文

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

效果

在这里插入图片描述

预期效果

在这里插入图片描述

 //避免分页被截断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的domlet 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.offsetTopif (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.lryc.cn/news/135847.html

相关文章:

  • 数据结构——队列(C语言)
  • WGS84地球坐标系,GCJ02火星坐标系,BD09百度坐标系简介与转换 资料收集
  • 【面试题】前端面试复习6---性能优化
  • 隧道HTTP具备的条件
  • 部署FTP服务(二)
  • 缓存的变更(JVM本地缓存->Redis分布式缓存)
  • springMVC Unix 文件参数变更漏洞修复
  • 【LeetCode】494.目标和
  • KaiwuDB 荣获哈佛商业评论 2023“高能韧性团队奖”
  • 删除ubuntu开始菜单中的图标
  • 信息系统项目管理基础知识学习笔记 - IT 治理基础 - IT治理的驱动因素
  • 8月21-22日上课内容 第一章 MySQL数据库初始
  • 等级查询发布助手
  • 手搭手入门MyBatis-Plus
  • AI 绘画Stable Diffusion 研究(十一)sd图生图功能详解-美女换装
  • Servlet+JDBC实战开发书店项目讲解第14讲:订单管理功能
  • 基于Linux操作系统中的shell脚本
  • 8.22笔记
  • 【以太网通信】RS232 串口转以太网
  • 分享两道Java面试的算法上机题目(后续会持续补充更多)
  • 如何使用CSS实现一个平滑过渡效果?
  • 网络常见设备
  • 数据结构与算法:通往编程高地的必修课(文末送书)
  • python小脚本——批量将PDF文件转换成图片
  • cUrl的介绍和基本使用
  • ONLYOFFICE协作空间服务器如何一键安装自托管私有化部署
  • java分析公司名称:AI智能工具助力提取地名、品牌名、行业名
  • php 二维数组排序
  • postgresql 性能调优
  • 派森 #P128. csv存json格式