打印html所有标签,js 打印标签里的所有内容（带分页）

是什么

利用了jspdf和html2canvas两个插件实现的，把标签内的内容转成canvas再进行打印出pdf的一项功能。

为什么

利用JS满足某些打印pdf的场景

怎么做

最简单demo

安装插件

npm i html2canvas -S

npm i jspdf -S

加入工具函数(个人习惯放在项目的util目录下)

引入两个插件，原理就是通过document.querySelector获取当前dom下的内容转换成canvas的内容，再执行打印成PDF的方法。判断的语句是用于判断当前canvas的内容是否超出一页A4纸的高度，否则就自动往下分页。

import html2Canvas from 'html2canvas'

import JsPDF from 'jspdf'

export default {

getPdf: function(dom, title = 'download') {

html2Canvas(document.querySelector(dom), {

allowTaint: true

}).then(function(canvas) {

let contentWidth = canvas.width

let contentHeight = canvas.height

let pageHeight = contentWidth / 592.28 * 841.89

let leftHeight = contentHeight

let position = 0

let imgWidth = 595.28 // A4纸宽度

let imgHeight = 592.28 / contentWidth * contentHeight

let pageData = canvas.toDataURL('image/jpeg', 1.0)

let PDF = new JsPDF('', 'pt', 'a4')

if (leftHeight < pageHeight) {

PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)

} else {

while (leftHeight > 0) {

PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)

leftHeight -= pageHeight

position -= 841.89

if (leftHeight > 0) {

PDF.addPage()

}

PDF.save(title + '.pdf')

})

}

未解决

分页的内容如何分配，防止切割当前的页面内容

canvas转PDF的失真(模糊)

打印html所有标签,js 打印标签里的所有内容（带分页）相关推荐

简单易用的JQuery网页内容打印插件——jQuery.print.js
1. 官方网址下载jQuery.print.js.配置参数介绍.官方Demo 2. 简介: jQuery.print是一款简单易容且功能强大的网页内容打印jQuery插件.该网页打印插件可以打印指定 ...
html粘贴excel内容,如何用JS解析剪切板里的excel内容
前言这次记录的是昨晚一个想法:把excel内容复制到剪切板并转成自己想要的json格式,核心是要把excel内容转json,这部分主要看excel的格式和json如何业务的映射,不展开.倒是通过实践 ...
php打印预览jquery,JS实现浏览器打印、打印预览示例
目前正在做浏览器端采用JS方式实现打印这么一个功能,JS打印实现的方法很多,但是兼容各个浏览器实现打印预览的功能有些棘手,现将实现的内容及遇到的问题记录下来,希望有大牛看到所提的问题后可以给予解答,在 ...
html+input改变图标,JS Input里添加小图标的两种方法
我们在做网页的时候,经常需要在input里面添加小图标,那么这里就介绍比较常见的两种方法. 将小图标当做input的背景来插入,直接上代码吧: Box{ height: 50px; backgroun ...
html正则表达式怎么写用户名非空,js通过正则匹配没有内容的空标签
js 如何正则匹配没有内容的空标签并移除掉? 例如等等正则 /]*?)?>\s*?/ig html=' '+ '\n '+ '\n'+ '\n '+ '\n '+ '\n '+ '\n'+ ...
突发奇想想实现js循环里停顿一秒再循环的功能
突发奇想想实现js循环里停顿一秒再循环的功能. 首先用了两种定时器,但是循环还是一瞬间结束. 最后还是放弃,用了另一种思路. // An highlighted blocki: 0,///我是用的vu ...
html密码框怎么添加小图标,JS Input里添加小图标的两种方法
我们在做网页的时候,经常需要在input里面添加小图标,那么这里就介绍比较常见的两种方法. 方法一将小图标当做input的背景来插入,直接上代码吧: *{ margin: 0; padding: 0 ...
html5读取剪切板内容,实践笔记：js解析剪切板里的excel内容
这次记录的是昨晚一个想法:把excel内容复制到剪切板并转成自己想要的json格式,核心是要把excel内容转json,这部分主要看excel的格式和json如何业务的映射,不展开.倒是通过实践,收获 ...
如何使用 multiparty 工具库在 Node.js 应用里解析 multipart form-data 格式的请求
我们使用 form 和 input 控件上传文件到服务器,服务器采取 Node.js 应用接收客户端上传的文件.可以使用 multiparty 这个库文件,解析从客户端提交的本地文件.完整的源代码如下 ...

打印html所有标签,js 打印标签里的所有内容（带分页）

打印html所有标签,js 打印标签里的所有内容（带分页）相关推荐

最新文章

热门文章