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

由于工作环境是局域网，对于插件的安装有限制，所以排除了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. 3 分钟创建 Serverless Job 定时获取新闻热搜

    不用掏手机,不用登微博,借助 SAE 定时任务就可以实现每小时获取实时新闻热搜!SAE 场景体验火热开启中,参与还可领好礼! Job 作为一种运完即停的负载类型,在企业级开发中承载着丰富的使用场景.S ...

  2. Linux mknod命令详解

    Linux一切皆文件,系统与设备通信之前,要建立一个存放在/dev目录下的设备文件,默认情况下就已经生成了很多设备文件,有时候自己手动新建一些设备文件,这就会用到mknod. 语法格式:mknod[选 ...

  3. kafka 在 zookeeper 中保存的数据内容

    转载请注明出处: 1. 服务器上下载 kafka : wget https://archive.apache.org/dist/kafka/2.4.0/kafka_2.12-3.2.0.tgz 2.  ...

  4. 【日常踩坑】Debug 从入门到入土

    写代码难免遇到 bug,调试解决 bug 的快慢很影响开发的效率.本文主要是梳理并记录下个人经常用的调试方法(主要以 C/C++ 的 segment fault 为例) 分类 根据调试时机与 bug ...

  5. 2023-SWPU NSS秋季招新赛（校外赛道）Misc—我要成为原神高手WP

    1.题目信息 我是神里绫华的狗!!! 2.解题方法 有个genshin.h文件夹,打开看看发现里面是一堆文件夹0 1A 1A0等等,而且每个文件夹里面都有文件,0 1A 1A0...看着很眼熟,我们用 ...

  6. PHPCMS V9安装出现DNS解析失败的解决方法-不支持采集和保存远程图片

    目前因为phpcms官网停止解析后,很多人安装phpcms v9出现如下错误:     这是因为检测dns解析的域名是phpcms官网的域名,官网域名停止解析后肯定检测失败.解决方法如下:   打开/ ...

  7. 【水一篇】骚操作之net 6的winform启动的同时启动Net 6 WebApi【同一套代码】

    引言 有段时间没有写博客了,不知道写什么,加上最近一直在玩单片机方面的东西,所以有一些懈怠.首先呢,为什么会有这么一个问题,是在一个QQ群里,有看到有人提问,能不能在启动Winform的同时去启动一个 ...

  8. CentOS9上面使用rpm方式安装SQLServer2022的简单总结

    CentOS9上面使用rpm方式安装SQLServer2022的简单总结 下载需要的资料 下载CentOS9 Stream的安装介质 https://mirrors.bfsu.edu.cn/cento ...

  9. MySQL新增数据，修改数据，删除数据

    连接本地mysql语句 mysql -hlocalhost -uroot -proot DML-介绍 DML英文全称是:用来对数据库中表的数据记录进行 增 删 改 操作. 增加使用 insert 删除 ...

  10. 【小实验】javascript 能够表述的最大整数

    作者:张富春(ahfuzhang),转载时请注明作者和引用链接,谢谢! cnblogs博客 zhihu Github 公众号:一本正经的瞎扯 打开浏览器的控制台,开始输入数值: 输入:(16 位十进制 ...