html 超链接下载文件问题如何修改文件名称

https://zhidao.baidu.com/question/543781761.html

需求：超链接下载文件，希望地址中的文件名和下载后的文件名不一样。

场景：用户上传文件，为了防止文件名重复，所以一般后台都会将文件重命名，然后将重命名的文件和原始文件名存储到数据表中；但是下载时，显示的文件名和文件地址就会不一样。

实现：【实测可行】
一》

指定下载名，通过指定 <a>的 download属性来指定文件名，比如

 <a href="/file/a32dsdfdfs23dd.zip" download="xxxx.zip">xxxx.zip</a>
 <a class="layui-btn layui-btn-primary layui-btn-radius" href="/upload/${tp.path}"  download="${tp.name}" target="_blank">${tp.name}</a>
 
参考链接：https://www.w3school.com.cn/tiy/t.asp?f=html_a_download
 				https://www.w3school.com.cn/tags/att_a_download.asp

二》

通过重新构造一个dom对象元素

 <a href="#" onclick="downloadFile()">xxxx.zip</a>

<script>
//用户自定义下载文件名
function downloadFile(){
      var filename=prompt("随便写点儿啥吧","比如我叫啥");
      var a = document.createElement('a');
      a.href="/file/a32dsdfdfs23dd.zip";              
      a.download = filename;
      a.click()
}
</script>

三》【实未现】

指定下载名，通过指定 <a>的 点击事件来指定名称，比如

<a class="layui-btn layui-btn-primary layui-btn-radius" href="/upload/${tp.path}" target="_blank">${tp.name}</a>

<script type="text/javascript">

$("a").click(function () {

var href = this;

var url = href.href;

var name = href.innerHTML;

if (url.indexOf("kindeditor") >= 0) {

download(url, name);

return false;

}

})

/**

* 下载

* @param  {String} url 目标文件地址

* @param  {String} filename 想要保存的文件名称

*/

function download(url, filename) {

getBlob(url, function (blob) {

saveAs(blob, filename);

});

};

/**

* 获取 blob

* @param  {String} url 目标文件地址

* @return {cb} 

*/

function getBlob(url, cb) {

var xhr = new XMLHttpRequest();

xhr.open('GET', url, true);

xhr.responseType = 'blob';

xhr.onload = function () {

if (xhr.status === 200) {

cb(xhr.response);

}

};

xhr.send();

}

/**

* 保存

* @param  {Blob} blob     

* @param  {String} filename 想要保存的文件名称

*/

function saveAs(blob, filename) {

if (window.navigator.msSaveOrOpenBlob) {

navigator.msSaveBlob(blob, filename);

} else {

var link = document.createElement('a');

var body = document.querySelector('body');

link.href = window.URL.createObjectURL(blob);

link.download = filename;

// fix Firefox

link.style.display = 'none';

body.appendChild(link);

link.click();

body.removeChild(link);

window.URL.revokeObjectURL(link.href);

};

}

</script>

实例三：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户修改--${site.name}</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="${base}/static/layui/css/layui.css" media="all" />
    <style type="text/css">
        .layui-form-item .layui-inline{ width:33.333%; float:left; margin-right:0; }
        @media(max-width:1240px){
            .layui-form-item .layui-inline{ width:100%; float:none; }
        }
        .layui-form-item .role-box {
            position: relative;
        }
        .layui-form-item .role-box .jq-role-inline {
            height: 100%;
            overflow: auto;
        }
        .content{
            white-space: pre-wrap;
            line-height:180%;height:auto;
            overflow:visible;
            text-overflow:inherit;
            }
        .layui-textarea{line-height:180%;border:0px;}
        .layui-form-label{font-weight:bold;}
        .layui-badge{margin-right:10px;}

    </style>
</head>
<body class="childrenBody">
<form class="layui-form" style="width:95%;">
    <input class="layui-hide" name="id" id="caseId" value="${data.id}"/>


    <span>案件信息</span><span style=&#

html 超链接下载文件问题 如何修改文件名称

悦读

html 超链接下载文件问题如何修改文件名称