web项目中文件下载的常用方式

小咪咪 2024-04-17 21:57 18阅读 0赞

文件下载是项目中最基本的功能之一，基本上大多数项目中都会使用到这个功能，如在导入某个excel文件之前，需要先下载这个模板文件。或者是将某个查询结果导入到excel中，然后在再下载这个excel文件等等。

**一、文件在项目中**

这种情况最简单，处理起来很方便。因为文件是在项目中，直接下载操作简单。如果不是图片文件，则在页面中使用window.open(url)下载即可，这个url是文件的全路径如：

window.open('\{ \{projcfg.appurl\}\}/static/zngl/downLoad/导入模板文件.xls');如果是图片文件，需要下载的话课可以采取和前面一样的方式；如果是想展示，则设置img标签的src属性为图片的全路径即可。目前自己在项目中都是这样处理的，因为需要下载和展示的文件不是太多，使用这种方式处理起来非常方便。

**二、文件和项目不在同一个根目录**

当项目中需要展示或者是下载的文件比较多的时候，采用上面的方式则不太合适，而且如果在部署项目时，如果需要对项目进行全覆盖部署，则上面的下载文件的方式明显不适合了。这是可以采取一种新的方式来处理，通过流读取的方式来下载文件。简单点讲则是文件保存的目录和项目的根目录不在同一个文件夹，则需要先将用程序将项目之外的文件读成二进制流的形式，然后在将文件流通过网络返回到页面中。实际上这种方法只比第一种方法多操作一步，可是由于需要对读取的文件做相应的处理，所以两步都的自己来手动操作，可以写成一个工具类。JavaScript代码如下:

/\*\*文件的下载与回显公共router\*/  
var express = require('express');  
var config = require('./config');  
var router = express.Router();  
var $util = require('../core/utils/mysql\_utils');  
router.get("/downLoadFile",function(req,res,next)\{  
var filePath = req.query.filePath;  
if(filePath === ''||filePath ===null||filePath === undefined)\{  
$util.jsonWrite(res,"文件地址错误");  
\}else\{  
try\{  
let files = filePath.replace(/\\\\/g, "/");//把地址中'\\'转换为'/'  
let date = new Date();  
let \_ctx = files.substring(files.lastIndexOf("."),files.length);  
console.log(\_ctx);  
res.download(files,date.getTime()+\_ctx);  
\}catch(err)\{  
console.error(\`文件或图片下载错误：$\{err.message\}\`);  
\}  
\}  
\});

说明：这个js文件中的方法需要页面中能够直接访问，如果有权限设置的要特别注意。是需要传递一个参数即可，即是文件的真实路径，而且是文件的全路径，不能是相对路径。Java代码类似，原理是一样的，只是需要设置返回的响应头信息为二进制形式，Content-Type': 'application/octet-stream'，不在是文档形式；还有则是文件名称，如果有中文一定要进行转码，否则会出错，老外写的很多东西都不认中文。

linux中还有一种更简便的方式，linux中有一个功能，叫做文件挂载，也叫做软连接。比如两个文件夹a和b都在根目录下，可以将a文件夹挂载到b文件下，然后页面中下载文件或者是展示图片时，完全可以采用第一种方式。由于现在项目中需要展示大量图片，所以我们现在的项目中准备采用这种方式，由于是其他人负责，所以我不是太懂，也没有研究过。

**注意事项**

文件下载时，一定要确保路径正确，而且一定要捕获异常，否则出现未知错误，很难找原因。如果各位朋友有更好的方法，欢迎留言分享。

2020-01-16修改

下载文件时，在页面中发起请求的三种方式，自己亲自测试可用，href为文件下载的地址//

//下载方式一
    window.open(href, '_self');
    //下载方式二
    //window.location.href = href;
    
    //下载方式三
    let linkk = document.createElement('a');
    linkk.setAttribute('href', href);
    linkk.setAttribute('target', '_blank');
    linkk.click();