flash网站首页,个人备案网站建设方案书,无极在线最新招聘找工作,免费民事法律咨询背景#xff1a; 在项目开发中#xff0c;遇到需要下载文件的情况#xff0c;文件类型可能是图片、excell表、pdf、zip等文件类型#xff0c;但浏览器会阻止不安全的下载链接。 效果展示#xff1a; 下载文件的两种方式#xff1a;
一、根据接口的相对url#xff0c;拼…背景 在项目开发中遇到需要下载文件的情况文件类型可能是图片、excell表、pdf、zip等文件类型但浏览器会阻止不安全的下载链接。 效果展示 下载文件的两种方式
一、根据接口的相对url拼接成完整路径下载
这串完整的下载路径是
开发预留 在浏览器访问图片如下 结果分析 直接在浏览器就可以直接访问可见这个文件没有加密是不安全的。 还有一个原因是实际情况根据接口的url直接下载的。另外一种导出下载是发起网络请求的接收后台传给前端的二进制流之前需要先设置responseType为blob否则默认会以json获取下载下来的文件打开会提示文件已损坏。是发起网络请求的并且后端接口返回的response头的content-type也是对应的类型我的这里是application/vnd.ms-excel;charsetUTF-8。 二、网络接口导出excell表格
实现效果 导出接口 这个接口返回的数据在控制台打印 备注控制台输出的可以看到是个正确的Blob对象这就说明我们的配置是对的。
实现思路【重点】 导出接口传参给后端后端对请求到的数据经过后端拼接然后输出二进制流文件然后给前端返回前端直接下载。 需要注意几点 1.前端请求需要携带请求体config里面要带上responseType: blob。举例 //导出文件【渡船管理】 exportCrewInfoFile(params) { return request.Get(/data/ferryShip/download?, params, { headers: { Content-Type: application/json, }, responseType: blob, }); }, 所以我们接收后台传给前端的二进制流之前需要先设置responseType为blob否则默认会以json获取下载下来的文件打开会提示文件已损坏。 2.后端最好也要配置response头的content-type为对应的类型。 3.需要给这个Blob对象设置一个type这个type表明改Blob对象所包含数据的MIME类型。如果类型未知则该值为空字符串。例如type: application/vnd.ms-excel, /** * * param {*} res 接口返回的文件流 */ export const dowloadFileUrl (res) { console.log(res) const fileNames res.headers[content-disposition] if (fileNames) { //解码 const fileName decodeURIComponent(fileNames.match(/(.*)$/)[1]) // 处理返回的文件流 const content res.data const blob new Blob([content], { // type: res.data.type||application/vnd.ms-excel, type: res.data.type||application/octet-stream; charsetutf-8 }); if (download in document.createElement(a)) { //非IE下载 const a document.createElement(a) //创建一个a标签 a.download fileName //指定文件名称 a.style.display none //页面隐藏 a.href URL.createObjectURL(blob) // href用于下载地址 document.body.appendChild(a) //插到页面上 a.click() //通过点击触发 URL.revokeObjectURL(a.href) //释放URL 对象 document.body.removeChild(a) //删掉a标签 } else { //IE10 下载 navigator.msSaveBlob(blob, fileName) } } } 三、下载文件的两种方式的对比
实现代码
代码1 if (!data.file) {ElMessage.error(文件不存在);return;}const url BASEUrl /file/ data.file;//拼接下载地址const a document.createElement(a); //创建一个a标签a.download data.name; //指定文件名称a.style.display none; //页面隐藏a.href url; // href用于下载地址document.body.appendChild(a); //插到页面上a.click(); //通过点击触发URL.revokeObjectURL(a.href); //释放URL 对象document.body.removeChild(a); //删掉a标签
代码2
/**** param {*} fileContent 文件本体* param {*} _fileName 自定义文件名*/
export const exportFileUtil (fileContent, _fileName) {const content fileContent;const blob new Blob([content], {type: fileContent.type || application/octet-stream; charsetutf-8,});const fileName _fileName;if (download in document.createElement(a)) {//非IE下载const a document.createElement(a); //创建一个a标签a.download fileName; //指定文件名称a.style.display none; //页面隐藏a.href URL.createObjectURL(blob); // href用于下载地址document.body.appendChild(a); //插到页面上a.click(); //通过点击触发URL.revokeObjectURL(a.href); //释放URL 对象document.body.removeChild(a); //删掉a标签} else {//IE10 下载navigator.msSaveBlob(blob, fileName);}
};
/*** * param {*} res 接口返回的文件流*/
export const dowloadFileUrl (res) {console.log(res)const fileNames res.headers[content-disposition]if (fileNames) {//解码const fileName decodeURIComponent(fileNames.match(/(.*)$/)[1])// 处理返回的文件流const content res.dataconst blob new Blob([content], {// type: res.data.type||application/vnd.ms-excel,type: res.data.type||application/octet-stream; charsetutf-8});if (download in document.createElement(a)) {//非IE下载const a document.createElement(a) //创建一个a标签a.download fileName //指定文件名称a.style.display none //页面隐藏a.href URL.createObjectURL(blob) // href用于下载地址document.body.appendChild(a) //插到页面上a.click() //通过点击触发URL.revokeObjectURL(a.href) //释放URL 对象document.body.removeChild(a) //删掉a标签} else {//IE10 下载navigator.msSaveBlob(blob, fileName)}}
}
总结 直接拼接url为下载路径创建一个a标签触发下载 导出接口通过接口返回的二进制流经过出来二进制流为Blob且type类型与接口一致。 三、补充理论知识
MIME类型是什么点击访问 MIME类型有哪些 点击访问 常见MIME【媒体类型】 如下 扩展名----------MIME类型 .csv--------------text/csv .jpeg/.jpg-------image/jpeg .png-------------image/png .rar--------------application/x-rar-compressed .doc-------------application/msword .docx-----------application/vnd.openxmlformats-officedocument.wordprocessingml.document .xls--------------application/vnd.ms-excel .xlsx------------application/vnd.openxmlformats-officedocument.spreadsheetml.sheet .zip--------------application/zip
