首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

前端生成pdf,jspdf+html2Canvas的使用(vue)

本文主要使用 jspdf+html2Canvas 实现html转pdf。...jspdf不支持中文 ,所以需要配合html2Canvas,先生成图片再转为pdf,就不用考虑中英文问题,但是会存在 分页 和 样式不友好 的问题 一、前期准备 image 1、安装jspdf: npm...install jspdf --save 2、安装html2Canvas: npm install --save html2canvas 二、代码 1. html 这里使用 iframe 嵌套需要转成...pdf的html文件; 如果pdf内容是动态的,可以将html丢给后端,让后端使用freemarker ftl模板语言或是啥其他的模板语言更改即可,然后将整个html作为字符串传给前端,前端再使用iframe...//内容图片这里不需要留白的距离 var pageData = canvas.toDataURL("image/jpeg", 1.0); var pdf = new JsPDF

5.8K00
您找到你想要的搜索结果了吗?
是的
没有找到

html页面导出为pdf(jsPDF、iText、wkhtmltopdf)

调研对象 优点 缺点 分页 图片 表格 链接 中文 特殊字符、样式 导出样例 备注 jsPDF 1、整个过程在客户端执行(不需要服务器参与),调用简单 1、生成的pdf为图片形式,且内容失真 支持 支持...一、html2canvas+jsPDF ---- 这种方式的原理是利用html2canvas遍历页面中的dom节点,渲染成canvas image,再用jsPDF把canvas image转化为pdf,...和html2canvas相关js): </script...还是放弃吧,毕竟网上很多页面都是不标准的~ 三、wkhtmltopdf ---- wkhtmltopdf是一个可以把html转为pdf的插件,有windows、linux等平台的版本,最大的特点就是使用简单...【 转载请注明出处——胡玉洋《html页面导出为pdf(jsPDF、iText、wkhtmltopdf)》】

6.5K10

Javascript 将 HTML 页面生成 PDF 并下载

文字生成PDF 使用方法如下: // 默认a4大小,竖直方向,mm单位的PDF var doc = new jsPDF(); // 添加文本‘Download PDF’ doc.text('Download..., 10, 10); doc.save('a4.pdf'); 图片生成PDF 使用方法如下: // 三个参数,第一个方向,第二个单位,第三个尺寸格式 var doc = new jsPDF('landscape...实例中,也有添加html的功能,但某些元素无法生成在pdf中,因此可以使用html2canvas + jsPDF的方式将页面转成pdf。...通过html2canvas将遍历页面元素,并渲染生成canvas,然后将canvas图片格式添加到jsPDF实例,生成pdf。...其实主要利用了jsPDF的两点: 超过jsPDF实例格式尺寸的内容不显示( varpdf=newjsPDF('','pt','a4');demo中就是a4纸的尺寸) addImage有两个参数可以控制图片在

4.1K20

Javascript 将 HTML 页面生成 PDF 并下载

文字生成PDF 使用方法如下: // 默认a4大小,竖直方向,mm单位的PDF var doc = new jsPDF(); // 添加文本‘Download PDF’ doc.text('Download..., 10, 10); doc.save('a4.pdf'); 图片生成PDF 使用方法如下: // 三个参数,第一个方向,第二个单位,第三个尺寸格式 var doc = new jsPDF('landscape...实例中,也有添加html的功能,但某些元素无法生成在pdf中,因此可以使用html2canvas + jsPDF的方式将页面转成pdf。...通过html2canvas将遍历页面元素,并渲染生成canvas,然后将canvas图片格式添加到jsPDF实例,生成pdf。...其实主要利用了jsPDF的两点: 超过jsPDF实例格式尺寸的内容不显示( varpdf=newjsPDF('','pt','a4');demo中就是a4纸的尺寸) addImage有两个参数可以控制图片在

3.1K10

Javascript 将 HTML 页面生成 PDF 并下载

文字生成PDF 使用方法如下: // 默认a4大小,竖直方向,mm单位的PDF var doc = new jsPDF(); // 添加文本‘Download PDF’ doc.text('Download..., 10, 10); doc.save('a4.pdf'); 图片生成PDF 使用方法如下: // 三个参数,第一个方向,第二个单位,第三个尺寸格式 var doc = new jsPDF('landscape...实例中,也有添加html的功能,但某些元素无法生成在pdf中,因此可以使用html2canvas + jsPDF的方式将页面转成pdf。...通过html2canvas将遍历页面元素,并渲染生成canvas,然后将canvas图片格式添加到jsPDF实例,生成pdf。...其实主要利用了jsPDF的两点: 超过jsPDF实例格式尺寸的内容不显示( varpdf=newjsPDF('','pt','a4');demo中就是a4纸的尺寸) addImage有两个参数可以控制图片在

2.3K30

jsPDF – 基于 HTML5 的强大 PDF 生成工具

jsPDF 是一个基于 HTML5 的客户端解决方案,用于生成各种用途的 PDF 文档。 使用方法很简单,只要引入 jsPDF 库,然后调用内置的方法就可以了。...曾经生成PDF都是服务器端代码的专利,在今天的这篇文章中,我们将介绍一个JavaScript类库 - jsPDF使用它能够帮助你使用前端脚本生成PDF文件,是不是很棒,试试吧!...支持互动的内容制作,例如,你可以输入文字或者数字,然后jsPDF帮助生成最后的PDF内容。 支持现代浏览器,如果是老式浏览器的话,可以很好的使用flash来实现兼容。...不过貌似支持Firefox不是很好,如果要查看演示,使用Chrome吧!...;doc.save('Test.pdf'); 使用示例 1、文本 12345678910111213141516171819 var doc = new jsPDF();  doc.text(20,

2.7K60

使用Voicemail实例

这不嘛,有一次客户就提出一个需求是部分分机需要开启语音留言功能,每个用户一个调听留言密码,最好是和分机注册密码关联起来(其实就是使用相同的密码)。...这部分本身的FreeSWITCH是支持的,有一点不同的是在客户的整个系统架构中FreeSWITCH前使用了一台kamailio作为代理,负责用户注册这部分功能。...lua脚本去实现这个功能,在这之前可以添加需要开通Voicemail的分机号到一个table中,路由处获取被叫号码,使用lua脚本去完成这部分功能。...并没有……,之前说过在FreeSWITCH之前是使用的代理负责了用户的注册,而且客户要求调听留言密码与注册密码一致(但是想想FreeSWITCH中每个用户单独的一个XML就头疼)。...如果各位对我们的XSWITCH有兴趣的话欢迎各位致电,联系方式如下: 电话:0535-6753997 邮箱:info@x‑y‑t.cn 在最后给各位说一下Voicemail如何使用中文提示及相关配置:

1.3K20

SynchronousQueue使用实例

仅当有足够多的消费者,并且总是有一个消费者准备好获取交付的工作时,才适合使用同步队列。...实例 public class SynchronousQueueExample { static class SynchronousQueueProducer implements Runnable...SynchronousQueue作为工作队列的前提下,客户端代码向线程池提交任务时,而线程池中又没有空闲的线程能够从SynchronousQueue队列实例中取一个任务,那么相应的offer方法调用就会失败...所以,使用SynchronousQueue作为工作队列,工作队列本身并不限制待执行的任务的数量。...SynchronousQueue实现上并不使用缓存空间。 使用SynchronousQueue的目的就是保证“对于提交的任务,如果有空闲线程,则使用空闲线程来处理;否则新建一个线程来处理任务”。

2K10

如何将HTML表格转换成精美的PDF

从右到左查看,第一个使用原生浏览器打印功能,第二个使用名为jsPDF的开源库,第三个使用另一个名为pdfmake的开源库,最后,第四个使用名为DocRaptor的付费服务。...jsPDF使用也相当简单。你可以创建一个新的 jsPDF 类的实例,给它一个你想导出的 HTML 内容的引用,然后提供任何其他附加的设置,如页边距大小或文档标题。...") .addEventListener("click", downloadPDFWithjsPDF); 在内部,jsPDF 使用了一个名为html2canvas.的库。...让我们看一下使用 jsPDF 的输出: 使用jsPDF导出的PDF 乍一看,这看起来还不错! PDF 包含我们漂亮的蓝色标题和条纹表行背景。它不包含浏览器打印方法所包含的任何多余页面元数据。...如果你需要对 PDF 输出进行更多的控制,那么你就需要使用一个库。 当涉及到基于 UI 中显示的 HTML 生成的单页内容时,jsPDF 就会大放异彩。

6.8K20

JMS实例(使用ActiveMQ)

使用ActiveMQ实现JMS实例 一、下载ActiveMQ: 二、JMS实例 1、创建基于Apache ActiveMQ5的springboot应用 2、配置ActiveMQ的消息代理地址: 3、定义消息...wrapper.exe或者activemq.bat) 然后,通过http://localhost:8161运行ActiveMQ的管理界面,管理员账号和密码默认为admin/admin,如图: 二、JMS实例...在该run方法中,使用JmsTemplate的send方法向目的地mydestination发送MyMessage的消息,也相当于在消息代理上定义了一个叫做mydestination的目的地。...run方法发送消息, * 当然完全可以使用控制器通过Web访问 */ @Override public void run(String... args) throws...在该类中使用@JmsListener注解不停地监听目的地mydestination是否有消息发送过来,如果有就获取消息。

59530
领券