In the browser download batch files (on)

Generally browser to download several files simultaneously, such as pdf file, to compress several files into one file on the server side. But the problem is caused by consuming cpu will io and resources of the server.

There is no way that the user points a few files, while the client to download it? Browser support html5 is possible, html tag has one attribute of a download

<a download="下载的1.pdf" href="1.pdf"> single file download </a>, tested in edge browsers, firefox and chrome are supported. But unfortunately ie browser does not support. Reference to the following examples.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <title></title>
    <script src="//libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
</head>

<body>
    <input type="button" class="downloadAll" value="批量下载" />

    <script>
        var filesForDownload = [];
        filesForDownload[filesForDownload.length] = {
            path: "1.zip", //要下载的文件路径
            name: "file1.txt" //下载后要显示的名称
        };
        filesForDownload[filesForDownload.length] = {
            path: "2.zip",
            name: "file2.txt"
        };
        filesForDownload[filesForDownload.length] = {
            path: "3.zip",
            name: "file3.txt"
        };

        function download(obj) {
            var temporaryDownloadLink = document.createElement("a");
            temporaryDownloadLink.style.display = 'none';
            document.body.appendChild(temporaryDownloadLink);
            temporaryDownloadLink.setAttribute('href', obj.path);
            temporaryDownloadLink.setAttribute('download', obj.name);
            temporaryDownloadLink.click();
            document.body.removeChild(temporaryDownloadLink);
        }

        $('input.downloadAll').click(function(e) {
            e.preventDefault();
            for (var x in filesForDownload) {
                download(filesForDownload[x]);

            }


        });
    </script>
</body>

</html>

Ie the browser how to do it? You can also use the window.open function.

<!DOCTYPE html>
<html>
  <head>
	<meta charset="utf-8">
    <title></title>
	<script src="//libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
  </head>
  <body>
    <a download="下载的1.pdf" href="1.pdf">单个文件下载</a><br>
      <a href="#" class="yourlink">下载全部文件</a>

<script>

$('a.yourlink').click(function(e) {
    e.preventDefault();
    window.open('1.zip','download');
    window.open('2.zip','download');
    window.open('3.zip','download');
});
</script>
  </body>
</html>

Complete program is based on the type of browser, call different functions to achieve.

Also to download pdf, instead of opening the browser, then you need to configure apache configuration file, add the following configuration in httpd.conf.

<FilesMatch "\.pdf$">
Header set Content-Disposition attachment
</FilesMatch>

robinhunan

Published 67 original articles · won praise 9 · Views 100,000 +

Private letter concerns

In the browser download batch files (on)

Guess you like