base64字符串实现下载文件

Posted 2021-12-01 phermis

思路：动态创建a标签，将base64字符串地址赋值给href；执行a标签的click事件

let Base64String = data.Base64String;//后端返回的base64字符串
let fileName = "考勤表";//下载的文件名称
let prefix =  ‘data:application/vnd.ms-excel;base64,‘
let a=  document.createElement(‘a‘);//创建a标签
let content =prefix +Base64String;
a.setAttribute(‘href‘,content);
a.setAttribute(‘download‘,fileName);
a.setAttribute(‘target‘, ‘_blank‘);//打开一个新的窗口
a.setAttribute(‘id‘,"downLoad");
if(document.getElementById(‘downLoad‘)) {
document.body.removeChild(document.getElementById(‘downLoad‘));
}
document.body.appendChild(a);
a.click();

后台有时返回的数据只有base64字符串，需要自己拼接HTTP Content-type的类型；如上面的prefix 
下面贴上一段base64字符串：
data:application/vnd.ms-excel;base64,UEsDBBQACAAIABGns07kSK2vGAEAADMDAAATAAAAW0NvbnRlbnRfVHlwZXNdLnhtbLWSz0oDMRDGX2XJVZq0HkSk2x6qHlWwPsCYzHZD84/MtLZvbzYrIqWCHnqaJN/M9/0IM18evGv2mMnG0IqZnIoGg47Ghk0r3taPk1vREEMw4GLAVhyRxHIxXx8TUlNmA7WiZ053SpHu0QPJmDAUpYvZA5dr3qgEegsbVNfT6Y3SMTAGnvDgIRbze+xg57hZje+DdSsgJWc1cMFSxUw0D4cijpTDXf1hbh/MCczkC0RmdLWHepvo6jSgqDQkPJePydbgvyJi11mNJuqdLyOSUkYw1COyd7JW6cGGMfQFMj+BL67q4NRHzNv3GLeyahcBGCLq+bf8KpKqZXZBEOKjQzpHMSqXjO4ho3nlXJb8PMHPhm8QVZd+8QlQSwcI5EitrxgBAAAzAwAAUEsDBBQACAAIABGns06Y2uuLrgAAACcBAAALAAAAX3JlbHMvLnJlbHONz8EOgjAMBuBXWXqXgQdjDIOLMeFq8AHmVgYB1mWbCm/vjmI8eGz69/vTsl7miT3Rh4GsgCLLgaFVpAdrBNzay+4ILERptZzIooAVA9RVecVJxnQS+sEFlgwbBPQxuhPnQfU4y5CRQ5s2HflZxjR6w51UozTI93l+4P7TgK3JGi3AN7oA1q4O/7Gp6waFZ1KPGW38UfGVSLL0BqOAZeIv8uOdaMwSCrwq+ebB6g1QSwcImNrri64AAAAnAQAAUEsDBBQACAAIABGns05UK3Z56AAAAFgBAAAPAAAAeGwvd29ya2Jvb2sueG1sjVC9TsMwEH4V63bqwIBQlKQDLJWQYGI3zrmxavuis0NZ2XgD5m5sPABDXwYQG6+A0yiiI9N9p+++H93P+75aPnonHpCjpVDD6aIAgUFTa8O6hiGZkwtYNtWWeHNPtBH5OsSSa+hS6kspo+7Qq7igHkPmDLFXKa+8lmSM1XhFevAYkjwrinPJ6FTKSbGzfYTJ7T9esWdUbewQk3eTlVc2QFONre4sbuNfyXEVsqnkEXeQzlME5bGGj/3u6+nt8/nle/cK4sCs2vwDEFzaDHjVZjwazWqtnL5lYQbnLjO8CdekJsV4Nec3v1BLBwhUK3Z56AAAAFgBAABQSwMEFAAIAAgAEaezToFikqLWAAAANAIAABoAAAB4bC9fcmVscy93b3JrYm9vay54bWwucmVsc62Rz2rDMAyHX8XovjjpYIxRt5cx6LV/HkDYShya2MbS2uXtazZWUihjh56EZPT9Pqzl+msc1Iky9zEYaKoaFAUbXR86A4f9x9MrKBYMDocYyMBEDOvVcksDSllh3ydWhRHYgBdJb1qz9TQiVzFRKC9tzCNKaXOnE9ojdqQXdf2i85wBt0y1cQbyxjWg9lOi/7Bj2/aW3qP9HCnInQh9jvnInkgKFHNHYuA6Yv1dmqpQQd+XWTxShmUayl9eTX76v+KfHxrvMZPbSS6HnlvMx78y+ubaqwtQSwcIgWKSotYAAAA0AgAAUEsDBBQACAAIABGns07ETz1n2QUAAPQ6AAAYAAAAeGwvd29ya3NoZWV0cy9zaGVldDEueG1sjdvPTltHGIbxW7G8b+xjB0IiIApDyPxbVF1078IhWAEb2U7ovXXRS+ot1JDIh5nv03zPLiS/mIkfCYWXOf/98+/px78f7kc/+s12uV6djbs30/GoX12vb5arr2fj77vb307GH89Pn9abb9u7vt+N9ny1/bA5G9/tdo8fJpPt9V3/sNi+WT/2q/2f3a43D4vd/sPN18n69nZ53V+ur78/9KvdZDadHk82/f1it/9U27vl43b889XIa20fN/3i5uUID/c/X+phsVyNz09vlvtXfz79aNPfno0/dR/yfD4eTc5PX/Sfy/5p++rXo+d/yl/r9bfnD8LN2Xj6YicCX7189t83o5v+dvH9fvfH+sn3y693u/27dDS8/uVitzg/3ayfRvv3pNuf5/r5F5+68Wj78tp7vt3/7o/z6enkx/7zXP8SF1J0pXBSzEpxKcW8FJ+leFuKKymOSvFFiuNSeCnelSJIcVKKKMX7UiTlHave1KyQ4V2d7CsdUs0OqWby71Tv84VNnEKqFpcKqWJ8VkhV40ohVY4v9nG9TYJNok2STXKTFNHmh2hzO5pNnELqaAqpoymkjqaQOpp9XG+TYJNok2ST3CRFtLeHaG/taDZxCqmjKaT6gvRZIXU0hdTR7ON6mwSbRJskm+QmKaIdHaId2dFs4hRSR1NIHU0hdTSF1NHs43qbBJtEmySb5CYpoh0foh3b0WziFFJHU0gdTSF1NIXU0ezjepsEm0SbJJvkJimivTtEe2dHs4lTSB1NIXU0hdTRFFJHs4/rbRJsEm2SbJKbpIh2coh2YkeziVNIHU0hdTSF1NEUUkezj+ttEmwSbZJskpukiPb+EO29Hc0mTiF1NIXU0RRSR1NIHc0+rrdJsEm0SbJJbpIiWjcdvqee2tmAcZqpw2mm/n+/Zup0mqnbgTN7YAIwEZgETG6bsuCrVUT5/lwUtI3TjCioGFFQMaKgYkRB+8wemABMBCYBk9umLDiMJR1YS4BxmhEFwWCiGVEQTCbgzB6YAEwEJgGT26YsOCwnHZhOgHGaEQXBeqIZURDsJ+DMHpgATAQmAZPbpiw4zCgd2FGAcZoRBcGUohlREIwp4MwemABMBCYBk9umLDhsKh0YVYBxmhEFwa6iGVEQLCvgzB6YAEwEJgGT26YsOAwsHVhYgHGaEQUVI76KgpVFM6Ig2FmACcBEYBIwuW3KgsPa0oG5BRinGVEQLC6aEQXB5gLO7IEJwERgEjC5bcqCw/TSge0FGKcZURDML5oRBcEAA87sgQnARGASMLltyoLDDtOBIQYYpxlREGwxmhEFwRoDzuyBCcBEYBIwuW3Kn50Pm8zM3gougHGaET8/V0xdUDPiJ+iKET9Ct8/sgQnARGASMLltyoLDJjMDmwwwTjOioGJEQbDJaEYUBJsMMAGYCEwCJrdNWfDVBRZyg4VcYSF3WBQjCpJbLOQaC7nHQi6ykJss5CoLucvCN5nZsMnMwCYDjNOMKKgYURBsMpoRBcEmA0wAJgKTgMltUxYcNpkZ2GSAcZoRBcEmoxlREGwy4MwemABMBCYBk9umLDhsMjOwyQDjNCMKgk1GM6Ig2GTAmT0wAZgITAImt01ZcNhkZmCTAcZpRhQEF180IwqCTQac2QMTgInAJGBy25QFh01mBjYZYJxmREGwyWhGFASbDDizByYAE4FJwOS2KQsOm8wMbDLAOM2IgmCT0YwoCDYZcGYPTAAmApOAyW1TFhw2mRnYZIBxmhEFwSajGVEQbDLgzB6YAEwEJgGT26a8Gj9sMnN7K7gAxmlGXI9XTF1QM+KCvGLEDXn7zB6YAEwEJgGT26YsOGwyc7DJAOM0IwqCTUYzoiDYZMCZPTABmAhMAia3TVlw2GTmYJMBxmlGFASbjGZEQbDJgDN7YAIwEZgETG6bsuCwyczJI0bkGSPykBHYZDQjCpLnjMiDRuRJI/KoEXnWiDxsBDaZyavHMe/6xU2/uVqvd/3m5enOw/Or5/8DUEsHCMRPPWfZBQAA9DoAAFBLAwQUAAgACAARp7NOVGfD910BAADiAgAADQAAAHhsL3N0eWxlcy54bWyFUktqwzAQvYrQvnEcaCnFdhYFQzehkC66lW3JFuiHNA52r9ZFj9QrVB83cUohqxk9vY800vfnV7GfpEAnah3XqsT5ZosRVa3uuOpLPAK7e8T7qnAwC3ocKAXk+cqVeAAwT1nm2oFK4jbaUOV3mLaSgF/aPnPGUtK5IJIi2223D5kkXOGqUKOsJTjU6lFBiX1kVhVMqwuU4wT45A90IsIjeWQpImkCnongjeURzRI3FueVXIiz1Q4noCoMAaBW1X6Blv5tNrTESiu6+ETiDXpvyZzv7teKWHxyo23nZ7m+RoKqQlAGQWF5P8QGtAml0QBahq7jpNeKiOj7K1sa791SIY7hHd7ZVcDEUBroSxdnGYawtMFoLUsmN/TEGDEfRtlQW8fnDLS1ayTUOunRxNbwq9VAW0if6XKAc3Y8yVX8GUXhbUt8CJli5duMXABX/13Jm3YT+/ORsstnrX4AUEsHCFRnw/ddAQAA4gIAAFBLAwQUAAgACAARp7NO+kZCWSwBAABYAgAAFAAAAHhsL3NoYXJlZFN0cmluZ3MueG1sdZLBSsMwHIdfpeTu0k2QIW13EHwCfYDSxrXQJrVJRW8FQSpSV5ENJoLiwQ2GTGFgh9OnWdruLcwuKl28hPy/j+T3I0TrnPqecoJC6hKsg2ZDBQrCFrFd3NXB4cH+VhsolJnYNj2CkQ7OEAVKx9AoZYo4iqkOHMaCXQip5SDfpA0SICzMEQl9k4kx7EIahMi0qYMQ8z3YUtUd6JsuBopFIsxErAiJsHscob0fICJcQ2NGNf0qx1flYsB77xpkhgbX/K/jWVqOXuuOvzzz+Uysxf2DzCUX8tuKeFTNxhsuPi8e82Iw54te3S3z22V+t3bZjdxJ8lfDpw26iEUFnvaXn6m8W/n2wZPJP72vE7GRN6zPLbXZbm3AOlgNs1V8KXmJatqv0+1fAMXXML4BUEsHCPpGQlksAQAAWAIAAFBLAQItABQACAAIABGns07kSK2vGAEAADMDAAATAAAAAAAAAAAAAAAAAAAAAABbQ29udGVudF9UeXBlc10ueG1sUEsBAi0AFAAIAAgAEaezTpja64uuAAAAJwEAAAsAAAAAAAAAAAAAAAAAWQEAAF9yZWxzLy5yZWxzUEsBAi0AFAAIAAgAEaezTlQrdnnoAAAAWAEAAA8AAAAAAAAAAAAAAAAAQAIAAHhsL3dvcmtib29rLnhtbFBLAQItABQACAAIABGns06BYpKi1gAAADQCAAAaAAAAAAAAAAAAAAAAAGUDAAB4bC9fcmVscy93b3JrYm9vay54bWwucmVsc1BLAQItABQACAAIABGns07ETz1n2QUAAPQ6AAAYAAAAAAAAAAAAAAAAAIMEAAB4bC93b3Jrc2hlZXRzL3NoZWV0MS54bWxQSwECLQAUAAgACAARp7NOVGfD910BAADiAgAADQAAAAAAAAAAAAAAAACiCgAAeGwvc3R5bGVzLnhtbFBLAQItABQACAAIABGns076RkJZLAEAAFgCAAAUAAAAAAAAAAAAAAAAADoMAAB4bC9zaGFyZWRTdHJpbmdzLnhtbFBLBQYAAAAABwAHAMIBAACoDQAAAAA=