jquery生成pdf插件jsPDF
来源:互联网 发布:淘宝软妹衣服店 编辑:程序博客网 时间:2024/06/05 01:01
Have a play.
A HTML5 client-side solution for generating PDFs. Perfect for event tickets, reports, certificates, you name it!
No servers were used in the making of this demo.
Choose example
Images
// You'll need to make your image into a Data URL
// Use http://dataurl.net/#dataurlmaker
var imgData = 'data:image/jpeg;base64,/......’;
var doc = new jsPDF();
doc.setFontSize(40);
doc.text(35, 25, "Octonyan loves jsPDF");
doc.addImage(imgData, 'JPEG', 15, 40, 180, 180);
Font faces
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.');
HTML Render(Early Stages)
var doc = new jsPDF();
// We'll make our own renderer to skip this editor
var 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($('body').get(0), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
Two Pages Hello world
var doc = new jsPDF();
doc.text(20, 20, 'Hello world!');
doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
doc.addPage();
doc.text(20, 20, 'Do you like that?');
Circles
var doc = new jsPDF();
doc.ellipse(40, 20, 10, 5);
doc.setFillColor(0,0,255);
doc.ellipse(80, 20, 10, 5, 'F');
doc.setLineWidth(1);
doc.setDrawColor(0);
doc.setFillColor(255,0,0);
doc.circle(120, 20, 5, 'FD');
Font Sizes
var doc = new jsPDF();
doc.setFontSize(22);
doc.text(20, 20, 'This is a title');
doc.setFontSize(16);
doc.text(20, 30, 'This is some normal sized text underneath.');
Landscape
var doc = new jsPDF('landscape');
doc.text(20, 20, 'Hello landscape world!');
Lines
var doc = new jsPDF();
doc.line(20, 20, 60, 20); // horizontal line
doc.setLineWidth(0.5);
doc.line(20, 25, 60, 25);
doc.setLineWidth(1);
doc.line(20, 30, 60, 30);
doc.setLineWidth(1.5);
doc.line(20, 35, 60, 35);
doc.setDrawColor(255,0,0); // draw red lines
doc.setLineWidth(0.1);
doc.line(100, 20, 100, 60); // vertical line
doc.setLineWidth(0.5);
doc.line(105, 20, 105, 60);
doc.setLineWidth(1);
doc.line(110, 20, 110, 60);
doc.setLineWidth(1.5);
doc.line(115, 20, 115, 60);
Rectangles
var doc = new jsPDF();
// Empty square
doc.rect(20, 20, 10, 10);
// Filled square
doc.rect(40, 20, 10, 10, 'F');
// Empty red square
doc.setDrawColor(255,0,0);
doc.rect(60, 20, 10, 10);
// Filled square with red borders
doc.setDrawColor(255,0,0);
doc.rect(80, 20, 10, 10, 'FD');
// Filled red square
doc.setDrawColor(0);
doc.setFillColor(255,0,0);
doc.rect(100, 20, 10, 10, 'F');
// Filled red square with black borders
doc.setDrawColor(0);
doc.setFillColor(255,0,0);
doc.rect(120, 20, 10, 10, 'FD');
// Black sqaure with rounded corners
doc.setDrawColor(0);
doc.setFillColor(255, 255, 255);
doc.roundedRect(140, 20, 10, 10, 3, 3, 'FD');
String Splitting
// @TODO: Need to simplify this demo
var doc = new jsPDF('p','in','letter')
, sizes = [12, 16, 20]
, fonts = [['Times','Roman'],['Helvetica',''], ['Times','Italic']]
, font, size, lines
, margin = 0.5 // inches on a 8.5 x 11 inch sheet.
, verticalOffset = margin
, loremipsum = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id eros turpis. Vivamus tempor urna vitae sapien mollis molestie. Vestibulum in lectus non enim bibendum laoreet at at libero. Etiam malesuada erat sed sem blandit in varius orci porttitor. Sed at sapien urna. Fusce augue ipsum, molestie et adipiscing at, varius quis enim. Morbi sed magna est, vel vestibulum urna. Sed tempor ipsum vel mi pretium at elementum urna tempor. Nulla faucibus consectetur felis, elementum venenatis mi mollis gravida. Aliquam mi ante, accumsan eu tempus vitae, viverra quis justo.\n\nProin feugiat augue in augue rhoncus eu cursus tellus laoreet. Pellentesque eu sapien at diam porttitor venenatis nec vitae velit. Donec ultrices volutpat lectus eget vehicula. Nam eu erat mi, in pulvinar eros. Mauris viverra porta orci, et vehicula lectus sagittis id. Nullam at magna vitae nunc fringilla posuere. Duis volutpat malesuada ornare. Nulla in eros metus. Vivamus a posuere libero.'
// Margins:
doc.setDrawColor(0, 255, 0)
.setLineWidth(1/72)
.line(margin, margin, margin, 11 - margin)
.line(8.5 - margin, margin, 8.5-margin, 11-margin)
// the 3 blocks of text
for (var i in fonts){
if (fonts.hasOwnProperty(i)) {
font = fonts[i]
size = sizes[i]
lines = doc.setFont(font[0], font[1])
.setFontSize(size)
.splitTextToSize(loremipsum, 7.5)
// Don't want to preset font, size to calculate the lines?
// .splitTextToSize(text, maxsize, options)
// allows you to pass an object with any of the following:
// {
// 'fontSize': 12
// , 'fontStyle': 'Italic'
// , 'fontName': 'Times'
// }
// Without these, .splitTextToSize will use current / default
// font Family, Style, Size.
doc.text(0.5, verticalOffset + size / 72, lines)
verticalOffset += (lines.length + 0.5) * size / 72
}
}
Text colors
var doc = new jsPDF();
// I know the proper spelling is colour ;)
doc.setTextColor(100);
doc.text(20, 20, 'This is gray.');
doc.setTextColor(150);
doc.text(20, 30, 'This is light gray.');
doc.setTextColor(255, 0, 0);
doc.text(20, 40, 'This is red.');
doc.setTextColor(0, 255, 0);
doc.text(20, 50, 'This is green.');
doc.setTextColor(0, 0, 255);
doc.text(20, 60, 'This is blue.');
Triangles
var doc = new jsPDF();
doc.triangle(60, 100, 60, 120, 80, 110, 'FD');
doc.setLineWidth(1);
doc.setDrawColor(255,0,0);
doc.setFillColor(0,0,255);
doc.triangle(100, 100, 110, 100, 120, 130, 'FD');
User input
var doc = new jsPDF();
doc.setFontSize(22);
doc.text(20, 20, 'Questions');
doc.setFontSize(16);
doc.text(20, 30, 'This belongs to: ' + name);
for(var i = 1; i <= 12; i ++) {
doc.text(20, 30 + (i * 10), i + ' x ' + multiplier + ' = ___');
}
doc.addPage();
doc.setFontSize(22);
doc.text(20, 20, 'Answers');
doc.setFontSize(16);
for(var i = 1; i <= 12; i ++) {
doc.text(20, 30 + (i * 10), i + ' x ' + multiplier + ' = ' + (i * multiplier));
}
// You wouldn't normally call this - this is just to make the
// demo not look broken as we've disabled auto update.
if (jsPDFEditor !== undefined) {
jsPDFEditor.update(true);
}
**NEW:addHTML()
var pdf = new jsPDF('p','pt','a4');
pdf.addHTML(document.body,function() {
var string = pdf.output('datauristring');
$('.preview-pane').attr('src', string);
});
- jquery生成pdf插件jsPDF
- 使用jspdf插件生成pdf。
- JSPDF插件 把HTML转PDF
- html页面转换成pdf插件 jspdf
- jsPDF生成pdf后在网页展示
- jsPDF生成pdf后在网页展示 .
- jsPDF,生成pdf文件的助手
- 使用javascript生成PDF的类库 - jsPDF
- 使用javascript生成PDF的类库 – jsPDF
- 使用javascript生成PDF的类库 – jsPDF
- jsPDF生成pdf后在网页展示实例
- 用jspdf实现页面下载生成pdf文件
- 【解决】jsPDF之长图片生成PDF(分页,失真)
- jsPDF – 基于 HTML5 的强大 PDF 生成工具
- jsPDF导出pdf
- jsPDF
- jQuery生成二维码插件
- 用jspdf实现html5页面下载成pdf文件
- UVALive 5067 Membership Management
- C++代码库
- javaSE7有关异常处理有关
- CSS基础学习十六:CSS盒子模型补充之border-radius属性
- [1002]: A + B Problem II
- jquery生成pdf插件jsPDF
- c语言scanf()函数和gets()函数的区别
- JSP分页
- 数据结构上机实验--有向图邻接表的建立,深度广度搜索及拓扑排序
- 作百度地图定位时,location.getAddrStr()获取到的值一直为空的问题
- 链表的归并排序
- HH的一万天
- 《leetCode》:Unique Paths
- 漫谈以太网交换机