gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-03 11:13:04 24 4
gpt4 key购买 nike

我制作了一个 JavaScript Web 应用程序来计算基于 HTML 表单的内容。它必须在所有现代 Web 浏览器和大多数使用的移动设备上运行良好,所以我使用 Bootstrap 3 做到了这一点,这里没问题,但该应用程序正在返回包含结果和其他数据的页面,我似乎无法理解了解如何能够在所有移动设备和台式电脑上保存这些结果。

到目前为止,这是我尝试过的:

  1. 我已尝试生成页面的打印屏幕,但根据我所阅读的内容,仅使用 JavaScript 无法完成此操作。所以这里是死胡同。

  2. 现在我正在使用 jsPDF用结果创建一个 PDF,这适用于所有东西,但当涉及到下载按钮时,它只适用于桌面和 iOS。在 Android 的默认浏览器(版本低于 4.4)上,它似乎无法正常工作。什么都没有发生,问题很普遍(同样,从我读过的内容来看)。 Blob.js 相关。

  3. 我试过使用 ViewerJS向用户显示生成的 PDF。这个插件有一个下载按钮,所以这是我考虑使用它的主要原因。但我仍然有一个问题,ViewerJS 需要一个指向磁盘上 PDF 文件的路径才能工作,而 jsPDF 不会创建一个,它只是创建一个 URI 路径(我希望这就是它的名字),就像这样:data:application/pdf; base64,JVBERi0xLjM...(一个很长的 URI)。而且我不知道如何让 ViewerJS 从该 URI 而不是从磁盘上的文件加载 PDF。

我正在寻找其中一个的解决方案,同时也在寻找新的建议。

我真的希望有人能帮助我。提前谢谢你。

最佳答案

您可以使用 HTML5 canvas 并让用户将结果下载为 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>

关于javascript - 一种通过JS保存HTML结果的方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21670599/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com