How to download the current page as a file / attac

2019-01-07 20:00发布

站内问答 / JavaScript
2007 5 3

I am aware of the hidden iFrame trick as mentioned here (http://stackoverflow.com/questions/365777/starting-file-download-with-javascript) and in other answers.

I am interested in a similar problem:

How can I use Javascript to download the current page (IE: the current DOM, or some sub-set of it) as a file?

I have a web page which fetches results from a non-deterministic query (eg. a random sample) to display to the user. I can already, via a querystring parameter, make the page return a file instead of rendering the page. I can add a "Get file version" button (our standard approach) but the results will be different to those displayed because it is a different run of the query.

Is there any way via Javascript to download the current page as a file, or is copying to the clipboard my only option?

EDIT An option suggested by Stefan Kendall and dj_segfault is to write the result server side for later retrieval. Good idea, but unfortunately writing files server side is out of the question in this instance.

How about shudder passing the innerHTML as a post parameter to another page?

5条回答
成全新的幸福
2楼-- · 2019-01-07 20:44

Can you not cache the query results, and store it by some key? That way you can reference the same report output forever, or until your file garbage collector comes along. This also implies that you can create static URLs to report outputs, which tends to be nice.

查看更多
0人赞 添加讨论(0) 举报
冷血范
3楼-- · 2019-01-07 20:45

Depending on the size and if support is needed for ancient browsers, but you can consider creating a dynamic file using data: URIs and link to it. I'be seen several places that do that. To get the brorwser to download rather than display it, play around with the content type you put in the URI and use the new html5 download attribute. (Sorry for any typos, I'm writing from my phone)

查看更多
0人赞 添加讨论(0) 举报
在下西门庆
4楼-- · 2019-01-07 20:53

To add to Mic's terrific answer above, some additional points:

  • If you have Unicode content (Or want to preserve indentation in the source), you need to convert the string to Base64 and tell the Data URI to treat the data as such:

    • (function(){
    document.location = 
        'data:text/attachment;base64,' + // Notice the new "base64" bit!
        utf8_to_b64(document.getElementById('hello').innerHTML);
            //utf8_to_b64(document.documentElement.innerHTML); //To Download Entire Html Source
})();

function utf8_to_b64( str ) {
  return window.btoa(unescape(encodeURIComponent( str )));
}

    utf_to_b64() via MDN -- works in Chrome/FF.

  • You can drop this all into an anchor tag, allowing you to set the download attribute:

    • <a onclick="$(this).attr('href', 'data:text/plain;base64,' + utf8_to_b64($('html').clone().find('#generate').remove().end()[0].outerHTML));" download="index.html" id="generate">Generate static</a>

    This will download the current page's HTML as index.html and removes the link used to generate the output. This assumes the utf8_to_b64() function from above is defined somewhere else.

    Some useful links on Data URIs:

    查看更多
    0人赞 添加讨论(0) 举报
    Viruses.
    5楼-- · 2019-01-07 20:54

    You can try with the protocol data:text/attachment

    Like in:

    <html>
<head>
    <style>
    </style>
</head>
<body>
    <div id="hello">
        <span>world</span>
    </div>
<script>
(function(){
    document.location = 
        'data:text/attachment;,' + //here is the trick
        document.getElementById('hello').innerHTML;
            //document.documentElement.innerHTML; //To Download Entire Html Source
})();
</script>
</body>
</html>

    Edit after shesek comment

    查看更多
    0人赞 添加讨论(0) 举报
    手持菜刀，她持情操
    6楼-- · 2019-01-07 20:56

    I don't think you're going to be able to do it exactly the way you want to. JavaScript can't create a file and download it for security reasons. Nor can it create it on the server for download.

    What I would do if I were you is, on the server side, create an output file with the session ID in the name in a temp directory as you create the output for the web page, and have a button on the web page with a link to that file.

    You'll probably want a separate process to remove files over a day old or something like that.

    查看更多
    0人赞 添加讨论(0) 举报
    登录 后发表回答
    相关问题
    查看全部
    相关文章
    查看全部
    收藏的人(3)