尝试使用英特尔 XDK 保存 PDF 文件答案

【问题标题】：Trying to save a PDF file with Intel XDK尝试使用英特尔 XDK 保存 PDF 文件
【发布时间】：2016-09-13 23:30:19
【问题描述】：

我正在尝试重新创建 this example。

但是当我点击按钮时，我得到了错误：“Uncaught ReferenceError: LocalFileSystem is not defined”。

这是我的代码：

<!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>

【问题讨论】：

标签： javascript jspdf

【解决方案1】：

这是我使用 Chrome 53 和 Windows 7 在本地测试的代码的修改。

主要变化有：

在保存到设备之前，您需要调用requestQuota() 以获取本地设备上的空间 - 示例参见the documentation 和this question；
将pdf.output()返回的字符串转换为Blob，用于FileWriter；
删除对LocalFileSystem 的不必要引用。

写入文件的位置取决于您的操作系统和浏览器；如果您使用的是 Chrome，请you can find more information about where the file was written here。

在 Windows 7 上，我在这里找到了文件：C:\Users\USERNAME\AppData\Local\Google\Chrome\User Data\Default\File System\018\p\00\00000016

我可以通过在文件名后面附加.pdf 在 Adobe Reader 中打开它。

    <!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>

【讨论】：