Question

我制作了一个JavaScript Web应用程序，用于根据HTML表单计算内容。它必须在所有现代Web浏览器和最常用的移动设备上运行良好，所以我使用Bootstrap 3这样做，这里没问题，但应用程序返回一个包含结果和其他数据的页面，我似乎无法想象了解如何在所有移动设备和台式机上保存这些结果的能力。

这是我到目前为止所尝试的内容：

我试图生成页面的打印屏幕，根据我的阅读，仅使用JavaScript无法完成。在这里死路一条。
现在我正在使用jsPDF创建带有结果的PDF，这对所有内容都很有效，但是当涉及到下载按钮时，它只适用于桌面和iOS。在Android的默认浏览器（4.4版本下），它似乎不起作用。什么都没发生，问题是一般的（再次，从我读过的）。 Blob.js相关。
我尝试使用ViewerJS向用户显示生成的PDF。这个插件有一个下载按钮，这是我考虑使用它的主要原因。但是我仍有一个问题，ViewerJS需要一个到磁盘上的PDF文件的路径才能工作，而jsPDF不会创建一个，它只是创建一个URI路径（我希望它是所谓的），如下所示：data：application / pdf; base64，JVBERi0xLjM ...（一个很长的URI）。我不知道如何使ViewerJS从该URI加载PDF而不是从磁盘上的文件加载。

我正在寻找其中一个解决方案，但也有新的建议。

我真的希望有人可以帮助我。提前谢谢。

Answer 1

您可以使用HTML5画布，让用户将结果下载为image / png。移动设备和桌面设备上的大多数现代浏览器均提供图像下载选项。

<html>
    <head>
        <title></title>
        <script>

function update() {
    var canvas = document.createElement("canvas");
    canvas.width = 300;
    canvas.height = 300;

    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "#dddddd";
    ctx.fillRect(0, 0, 300, 300);

    ctx.fillStyle = "#000000";
    ctx.font = "20px Helvetica";
    ctx.fillText(document.getElementById("text").value, 100, 100);

    document.getElementById("img").src = canvas.toDataURL("image/png");
}
    </script>
</head>
<body>
    <input id="text" onkeyup="update()" />
    <img id="img" />
</body>

一种通过JS保存HTML结果的方法

1 个答案: