Javascript 从HTML呈现PDF并显示它

我在手机开发方面遇到了问题

当我试图从HTML呈现PDF时，我需要在我的移动设备上显示它。 到目前为止，我能够以datauri的形式呈现pdf（使用jsPDF），但在我的移动设备上显示它只是。。。好吧，我没有话可说，只有沮丧：）

我正在使用一个简单的测试HTML文件，PhoneGap和jsPDF（w/Html2Canvas）

HTML

<div id="content">
   <div>
     <div>
        Hello world
     </div>
   </div>
</div>

<button type="button">
    Download
</button>

JS

div {
   padding: 15px;
   background-color: lightblue;
   border: 2px solid black;
   width: 100%;
}

$("button").click(function() {
    var pdf = new jsPDF('p', 'pt', 'a4');
    pdf.addHTML($("#content"), function() {
        pdf.output("datauri");
    });
});

当然，我将其包装在$（document.ready（function（）{…}）中； 问题是，在iOS上它会打开该文件，但无法以某种方式保存它。。。Android也是如此，它甚至不想打开或处理它

我还尝试从PhoneGap/Cordova使用InAppBrowser，在这里我应该使用

window.open（datauri，“\u system”）

在其中打开设备的默认浏览器

那也没用

我需要打开一个.pdf文件（从HTML中呈现），并为用户提供将其保存在移动设备上的选项，或保存该文件的任何替代方案（不必位于设备的存储器上，可以是Dropbox、Google Drive等）

---

有没有人有过这样的经历，因为我正处于一个被称为“疯狂”的深渊边缘。

Android web view默认情况下不支持PDF查看。因此，最好的选择是使用FileOpener2插件打开PDF文件

---

如果需要，您可以使用文件传输插件下载该文件，并使用文件插件将其存储在设备中，然后使用FileOpener2插件在设备中打开该文件（PDF）。请大家看一下，我已经提供了使用上述所有插件的工作示例代码。

关于您在使用InAppBrowser在android设备中打开pdf时遇到的问题，您必须设置window.open=cordova.InAppBrowser.open；在使用window.open之前。这将解决您在android设备中打开pdf的问题。这可能会解决您的文件保存问题-我有空闲时间时会看一看。我确实读过一篇文章，说iOS在保存文件方面并不容易，因为文件管理有点被阻塞了？至于Android，据我所知，我无法在Android Marshmallow上的浏览器中打开dataUri，也无法在以前的版本中尝试，但有一个可以测试它，只需先配置它。根据我的经验，我发现在iOS中编写文件相当简单。Android Marshmallow在将文件插件更新到4.2.0版后得到了修复。我很高兴你破解了它Jorrex。谢谢你回来。我已经公布了答案。你不必再去想被称为“疯狂”的深空：）干杯，快乐的编码这不容易理解你的代码中发生了什么，但我确实破解了它。我遇到的另一个问题是FileOpener2。我遵循github页面上的示例，在那里他使用了

cordova.fileOpener2.open（{…}）

，这导致了一个错误。通过查看更新的代码，他将方法更改为

cordova.fileOpener2a.open（{…}）

。我花了一段时间才弄明白@Jorrex我猜您是从分叉路径安装fileopener插件的，该路径有一个与iOS相关的修复程序。但我是从主路径安装的，它与我的代码示例中的一样工作良好。看看这个-