【JS&JQuery】文件图片下载

第一种:a标签点击直接下载

<a target="_self" href="url地址" download=""></a>

第二种:打包完成后创建a标签下载

html中

<div class="chooseOrDownload">
    <span id="download">下载</span>
 </div>

less中

.chooseOrDownload{
  font-size: 16px;
  float: right;
  #download{
    cursor: pointer;
    background: rgba(35, 121, 229, 1);
    color: #fff;
    border-radius: 3px;
    padding: 5px 15px;
  }
}

js中

$('#download').click(function () {
    $.ajax({
        url: '../../fileManager/packZip',
        data: {
            id: download_id
        },
        type: 'post',
        dataType: 'json',
        success: function (res) {
            if (res.code === 1) {
                $('#alertBoxModal').modal();
                $('#alertBoxModal_yes').click(function () {
                    $('#alertBoxModal .close').click();
                    var url = serverURL + ctx + '/fileManager/downloadZip?id=' +download_id;
                    var a='<a class="downloadFile" target="_self" href="'+url+'" download=""><span></span> </a>';
                    $(".chooseOrDownload").append(a);
                    /*使用form下载*/
                    /*var form='<form class="downloadFile" target="_blank" method="post" action="'+url+'"> </form>';
                    $(".chooseOrDownload").append(form);*/
                    /*使用a下载*/
                    $('.chooseOrDownload .downloadFile span').each(function () {
                        // $(this).submit();/*使用form下载*/
                        $(this).click(); /*使用a下载*/
                    });
                    $('.chooseOrDownload .downloadFile').remove();
                });
            } else {
                $.messager.alert('提示消息', res.msg, 'error');
            }
        }
    });
});