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

jsPDF 是一个基于 HTML5 的客户端解决方案,用于生成各种用途的 PDF 文档。

使用方法很简单,只要引入 jsPDF 库,然后调用内置的方法就可以了。

米扑科技项目用到了HHTML5生成PDF,原文详见米扑博客:

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

浏览器兼容性: 

IE 10, Firefox 3+, Chrome, Safari 3+, Opera,未来将兼容 IE 10 以下版本,对于 IE10 以下的版本会使用 Downloadify 来实现文件下载功能。

支持文件格式:

文本,数字,图形,图片,同时你可以自由的编辑标题或者其它类型元素。

曾经生成PDF都是服务器端代码的专利,在今天的这篇文章中,我们将介绍一个JavaScript类库 - jsPDF,使用它能够帮助你使用前端脚本生成PDF文件,是不是很棒,试试吧!

支持互动的内容制作,例如,你可以输入文字或者数字,然后jsPDF帮助生成最后的PDF内容。

支持现代浏览器,如果是老式浏览器的话,可以很好的使用flash来实现兼容。不过貌似支持Firefox不是很好,如果要查看演示,使用Chrome吧!

官网地址:http://jspdf.com https://parall.ax/products/jspdf

下载地址:https://github.com/MrRio/jsPDF

jquery生成pdf插件jsPDF

示例网址: http://www.jq22.com/jquery-info517

示例演示: http://www.jq22.com/yanshi517

在客户端JavaScript生成PDF文件。

创建您的第一个文档

看examples/basic.html例子。

123

var doc = new jsPDF();doc.text(20, 20, 'Hello world.');doc.save('Test.pdf');

使用示例

1、文本

12345678910111213141516171819

var doc = new jsPDF();  doc.text(20, 20, 'This is the default font.');  doc.setFont("courier");doc.setFontType("normal");doc.text(20, 30, 'This is courier normal.');  doc.setFont("times");doc.setFontType("italic");doc.text(20, 40, 'This is times italic.');  doc.setFont("helvetica");doc.setFontType("bold");doc.text(20, 50, 'This is helvetica bold.');  doc.setFont("courier");doc.setFontType("bolditalic");doc.text(20, 60, 'This is courier bolditalic.');

2、图片

123456789

// You'll need to make your image into a Data URL// Use http://dataurl.net/#dataurlmakervar imgData = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/4ge....../2Q==';  var doc = new jsPDF();  doc.setFontSize(40);doc.text(35, 25, "Octonyan loves jsPDF");doc.addImage(imgData, 'JPEG', 15, 40, 180, 180);

3、HTML

123456789101112131415

var doc = new jsPDF();  // We'll make our own renderer to skip this editorvar specialElementHandlers = {    '#editor': function(element, renderer){        return true;    }};  // All units are in the set measurement for the document// This can be changed to "pt" (points), "mm" (Default), "cm", "in"doc.fromHTML($('#render_me').get(0), 15, 15, {    'width': 170,    'elementHandlers': specialElementHandlers});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏zcqshine's blog

CodeRunner swift设置

443110
来自专栏

后端开源软件集合

缓存系统:memcached(group cache)、redis、mongodb、Couchbase(CouchDB、Membase、CouchOne) ht...

28090
来自专栏一个爱瞎折腾的程序猿

js实用方法记录-简单cookie操作

8620
来自专栏白驹过隙

RabbitMQ - TcpConnection析构引发的一次handshake_timeout

453130
来自专栏云计算教程系列

使用dig执行手动DNS查询

dig 是一个命令行DNS查询实用程序,允许您诊断域名解析问题。如果您没有域名,建议您先去这里注册一个域名,将域名解析到您的服务器,您可以使用腾讯云云解析进行快...

42030
来自专栏微信公众号:Java团长

消息中间件企业级应用

众所周知,消息中间件是大型分布式系统中不可或缺的重要组件。它使用简单,却解决了不少难题,比如异步处理,系统藕合,流量削锋,分布式事务管理等。实现了一个高性能,高...

23610
来自专栏salesforce零基础学习

salesforce 零基础学习(六十二)获取sObject中类型为Picklist的field values(含record type)

本篇引用以下三个链接: http://www.tgerm.com/2012/01/recordtype-specific-picklist-values.htm...

21690
来自专栏编程一生

一个高性能、轻量级的分布式内存队列系统--beanstalk

21620
来自专栏菩提树下的杨过

ActiveMQ笔记(6):消息延时投递

在开发业务系统时,某些业务场景需要消息定时发送或延时发送(类似:飞信的短信定时发送需求),这时候就需要用到activemq的消息延时投递,详细的文档可参考官网说...

47650
来自专栏Golang语言社区

gRPC服务发现&负载均衡

构建高可用、高性能的通信服务,通常采用服务注册与发现、负载均衡和容错处理等机制实现。根据负载均衡实现所在的位置不同,通常可分为以下三种解决方案:

91520

扫码关注云+社区

领取腾讯云代金券