首页 > 其他分享 >vue 导出多页pdf, window.print()实现

vue 导出多页pdf, window.print()实现

时间:2024-02-06 11:56:19浏览次数:32  
标签:vue dom 截断 window print pdf

如果你对分页打印没思路,而网上的现成方案又不适合,不妨进来看看,也许会对你有帮助.

由于工作环境是局域网,对于插件的安装有限制,所以排除了jspdf + html2canvas的实现方式;采用window.print(),就会涉及到表格的截断、文本的截断等问题,而且需求要求每一页的pdf都有固定的页眉页尾,这里好像...好像又行不通了...

但是能不能通过一种方式,把每页的内容都计算出来,然后再打印。顺着这种思路,首先需要计算页面中所有dom元素的高度,有没有一种方法可以循环获取当前页面所有dom的高度呢? vue中json可以循环、数组可以循环,既然ast语法书和vNode(虚拟dom)都可以渲染成真实dom, 那就可以使用一个json来渲染当前页面,就可以计算所有dom的高度, 最终生成一个二维数组来打印。

代码在下面的链接中,里面包括表格的封装、表格的截断的计算方式、文本的截断的计算方式等,兼容:ie10、chrome

 链接: https://pan.baidu.com/s/1_WY7mwvBlvc1woNZHrNV3A?pwd=xgs1 提取码: xgs1 

标签:vue,dom,截断,window,print,pdf
From: https://www.cnblogs.com/zzAyy/p/18009198

相关文章

  • windows栈回溯功能示例——漏洞利用检测
    利用windows栈回溯如何进行漏洞利用检测?利用Windows栈回溯进行漏洞利用检测是一个复杂的过程,它通常涉及监控可疑或危险函数的调用,并分析调用这些函数的上下文来判断是否存在潜在的漏洞利用尝试。这种方法需要深入理解漏洞利用技术、危险函数的正常与异常使用模式,以及堆栈回溯的技......
  • Windows和浏览器的命令与快捷键
    目录一、运行常用命令二、cmd常用命令(cmd的命令是运行的命令的超集)三、Windows快捷键1、Win键2、Ctrl键3、Alt键4、F键四、浏览器快捷键五、关闭Windows防火墙、安全中心和自动更新一、运行常用命令1.基本命令cmd打开命令提示符(cmd命令行控制台)control......
  • vue2中el-tree组件实现双击树的节点来修改节点名称
    目标在没双击之前,树的节点是文本样式。在双击之后,节点位置变成输入框形式,原节点的名称显示在输入框中,可以进行修改。修改完毕之后,当输入框失去焦点的时候,输入框消失,又变成原本的文本样式,并且显示的是修改后的节点名称。添加一个树<template><div><el-tree......
  • Windows下如何使用 Sublime Text 4 配置 C/C++ 环境(使用LSP-clangd)
    1软件安装1.1SublimeText4安装及PackageControl安装略,请自行百度/必应/谷歌。1.2Clang环境安装1.2.1Clang下载在LLVMMinGW下载最新版Clang编译器,此处应根据个人电脑系统及版本选择,本文选择llvm-mingw-20231128-ucrt-x86_64.zip,后续文件名将以此为例。各版本......
  • vue2 bpmn添加属性栏
    安装"bpmn-js-properties-panel":"^1.6.1"引入样式库import{ BpmnPropertiesPanelModule, BpmnPropertiesProviderModule,}from"bpmn-js-properties-panel";import"bpmn-js-properties-panel/dist/assets/properties-panel.css"......
  • windows下部署Blynk服务器部署最新教学
    目录Step1.下载链接Step2.部署Step2.1软件安装及载入工程1.安装Intellij社区版正常安装即可2.下载maven并将其添加进环境变量Step1.下载链接链接:https://pan.baidu.com/s/1ysbAYhyxUGx1ZG3xNMdsAw?pwd=1fel提取码:1felStep2.部署Step2.1软件安装及载入工程1.安装Intel......
  • 【专题】2023年金融、保险、银行行业报告汇总PDF合集分享(附原数据表)
    原文链接:https://tecdat.cn/?p=35149原文出处:拓端数据部落公众号自中国提出双碳目标以来,可持续金融市场呈现出蓬勃发展的态势。这一发展趋势在多年来得到可持续金融战略咨询团队的支持和推动。同时,数字化转型的深入推进推动了新客户的增长,而中国的碳金融创新也成为市场关注的焦......
  • 【专题】2022全球汽车供应链核心企业竞争力白皮书报告PDF合集分享(附原数据表)
    报告专题链接:http://tecdat.cn/?p=31626原文出处:拓端数据公众号COVID-19疫情在全球范围内平息,制造业积极恢复,新颖的商业模式转型,恢复了全球零部件企业的收入规模和盈利能力。2019~2021年,中国零部件制造企业实现了连续3年的产量和利润增长。它们利用轨道旋转的机会,在电动化、......
  • 零基础入门Vue之影分身之术——列表渲染&渲染原理浅析
    听我说从条件渲染那一篇,我学习到了如何用Vue对dom节点根据条件显示但单单有条件还不够啊,有时候数据是一大坨一大坨的数据,如果Vue不提供咱要么使用“v-html”要么就没办法实现v-html又感觉太low了,Vue提供了另外的指令更好的实现,那便是:列表渲染列表渲染:v-for简单的列表渲染......
  • PowerShell是一种跨平台的任务自动化解决方案,包括命令行shell、脚本语言和配置管理框
    PowerShell是一种跨平台的任务自动化解决方案,包括命令行shell、脚本语言和配置管理框架。PowerShell提供了丰富的命令(称为cmdlet),可以用来执行许多Windows管理任务,包括但不限于用户和组管理、文件系统操作、进程和服务管理等。下面列举一些常见的net命令以及它们在PowerShell中的对......