Javascript Jspdf无法导出网页
我已经下载了jspdf，并在examples文件夹中运行了basic.html。当我选择打开演示时，没有导出pdf。我在basic.js脚本中添加了“导出网页”这一内容。是否有我遗漏的内容。我正在使用Firefox20 这是我的测试页面：test.htmlJavascript Jspdf无法导出网页,javascript,Javascript,我已经下载了jspdf，并在examples文件夹中运行了basic.html。当我选择打开演示时，没有导出pdf。我在basic.js脚本中添加了“导出网页”这一内容。是否有我遗漏的内容。我正在使用Firefox20 这是我的测试页面：test.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testt</title>
<script type="text/javascript" src="js/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript" src="jspdf.js"></script>
<script type="text/javascript" src="libs/Deflate/adler32cs.js"></script>
<script type="text/javascript" src="libs/FileSaver.js/FileSaver.js"></script>
<script type="text/javascript" src="libs/Blob.js/BlobBuilder.js"></script>
<script type="text/javascript" src="jspdf.plugin.addimage.js"></script>
<script type="text/javascript" src="jspdf.plugin.standard_fonts_metrics.js"></script>
<script type="text/javascript" src="jspdf.plugin.split_text_to_size.js"></script>
<script type="text/javascript" src="jspdf.plugin.from_html.js"></script>
<script type="text/javascript" src="js/basic.js"></script>
</head>
<body>
<script>
</script>
<a href="javascript:demoTwoPageDocument()" class="button">Run Code</a>
</body>
</html>
测试
function htmldemo(){
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
});
}
function demoTwoPageDocument() {
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?');
// Save the PDF
doc.save('Test.pdf');
}
function demoLandscape() {
var doc = new jsPDF('landscape');
doc.text(20, 20, 'Hello landscape world!');
// Save the PDF
doc.save('Test.pdf');
}
function demoFontSizes() {
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.');
doc.save('Test.pdf');
}
function demoFontTypes() {
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.');
doc.save('Test.pdf');
}
function demoTextColors() {
var doc = new jsPDF();
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.');
// Output as Data URI
doc.output('datauri');
}
function demoMetadata() {
var doc = new jsPDF();
doc.text(20, 20, 'This PDF has a title, subject, author, keywords and a creator.');
// Optional - set properties on the document
doc.setProperties({
title: 'Title',
subject: 'This is the subject',
author: 'James Hall',
keywords: 'generated, javascript, web 2.0, ajax',
creator: 'MEEE'
});
doc.save('Test.pdf');
}
function demoUserInput() {
var name = prompt('What is your name?');
var multiplier = prompt('Enter a number:');
multiplier = parseInt(multiplier);
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 (i = 1; i <= 12; i ++) {
doc.text(20, 30 + (i * 10), i + ' x ' + multiplier + ' = ' + (i * multiplier));
}
doc.save('Test.pdf');
}
function demoRectangles() {
var doc = new jsPDF();
doc.rect(20, 20, 10, 10); // empty square
doc.rect(40, 20, 10, 10, 'F'); // filled square
doc.setDrawColor(255, 0, 0);
doc.rect(60, 20, 10, 10); // empty red square
doc.setDrawColor(255, 0, 0);
doc.rect(80, 20, 10, 10, 'FD'); // filled square with red borders
doc.setDrawColor(0);
doc.setFillColor(255, 0, 0);
doc.rect(100, 20, 10, 10, 'F'); // filled red square
doc.setDrawColor(0);
doc.setFillColor(255, 0, 0);
doc.rect(120, 20, 10, 10, 'FD'); // filled red square with black borders
doc.setDrawColor(0);
doc.setFillColor(255, 255, 255);
doc.roundedRect(140, 20, 10, 10, 3, 3, 'FD'); // Black sqaure with rounded corners
doc.save('Test.pdf');
}
function demoLines() {
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);
// Output as Data URI
doc.output('datauri');
}
function demoCircles() {
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');
doc.save('Test.pdf');
}
function demoTriangles() {
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');
doc.save('Test.pdf');
}
function demoImages() {
// Because of security restrictions, getImageFromUrl will
// not load images from other domains. Chrome has added
// security restrictions that prevent it from loading images
// when running local files. Run with: chromium --allow-file-access-from-files --allow-file-access
// to temporarily get around this issue.
var getImageFromUrl = function(url, callback) {
var img = new Image(), data, ret = {
data: null,
pending: true
};
img.onError = function() {
throw new Error('Cannot load image: "'+url+'"');
};
img.onload = function() {
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
// Grab the image as a jpeg encoded in base64, but only the data
data = canvas.toDataURL('image/jpeg').slice('data:image/jpeg;base64,'.length);
// Convert the data to binary form
data = atob(data);
document.body.removeChild(canvas);
ret['data'] = data;
ret['pending'] = false;
if (typeof callback === 'function') {
callback(data);
}
};
img.src = url;
return ret;
};
// Since images are loaded asyncronously, we must wait to create
// the pdf until we actually have the image data.
// If we already had the jpeg image binary data loaded into
// a string, we create the pdf without delay.
var createPDF = function(imgData) {
var doc = new jsPDF();
doc.addImage(imgData, 'JPEG', 10, 10, 50, 50);
doc.addImage(imgData, 'JPEG', 70, 10, 100, 120);
doc.save('output.pdf');
}
getImageFromUrl('thinking-monkey.jpg', createPDF);
}
function demoStringSplitting() {
var pdf = 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:
pdf.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 = pdf.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.
console.log(lines);
pdf.text(0.5, verticalOffset + size / 72, lines)
verticalOffset += (lines.length + 0.5) * size / 72
}
}
pdf.save('Test.pdf');
}
function demoFromHTML() {
var pdf = new jsPDF('p', 'in', 'letter');
// source can be HTML-formatted string, or a reference
// to an actual DOM element from which the text will be scraped.
var source = $('#fromHTMLtestdiv')[0]
// we support special element handlers. Register them with jQuery-style
// ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
// There is no support for any other type of selectors
// (class, of compound) at this time.
, specialElementHandlers = {
// element with id of "bypass" - jQuery style selector
'#bypassme': function(element, renderer){
// true = "handled elsewhere, bypass text extraction"
return true
}
}
// all coords and widths are in jsPDF instance's declared units
// 'inches' in this case
pdf.fromHTML(
source // HTML string or DOM elem ref.
, 0.5 // x coord
, 0.5 // y coord
, {
'width':7.5 // max width of content on PDF
, 'elementHandlers': specialElementHandlers
}
)
pdf.save('Test.pdf');
}
函数htmldemo（）{
var doc=new jsPDF（）；
//我们将制作自己的渲染器以跳过此编辑器
变量specialElementHandlers={
“#编辑器”：函数（元素、渲染器）{
返回true；
}
};
//所有单位都在文档的设置度量中
//这可以更改为“pt”（点）、“mm”（默认值）、“cm”、“in”
doc.fromHTML（$（'body'）.get（0）、15、15、{
“宽度”：170，
“elementHandlers”：specialElementHandlers
});
}
函数名为pageDocument（）{
var doc=new jsPDF（）；
doc.text（20，20，“你好，世界！”）；
text（20，30，'这是客户端Javascript，输出PDF'）；
doc.addPage（）；
文本（20，20，‘你喜欢吗？’）；
//保存PDF
doc.save（'Test.pdf'）；
}
函数demoscape（）{
var doc=新的jsPDF（“景观”）；
doc.text（20，20，“你好，风景世界！”）；
//保存PDF
doc.save（'Test.pdf'）；
}
函数demoFontSizes（）{
var doc=new jsPDF（）；
文件setFontSize（22）；
文件文本（20，20，“这是一个标题”）；
文件setFontSize（16）；
doc.text（20，30，'下面是一些正常大小的文本'）；
doc.save（'Test.pdf'）；
}
函数demoFontTypes（）{
var doc=new jsPDF（）；
doc.text（20，20，'这是默认字体'）；
setFont文件（“信使”）；
文件setFontType（“正常”）；
文件文本（20、30，“这是正常的快递服务”）；
setFont文件（“时代”）；
文件setFontType（“斜体”）；
文件文本（20，40，“这是时代斜体”）；
setFont文件（“helvetica”）；
文件setFontType（“粗体”）；
文件文本（20，50，'这是helvetica粗体'）；
setFont文件（“信使”）；
文件setFontType（“粗体斜体”）；
文件文本（20，60，'这是斜体'）；
doc.save（'Test.pdf'）；
}
函数demoextcolors（）{
var doc=new jsPDF（）；
setTextColor文件（100）；
文档文本（20，20，‘这是灰色的’）；
setTextColor文件（150）；
文档文本（20、30，“这是浅灰色的”）；
文件setTextColor（255,0,0）；
文件文本（20，40，“这是红色的”）；
setTextColor文件（0255,0）；
文档文本（20，50，‘这是绿色的’）；
setTextColor文件（0,0255）；
文档文本（20，60，“这是蓝色的”）；
//输出为数据URI
文档输出（'datauri'）；
}
函数demoMetadata（）{
var doc=new jsPDF（）；
text（20，20，'此PDF包含标题、主题、作者、关键字和创建者'）；
//可选-设置文档的属性
doc.setProperties({
标题：“标题”，
主题：“这就是主题”，
作者：《詹姆斯·霍尔》，
关键词：“生成的、javascript、web 2.0、ajax”，
创造者：“米”
});
doc.save（'Test.pdf'）；
}
函数demoUserInput（）{
var name=prompt（'你叫什么名字？'）；
var乘数=提示符（'输入一个数字：'）；
乘数=parseInt（乘数）；
var doc=new jsPDF（）；
文件setFontSize（22）；
文件文本（20，20，“问题”）；
文件setFontSize（16）；
文件文本（20，30，'这属于：'+名称）；
对于（var i=1；i10/31/13-我也有同样的问题。通过删除basic.js文件第312行末尾的分号修复了这个问题