在移动设备上使用 jsPDF 下载

Question

我有一个页面，其中包含使用 jsPDF 的下载按钮。在台式机上，它会按应有的方式下载页面。但是，pdf.save()在我的平板电脑或手机上不起作用。

我尝试为移动设备添加一个特殊情况，以便在新窗口中打开 PDF，因为移动设备不会下载与桌面相同的内容，其想法是，一旦在新窗口中打开 PDF，用户就可以选择手动保存。

var pdf = new jsPDF('p', 'pt', 'letter');
var specialElementHandlers = {
    '#editor': function (element, renderer) {
        return true;
    }
};

html2canvas($("#pdf-area"), {
    onrendered: function (canvas) {
        $("#pdf-canvas").append(canvas);
        $("#pdf-canvas canvas").css("padding", "20px");
    }
});

var options = {
    pagesplit: true
};

function download(doctitle) {
    pdf.addHTML($("#pdf-area")[0], options, function () {
        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
            pdf.output('dataurlnewwindow');           
        } else {
            pdf.save(doctitle);
        }        
    });
}

但下载功能在我的平板电脑/手机上仍然不起作用。我用它测试了它以确保 pdf.output() 函数正常工作：

    pdf.addHTML($("#pdf-area")[0], options, function () {
        pdf.output('dataurlnewwindow');                
    });

它仍然可以在桌面上运行，但在移动设备上不起作用。

Answer 1

jsPDF不会通过此pdf.save()在移动应用程序上下载文件。我已经尝试并搜索过这个问题，但无法在一个地方找到完整的解决方案。我正在使用文件和文件打开器插件。我已经在Ionic React中开发了解决方案。安装以下模块。

npm i jspdf
npm install cordova-plugin-file
npm install @ionic-native/file
npm install cordova-plugin-file-opener2
npm install @ionic-native/file-opener
ionic cap sync

2. 转到您的文件并添加这些导入语句。

npm i jspdf
npm install cordova-plugin-file
npm install @ionic-native/file
npm install cordova-plugin-file-opener2
npm install @ionic-native/file-opener
ionic cap sync

3. 检查pdfDownload功能

import { jsPDF } from "jspdf";
import 'jspdf-autotable';
import { FileOpener } from '@ionic-native/file-opener;
import { File } from '@ionic-native/file';
import { isPlatform } from "@ionic/react";