单击后,动态充满活力的Herf将不会下载文件

时间:2018-06-19 16:47:31

标签: javascript jquery html ajax base64

我正在从数据库中提取文档名称和ID的列表,并将它们放在无序列表中,例如:

<ul id="list">
   <li onmouseover="onHover(docNumber)"> 
      <a herf="#" id="docNumber">DocName</a>
   </li>
</ul>

当我将鼠标悬停在列表项上时,它将运行该函数,以通过调用数据库并基于DocNumber获取数据来填充herf和下载属性。

function onHover(DMRSN){
     const types = [
       'application/msword',
       'application/vnd.ms-excel',
       'application/vnd.ms-powerpoint',
       'application/pdf',
       'image/png',
       'image/jpeg',
       'video/mp4'
   ]

    $.ajax({
        type: 'POST',
        url: 'blob.php?get=data',
        dataType: 'json',
        data: {DMRSN: DMRSN},
        async: true,
        success: function (data) {
            //console.log(data);

            const docNumber = data[0].DMRSN;
            const name = data[0].FileName;
            const ext = name.split('.')[1];
            const Filename = data[0].FileName;
            const Document = data[0].Document;
            let type; 

            switch(ext){
                case 'doc':
                    type = types[0];
                    break;
                case 'dotx':
                    type = types[0];
                    break;
                case 'docx':
                    type = types[0];
                    break;
                case 'xls':
                    type = types[1];
                    break;
                case 'xlsx':
                    type = types[1];
                    break;
                case 'xlsm':    
                    type = types[1];
                    break;
                case 'pptx':    
                    type = types[2];
                    break;    
                case 'ppt':    
                    type = types[2];
                    break;     
                case 'pdf':    
                    type = types[3];
                    break;
                case 'png':    
                    type = types[4];
                    break; 
                case 'jpeg':    
                    type = types[5];
                    break;     
                case 'mp4':    
                    type = types[6];
                    break;     
            }


            $('#' + docNumber).attr('herf', 'data:' + type + ';base64, ' + Document);
            $('#' + docNumber).attr('download', Filename);

            //console.log(ext);
            //window.open('data:'+ type +';base64,' + data[0].Document, data[0].FileName)


        },
        error: function (xhr, status, errorThrown) {
            console.log(xhr);
            console.log(status);
            console.log(errorThrown);
        }
    });

}

当我单击该元素时,将不会下载任何内容。我检查了一下此代码片段是否单击了一个元素,就是,只是文件没有下载。

$('#list').on('click','li a',  function(){

        console.log('click');
    });

当我查看DevTools时,可以看到所有内容都已设置好,但是单击后不会下载任何内容。 enter image description here

感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

我拼写了href属性,并用herf替换了href并正常工作。