Trying to save a PDF file with Intel XDK

Question

I´m trying to recreate this example.

But When I click the button I get the error: "Uncaught ReferenceError: LocalFileSystem is not defined".

Here's my code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jsPDF</title>    
    <script src="js/jquery-1.7.1.min.js"></script>
    <script src="js/jspdf.js"></script>
    <script src="js/FileSaver.js"></script>
    <script src="js/html2canvas.js"></script>
    <script>
        function guardar(){
            var pdf = new jsPDF('p', 'pt', 'a4');
            var source = $('#tabelagastos')[0];
            var PDFFILE ='';
            var arquivo = prompt("Qual o nome do arquivo?");

            pdf.specialElementHandlers = {
                '#bypassme': function (element, renderer) {
                 return true;
             }
            };
            pdf.fromHTML(source, 15, 15, {'width': 170},
                         function (dispose) {
                            PDFFILE = pdf.output();
                         });

            //NEXT SAVE IT TO THE DEVICE
            window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem) {
                fileSystem.root.getFile(arquivo +".pdf", {create: true}, function(entry) {
                    var fileEntry = entry;
                    entry.createWriter(function(writer) {
                    writer.onwrite = function(evt) {
                        alert("Save (root folder)!");
                    };

                    writer.write( PDFFILE );
                        }, function(error) {
                    alert(error);
                    });

                }, function(error){
                    alert(error);
                });
            },
            function(event){
                alert( evt.target.error.code );
            });
    }
    </script>
</head>
<body>
<h1>EJEMPLO DE JSPDF</h1>
    <hr />
    <div id="tabelagastos">some text</div>
    <input type="button" id="iniciador" value="Guardar" onclick="guardar();">
</body>

score 0 · Accepted Answer · answered Sep 14 '16 at 20:14

Here's a modification of your code that I tested locally using Chrome 53 and Windows 7.

The main changes are:

Before saving to the device, you need to call requestQuota() to get space on the local device - see the documentation and this question for an example;
Convert the string returned by pdf.output() to a Blob for the FileWriter;
Remove the unnecessary reference to LocalFileSystem.

The location of the written file depends on your operating system and browser; if you're using Chrome, you can find more information about where the file was written here.

On Windows 7, I found the file here: C:\Users\USERNAME\AppData\Local\Google\Chrome\User Data\Default\File System\018\p\00\00000016

I was able to open it in Adobe Reader by appending .pdf to the filename.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jsPDF</title>    
      <script src="jquery.min.js"></script>
      <script src="jspdf.js"></script>
      <script src="FileSaver.js"></script>
      <script src="html2canvas.js"></script>
      <script>
        window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
        function saveFile(){
            var pdf = new jsPDF('p', 'pt', 'a4');
            var source = $('#spendingTable')[0];
            var PDFFILE ='';
            var filename = prompt("Enter a file name:");

            pdf.specialElementHandlers = {
                '#bypassme': function (element, renderer) {
                    return true;
                }
            };

            pdf.fromHTML(source, 15, 15, {'width': 170}, function (dispose) {
                PDFFILE = new Blob([pdf.output()], {type: "application/pdf"});
            });

            //NEXT SAVE IT TO THE DEVICE
            var requestedBytes = 1024*1024*10; // 10MB
            navigator.webkitPersistentStorage.requestQuota (
                requestedBytes, function (grantedBytes) { 
                    window.requestFileSystem(PERSISTENT, 1024*1024, function (fileSystem) {
                        fileSystem.root.getFile(filename +".pdf", {create: true}, function (entry) {
                            var fileEntry = entry;
                            entry.createWriter(function(writer) {
                                writer.onwrite = function(evt) {
                                    alert("Saved to root folder!");
                                };
                                writer.write(PDFFILE);
                            }, 
                            function (error) {
                                alert(error);
                            });
                        }, 
                        function (error) {
                            alert(error);
                        });
                    },
                    function (event) {
                        alert(event.target.error.code);
                    });
                }
            );
        }
      </script>
    </head>
    <body>
    <h1>JSPDF EXAMPLE</h1>
      <hr>
      <div contenteditable="true" id="spendingTable" style="border: 1px black solid">This text is saved into a PDF.</div>
      <br>
      <input type="button" value="Save" onclick="saveFile();">
    </body>

Trying to save a PDF file with Intel XDK

1 Answers1

Linked