javascript - jsPDF method to save a file doesn’t work

I’ve already spent four days trying to solve a question that, at the beginning, seemed quite a child’s game: using a jsPDF library I’m trying to save a file. Not to print it, that’s something already done.

So here is my HTML:

<!DOCTYPE html>
<html manifest="offline.appcache">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>New project</title>

<!-- Allow fullscreen mode on iOS devices. (These are Apple specific meta tags.) -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon" sizes="256x256" href="icon-256.png" />
<meta name="HandheldFriendly" content="true" />

<!-- Chrome for Android web app tags -->
<meta name="mobile-web-app-capable" content="yes" />
<link rel="shortcut icon" sizes="256x256" href="icon-256.png" />

<script src="script/jquery-2.1.0.min.js"></script>

<script type="text/javascript" src="script/jspdf.js"></script>
<script type="text/javascript" src="script/libs/base64.js"></script>
<script type="text/javascript" src="script/libs/sprintf.js"></script>

 <script type="text/javascript" src="script/jspdf.js"></script>
 <script type="text/javascript" src="script/jspdf.plugin.standard_fonts_metrics.js"></script> 
 <script type="text/javascript" src="script/jspdf.plugin.split_text_to_size.js"></script>               
 <script type="text/javascript" src="script/jspdf.plugin.from_html.js"></script>
 <script type="text/javascript" src="script/FileSaver.js"></script>

 <!-- The CSS -->   
 <style type="text/css">
    p
    {
    font-size: 18px;

    }
    #container{
    width: 800px;
    height: 500px;
    background-color: red;
    }
 </style>   

<!-- The javascript -->     
<script>
function print()
{
var doc = new jsPDF();
doc.text(20, 20, 'Hello world.');
doc.output('datauri');
}

function save()
{
var doc = new jsPDF();
doc.text(20, 20, 'Hello world.');
doc.save('nombre_example.pdf');
}

</script>
</head> 

<body> 

<input type="button" value="Print" height="50px" width="50px" Onclick="print()">
<input type="button" value="Save" height="50px" width="50px" Onclick="save()">
<div id="container">
    <p>
    HOLA <br>
    HOLA <br>HOLA <br>HOLA <br>HOLA <br>HOLA <br>HOLA <br>HOLA <br>HOLA <br>HOLA <br>HOLA <br>HOLA     <br>HOLA <br>HOLA <br>HOLA <br>HOLA <br>HOLA <br>HOLA <br>HOLA <br>
    </p>
</div>

 </body> 
 </html>

Then, when I click the button 'save' I can read on the javacript console:

Uncaught TypeError: Object #<Object> has no method 'save' index.html:58

The list of JavaScript files that I’ve attached to the project is:

FileSaver.js
jquery-2.1.0.min.js
jspdf.js
jspdf.plugin.addimage.js
jspdf.plugin.autoprint.js
jspdf.plugin.cell.js
jspdf.plugin.from_html.js
jspdf.plugin.javascript.js
jspdf.plugin.png_support.js
jspdf.plugin.sillysvgrenderer.js
jspdf.plugin.split_text_to_size.js
jspdf.plugin.standard_fonts_metrics.js
jspdf.plugin.total_pages.js

and the libraries:

base64.js
sprintf.js

So, after showing all this info my question is: Why can’t I make the save button work properly?

Any ideas?

So here is my HTML:

<!DOCTYPE html>
<html manifest="offline.appcache">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>New project</title>

<!-- Allow fullscreen mode on iOS devices. (These are Apple specific meta tags.) -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon" sizes="256x256" href="icon-256.png" />
<meta name="HandheldFriendly" content="true" />

<!-- Chrome for Android web app tags -->
<meta name="mobile-web-app-capable" content="yes" />
<link rel="shortcut icon" sizes="256x256" href="icon-256.png" />

<script src="script/jquery-2.1.0.min.js"></script>

<script type="text/javascript" src="script/jspdf.js"></script>
<script type="text/javascript" src="script/libs/base64.js"></script>
<script type="text/javascript" src="script/libs/sprintf.js"></script>

 <script type="text/javascript" src="script/jspdf.js"></script>
 <script type="text/javascript" src="script/jspdf.plugin.standard_fonts_metrics.js"></script> 
 <script type="text/javascript" src="script/jspdf.plugin.split_text_to_size.js"></script>               
 <script type="text/javascript" src="script/jspdf.plugin.from_html.js"></script>
 <script type="text/javascript" src="script/FileSaver.js"></script>

 <!-- The CSS -->   
 <style type="text/css">
    p
    {
    font-size: 18px;

    }
    #container{
    width: 800px;
    height: 500px;
    background-color: red;
    }
 </style>   

<!-- The javascript -->     
<script>
function print()
{
var doc = new jsPDF();
doc.text(20, 20, 'Hello world.');
doc.output('datauri');
}

function save()
{
var doc = new jsPDF();
doc.text(20, 20, 'Hello world.');
doc.save('nombre_example.pdf');
}

</script>
</head> 

<body> 

<input type="button" value="Print" height="50px" width="50px" Onclick="print()">
<input type="button" value="Save" height="50px" width="50px" Onclick="save()">
<div id="container">
    <p>
    HOLA <br>
    HOLA <br>HOLA <br>HOLA <br>HOLA <br>HOLA <br>HOLA <br>HOLA <br>HOLA <br>HOLA <br>HOLA <br>HOLA     <br>HOLA <br>HOLA <br>HOLA <br>HOLA <br>HOLA <br>HOLA <br>HOLA <br>
    </p>
</div>

 </body> 
 </html>

Then, when I click the button 'save' I can read on the javacript console:

Uncaught TypeError: Object #<Object> has no method 'save' index.html:58

The list of JavaScript files that I’ve attached to the project is:

FileSaver.js
jquery-2.1.0.min.js
jspdf.js
jspdf.plugin.addimage.js
jspdf.plugin.autoprint.js
jspdf.plugin.cell.js
jspdf.plugin.from_html.js
jspdf.plugin.javascript.js
jspdf.plugin.png_support.js
jspdf.plugin.sillysvgrenderer.js
jspdf.plugin.split_text_to_size.js
jspdf.plugin.standard_fonts_metrics.js
jspdf.plugin.total_pages.js

and the libraries:

base64.js
sprintf.js

So, after showing all this info my question is: Why can’t I make the save button work properly?

Any ideas?

Share Improve this question edited Mar 18, 2014 at 2:55 Sharanya Dutta 4,0312 gold badges20 silver badges29 bronze badges asked Mar 18, 2014 at 1:27 ViceNocillator 1051 gold badge3 silver badges11 bronze badges

The error message seems to say it precisely. The doc object that you created with new jsPDF() doesn't have a .save() method. Presumably there is something in the documentation for jsPDF that describes how to enable saving, but since their web site requires contact information before allowing you to download the library, I'm not interested in investigating further. – Stephen Thomas Commented Mar 18, 2014 at 1:39

Add a ment |

1 Answer 1

Sorted by: Reset to default 3

try Adding Only these Two Script files and see

<script type="text/javascript" src="script/jspdf.js"></script>
<script type="text/javascript" src="script/FileSaver.js"></script>

and besides why are you adding jspdf.js file two times...

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - jsPDF method to save a file doesn’t work - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)