All geek questions in one place

The way to save HTML results via JS

I made a JavaScript web application to compute something based on an HTML form. It should work well in all modern web browsers and most used mobile devices, so I did it with Bootstrap 3, there are no problems here, but the application returns a page with the results and other data, and I can’t seem to make it possible to save these results on all mobile devices + desktop PCs.

Here is what I have tried so far:

  • I tried to create a page print screen, and from what I read it is impossible to do using JavaScript only. This is a dead end.

  • Now I use jsPDF to create a PDF file with the results, this works well for everyone, but when it comes to the download button, it only works on desktop computers and iOS. In the default Android browser (version under 4.4), it does not seem to work. Nothing happens, and the problem is in general (again, from what I read). Associated with Blob.js.

  • I tried using ViewerJS to show the generated PDF file to the user. This plugin has a download button, so the main reason I considered it. But I still have one problem: ViewerJS needs a path to the PDF file on the disk to work, and jsPDF does not create it, it just creates the URI path (I hope that it is called), for example: data: application / pdf; base64, JVBERi0xLjM ... (very long URI). And I don't know how to get ViewerJS to load the PDF from this URI, and not from a file on disk.

I am looking for a solution for one of them, but also new suggestions.

I really hope someone can help me. Thank you in advance.

+4
source share
1 answer

HTML5 /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>

0

Source: https://habr.com/ru/post/1526108/

More articles:


All Articles