Question

目标：单击按钮时，将生成一个PDF文件，其中包含div标签内的内容。

问题：使用adb logcat，我可以看到base64编码的字符串，但 pdf在我的Android设备上不显示/显示。单击“创建PDF”按钮时没有任何反应。

注意 PDF是在我的计算机网络浏览器谷歌浏览器上生成的，但在Android设备上无效。

我一直在使用jspdf.debug.js文件帮我解决这个问题。我创建PDF的总体流程如下：

创建新的JSPDF对象
从div标签收集信息并分配给JSPDF对象
使用pdf.output（'datauri'）命令
window.open（datauri）打开pdf

以下是按下按钮时创建pdf的js函数的代码。

                $scope.toPDF = function(){
                /* test is the div id tag */
                var doc = new jsPDF();
                var source = $('#test').html();
                doc.fromHTML(source, 15, 15, {
                    'width': 170
                });
                //Doc.save makes it save onto downloads on the browser (chrome)
                doc.save("Test.pdf");
                var pdfValue = doc.output('datauri');
                window.open(pdfValue);
                //var PAGE_TO_VIEW = 1;
                //var SCALE = 1.0;

                //var pdfAsArray = convertDataURIToBinary(pdfValue);
                /*PDFJS.getDocument(pdfAsArray).then(function(pdfDocument){
                    return pdfDocument.getPage(PAGE_TO_VIEW).then(function (pdfPage) {
                        // Creating the page view with default parameters.
                        var pdfPageView = new PDFJS.PDFPageView({
                            container: container,
                            id: PAGE_TO_VIEW,
                            scale: SCALE,
                            defaultViewport: pdfPage.getViewport(SCALE),
                            // We can enable text/annotations layers, if needed
                            textLayerFactory: new PDFJS.DefaultTextLayerFactory(),
                            annotationsLayerFactory: new PDFJS.DefaultAnnotationsLayerFactory()
                        });
                        // Associates the actual page with the view, and drawing it
                        pdfPageView.setPdfPage(pdfPage);
                        return pdfPageView.draw();
                    });
                });*/

           /* var pdf = new jsPDF();

            pdf.addHTML(document.body,function() {
                var string = pdf.output('datauristring');
                $('.generatePDF').attr('src', string);
            });

            pdf.save('test' + '.pdf');
           */
    };
     var BASE64_MARKER = ';base64,';

    function convertDataURIToBinary(dataURI) {
        var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
        var base64 = dataURI.substring(base64Index);
        var raw = window.atob(base64);
        var rawLength = raw.length;
       var array = new Uint8Array(new ArrayBuffer(rawLength));

        for(var i = 0; i < rawLength; i++) {
           array[i] = raw.charCodeAt(i);
        }
        return array;
    };

以下是控制台为Android设备显示的内容：

               D/CordovaWebViewClient(24472): onPageStarted(data:application/pdf;base64,JVBERi0xLjMKMyAwIG9iago8PC9UeXBlIC9QYWdlCi9QYXJlbnQgMSAwIFIKL1Jlc291cmNlcyAyIDAgUgovTWVkaWFCb3ggWzAgMCA1OTUuMjggODQxLjg5XQovQ29udGVudHMgNCAwIFI+PgplbmRvYmoKNCAwIG9iago8PC9MZW5ndGggMTY2OT4+CnN0cmVhbQowLjU3IHcKMCBHCnEKcSBCVCAwIGcgNDIuNTIgNzk5LjM3IFRkCjAgLTEyLjAwIFRkCi9GMSAxMi4wMCBUZiAoU2VwdGVtYmVyIDMwLCAyMDE1KSBUagpFVCBRCnEgQlQgMCBnIDQyLjUyIDc4Ny4zNyBUZAowIC0xMi4wMCBUZAovRjEgMTIuMDAgVGYgKEFpcnRpbWUgVG9wdXApIFRqCkVUIFEKcSBCVCAwIGcgNDIuNTIgNzY3LjM0IFRkCjIxOC4zOCAtMTIuMDAgVGQKL0YxIDEyLjAwIFRmIChSTSAyLjAwKSBUagpFVCBRCnEgQlQgMCBnIDQyLjUyIDc1NS4zNCBUZAowIC0xMi4wMCBUZAovRjEgMTIuMDAgVGYgKFRvOiArNjAgMTIgMzQxMjM0NSkgVGoKRVQgUQpxIEJUIDAgZyA0Mi41MiA3MzEuMzQgVGQKMCAtMTIuMDAgVGQKL0YxIDEyLjAwIFRmIChTZW5kIE1vbmV5KSBUagpFVCBRCnEgQlQgMCBnIDQyLjUyIDcxMS4zMCBUZAoyMTguMzggLTEyLjAwIFRkCi9GMSAxMi4wMCBUZiAoUk0gMi4wMCkgVGoKRVQgUQpxIEJUIDAgZyA0Mi41MiA2OTkuMzAgVGQKMCAtMTIuMDAgVGQKL0YxIDEyLjAwIFRmIChUbzogKzYwIDEyIDM0MTIzNDUpIFRqCkVUIFEKcSBCVCAwIGcgNDIuNTIgNjc1LjMwIFRkCjAgLTEyLjAwIFRkCi9GMSAxMi4wMCBUZiAoQWlydGltZSBUb3B1cCkgVGoKRVQgUQpxIEJUIDAgZyA0Mi41MiA2NTUuMjYgVGQKMjE4LjM4IC0xMi4wMCBUZAovRjEgMTIuMDAgVGYgKFJNIDIuMDApIFRqCkVUIFEKcSBCVCAwIGcgNDIuNTIgNjQzLjI2IFRkCjAgLTEyLjAwIFRkCi9GMSAxMi4wMCBUZiAoVG86ICs2MCAxMiAzNDEyMzQ1KSBUagpFVCBRCnEgQlQgMCBnIDQyLjUyIDYxOS4yNiBUZAowIC0xMi4wMCBUZAovRjEgMTIuMDAgVGYgKFNlbmQgTW9uZXkpIFRqCkVUIFEKcSBCVCAwIGcgNDIuNTIgNTk5LjIzIFRkCjIxOC4zOCAtMTIuMDAgVGQKL0YxIDEyLjAwIFRmIChSTSAyLjAwKSBUagpFVCBRCnEgQlQgMCBnIDQyLjUyIDU4Ny4yMyBUZAowIC0xMi4wMCBUZAovRjEgMTIuMDAgVGYgKFRvOiArNjAgMTIgMzQxMjM0NSkgVGoKRVQgUQpxIEJUIDAgZyA0Mi41MiA1NjMuMjMgVGQKMCAtMTIuMDAgVGQKL0YxIDEyLjAwIFRmIChNZXJjaGFudCBQYXltZW50KSBUagpFVCBRCnEgQlQgMCBnIDQyLjUyIDU0My4xOSBUZAoyMTguMzggLTEyLjAwIFRkCi9GMSAxMi4wMCBUZiAoUk0gMi4wMCkgVGoKRVQgUQpxIEJUIDAgZyA0Mi41MiA1MzEuMTkgVGQKMCAtMTIuMDAgVGQKL0YxIDEyLjAwIFRmIChUbzogKzYwIDc3IDc3NzY2NjYpIFRqCkVUIFEKcSBCVCAwIGcgNDIuNTIgNTA3LjE5IFRkCjAgLTEyLjAwIFRkCi9GMSAxMi4wMCBUZiAoQWlydGltZSBUb3B1cCkgVGoKRVQgUQpxIEJUIDAgZyA0Mi41MiA0ODcuMTYgVGQKMjE4LjM4IC0xMi4wMCBUZAovRjEgMTIuMDAgVGYgKFJNIDIuMDApIFRqCkVUIFEKcSBCVCAwIGcgNDIuNTIgNDc1LjE2IFRkCjAgLTEyLjAwIFRkCi9GMSAxMi4wMCBUZiAoVG86ICs2MCAxMiAzNDEyMzQ1KSBUagpFVCBRCnEgQlQgMCBnIDQyLjUyIDQ1MS4xNiBUZAowIC0xMi4wMCBUZAovRjEgMTIuMDAgVGYgKFNlbmQgTW9uZXkpIFRqCkVUIFEKcSBCVCAwIGcgNDIuNTIgNDMxLjEyIFRkCjIxOC4zOCAtMTIuMDAgVGQKL0YxIDEyLjAwIFRmIChSTSAyLjAwKSBUagpFVCBRCnEgQlQgMCBnIDQyLjUyIDQxOS4xMiBUZAowIC0xMi4wMCBUZAovRjEgMTIuMDAgVGYgKFRvOiArNjAgMTIgMzQxMjM0NSkgVGoKRVQgUQpRCmVuZHN0cmVhbQplbmRvYmoKMSAwIG9iago8PC9UeXBlIC9QYWdlcwovS2lkcyBbMyAwIFIgXQovQ291bnQgMQo+PgplbmRvYmoKNSAwIG9iago8PC9CYXNlRm9udC9IZWx2ZXRpY2EvVHlwZS9Gb250Ci9FbmNvZGluZy9XaW5BbnNpRW5jb2RpbmcKL1N1YnR5cGUvVHlwZTE+PgplbmRvYmoKNiAwIG9iago8PC9CYXNlRm9udC9IZWx2ZXRpY2EtQm9sZC9UeXBlL0ZvbnQKL0VuY29kaW5nL1dpbkFuc2lFbmNvZGluZwovU3VidHlwZS9UeXBlMT4+CmVuZG9iago3IDAgb2JqCjw8L0Jhc2VGb250L0hlbHZldGljYS1PYmxpcXVlL1R5cGUvRm9udAovRW5jb2RpbmcvV2luQW5zaUVuY29kaW5nCi9TdWJ0eXBlL1R5cGUxPj4KZW5kb2JqCjggMCBvYmoKPDwvQmFzZUZvbnQvSGVsdmV0aWNhLUJvbGRPYmxpcXVlL1R5cGUvRm9udAovRW5jb2RpbmcvV2luQW5zaUVuY29kaW5nCi9TdWJ0eXBlL1R5cGUxPj4KZW5kb2JqCjkgMCBvYmoKPDwvQmFzZUZvbnQvQ291cmllci9UeXBlL0ZvbnQKL0VuY29kaW5nL1dpbkFuc2lFbmNvZGluZwovU3VidHlwZS9UeXBlMT4+CmVuZG9iagoxMCAwIG9iago8PC9CYXNlRm9udC9Db3VyaWVyLUJvbGQvVHlwZS9Gb250Ci9FbmNvZGluZy9XaW5BbnNpRW5jb2RpbmcKL1N1YnR5cGUvVHlwZTE+PgplbmRvYmoKMTEgMCBvYmoKPDwvQmFzZUZvbnQvQ291cmllci1PYmxpcXVlL1R5cGUvRm9udAovRW5jb2RpbmcvV2luQW5zaUVuY29kaW5nCi9TdWJ0eXBlL1R5cGUxPj4KZW5kb2JqCjEyIDAgb2JqCjw8L0Jhc2VGb250L0NvdXJpZXItQm9sZE9ibGlxdWUvVHlwZS9Gb250Ci9FbmNvZGluZy9XaW5BbnNpRW5jb2RpbmcKL1N1YnR5cGUvVHlwZTE+PgplbmRvYmoKMTMgMCBvYmoKPDwvQmFzZUZvbnQvVGltZXMtUm9tYW4vVHlwZS9Gb250Ci9FbmNvZGluZy9XaW5BbnNpRW5jb2RpbmcKL1N1YnR5cGUvVHlwZTE+PgplbmRvYmoKMTQgMCBvYmoKPDwvQmFzZUZvbnQvVGltZXMtQm9sZC9UeXBlL0ZvbnQKL0VuY29kaW5nL1dpbkFuc2lFbmNvZGluZwovU3VidHlwZS9UeXBlMT4+CmVuZG9iagoxNSAwIG9iago8PC9CYXNlRm9udC9UaW1lcy1JdGFsaWMvVHlwZS9Gb250Ci9FbmNvZGluZy9XaW5BbnNpRW5jb2RpbmcKL1N1YnR5cGUvVHlwZTE+PgplbmRvYmoKMTYgMCBvYmoKPDwvQmFzZUZvbnQvVGltZXMtQm9sZEl0YWxpYy9UeXBlL0ZvbnQKL0VuY29kaW5nL1dpbkFuc2lFbmNvZGl
               D/JsMessageQueue(24472): Set native->JS mode to null
               D/CordovaActivity(24472):onMessage(onPageStarted,data:application/pdf;base64,JVBERi0xLjMKMyAwIG9iago8PC9UeXBlIC9QYWdlCi9QYXJlbnQgMSAwIFIKL1Jlc291cmNlcyAyIDAgUgovTWVkaWFCb3ggWzAgMCA1OTUuMjgg...(blahblah)
             W/cr.BindingManager(24472): Cannot call determinedVisibility() - never saw a connection for the pid: 24472
             D/CordovaWebViewClient(24472): onPageFinished(data:application/pdf;base64,JVBERi0xLjMKMyAwIG9iago8PC9UeXBlIC9QYWdlCi9QYXJlbnQgMSAwIFIKL1Jlc291cmNlcyAyIDAgUgovTWVkaWFCb3ggWzAgMCA1OTUuMjggODQxLjg5XQovQ2.......(blah blah blah)

我将日志缩短了很多。它说了很多东西，但如果需要可以提供正确的东西。唯一的区别在于base64的长度。

我已经包含了每个可用于创建pdf或协助该过程的库。

PDF不会在Ionic App Angular中显示

0 个答案: