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

由于工作环境是局域网，对于插件的安装有限制，所以排除了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 导出多页pdf, window.print()实现的更多相关文章

  1. vue实现word，pdf文件的导出功能

    vue实现word或pdf文档导出的功能,我的项目是:后端返回一个文档流(下图),然后前端对文档流做处理进行下载,代码如下: import axios from 'axios'; axios.get( ...

  2. 用window.print()打印如何去掉页眉和页脚

    用window.print()打印如何去掉页眉和页脚 2007-07-12 11:44:52|  分类: javascript 知识|举报|字号 订阅     <script language= ...

  3. window.print() 去掉页眉页脚及打印链接【转载】

    页面中添加样式: <style media="print"> @page { size: auto; /* auto is the initial value */ m ...

  4. 导出excel和PDF小结 vba

    最近接触了一个关于Access工具的项目,所以整理下需要使用的方法. 功能要求简介: 1.将数据表中的数据导出到excel和PDF 2.并根据某个字段名称分sheet输出. 3.无模板方式 方案简介: ...

  5. window.print打印方法实现

    vue中使用window.print打印效果 项目要求 打印每页有10行表格,如果接口数据没有十个显示10行 效果图 第一页 第二页 子组件 <template> <div> ...

  6. 纯前端html导出pdf--分页+不分页--html2canvas+jsPDF

    前言 最近在项目中,有一个导出pdf功能,需要纯前端来实现,调研了多种pdf导出方式,最终决定使用html2canvas+jsPDF来实现需求. 本文就简单介绍一下html2canvas+jsPDF导 ...

  7. 使用window.print实现网页打印

    Window.print()方法用于在浏览器中打印当前窗口的内容,如果想要打印当前窗口中指定部分的内容的话需要其他的一些特殊的处理; Demo: <html> <head> & ...

  8. Web window.print() 打印

    web打印 window.print() 我只给出比较有效的,方便的打印方法,有些WEB打印是调用ActiveX控件的,这样就需要用户去修改自己IE浏览器的Internet选项里的安全里的Active ...

  9. window.print()打印页面指定内容（使用iframe保证原页面不失效）

    使用window.print()时会出现两个问题: (1)直接使用window.print() 打印的是整页内容-->无法实现打印指定区域 (2)打印时替换body中的内容,打印完成后再替换回来 ...

  10. window.print()小知识

    window.print()  实际上,是浏览器打印功能菜单的一种程序调用.与点击打印功能菜单一样,不能精确分页,不能设置纸型,套打的问题更加无从谈起,只不过,可以让用户不用去点菜单,直接点击网页中的 ...

随机推荐

  1. Clickhouse执行处理查询语句（包括DDL，DML）的过程

    Clickhouse执行处理查询语句(包括DDL,DML)的过程 总体过程 启动线程处理客户端接入的TCP连接: 接收请求数据,交给函数executeQueryImpl()处理: executeQue ...

  2. win11不改时区，安装 android 子系统，运行android app

    win11开启虚拟机平台 下载安卓子系统 打开https://store.rg-adguard.net , 在URL中输入:https://www.microsoft.com/store/produc ...

  3. 聊聊x86计算机启动发生的事？

    大家好,我是呼噜噜,最近在看linux早期内核0.12的源码,突然想到一个困扰自己好久的问题:当我们按下电源键,计算机发生了什么?神秘地址0x7C00究竟是什么?操作系统又是如何被加载到硬件中的?带着 ...

  4. 一键部署Docker中间件简单方法-redis为例

    一键部署Docker中间件简单方法-redis为例 背景 想能够快速部署一些中间件. 写文档虽然可以, 但是总会有人问, 能够一键部署应该最好不过. 下载以及导出镜像 docker pull redi ...

  5. [转帖]TiDB BR 备份至 MinIO S3 实战

    https://tidb.net/blog/3a31d41d#3.%E9%83%A8%E7%BD%B2%20MinIO%20S3%20%E5%8F%8A%E5%A4%87%E4%BB%BD%E6%81 ...

  6. [转帖]探索惊群 ④ - nginx - accept_mutex

    https://wenfh2020.com/2021/10/10/nginx-thundering-herd-accept-mutex/   由主进程创建的 listen socket,要被 fork ...

  7. 【转帖】10个Linux 系统性能监控命令行工具

    引言: 系统一旦跑起来,我们就希望它能够稳定运行,不要宕机,不出现速度变慢.因此,对于Linux 系统管理员来说每天监控和调试 Linux 系统的性能问题是一项繁重却又重要的工作.监控和保持系统启动并 ...

  8. Linux 下面删除指定日期之前文件的办法

    1. Linux 下面最近有一个需求 需要只更新2020年4月10号之后补丁的需求 2. rsync 能够拉取所有的补丁文件  没找到能够按照日期进行拉取的办法. 所以想了一个折中的办法 先拉取 再按 ...

  9. 京东云RASP云原生安全免疫创新实践

    作者:京东云 刘一鑫 1 背景 随着网络攻击事件整体呈上升趋势,应用作为网络入口承载着大量业务和流量,因此成为了安全的重灾区.黑客往往借助自动化的工具以及安全漏洞,对Web进行漏洞扫描和探测,进而利用 ...

  10. 装elemnetUI中用户头像上传

    组件.vue 在使用的时候,入股想出现边框.要自己在添加一个类哈 自己还有在添加一个哈 .avatar-uploader { border:1px solid red; width: 178px; h ...