网站建设计划书范本,免费发布产品信息网站,asp学习网站,网址导航页面触发下载在浏览器中有两种方式#xff1a;1. 客户端的方式 2. 服务器的方式
1. 服务器的方式
通过 a 元素链接到一个服务器的地址#xff0c;然后需要后端人员配置#xff0c;当用户点击按钮请求这个地址时#xff0c;服务端给他加上一个响应头。Content-Disposition 设置…触发下载在浏览器中有两种方式1. 客户端的方式 2. 服务器的方式
1. 服务器的方式
通过 a 元素链接到一个服务器的地址然后需要后端人员配置当用户点击按钮请求这个地址时服务端给他加上一个响应头。Content-Disposition 设置成附件格式。客户端不用做任何事情只需要一个超链接就可以了。
a hrefhttp://localhost:6666/a.pdf点击下载/a
// 服务端代码
app.get(/es6.pdf, (req, res) {res.setHeader(Content-Disposition, attachment;filenamees6.pdf);res.sendFile(__dirname /es6.pdf);
});
2. 客户端的方式
当后端人员不知道这个请求头时只有靠咱自己可以在 a 标签里加 download 属性赋值一个文件名。href 的文件地址必须是同源地址。
a hrefhttp://localhost:6666 downloadabc.pdf/a
3. 客户端的权限下载
很多时候我们是在 JS 中获取下载地址然后创建 a 标签去下载为什么用这种方式呢因为我们的下载是需要做权限认证的只有登录的用户才能下载文件。
代码如下
const btn document.querySelector(.btn);// 给按钮注册点击事件
btn.onclick async function () {const resp await fetch(http://localhost:9527/es6.pdf, {headers: {// 将token给服务器带过去服务端验证成功后响应文件的二进制数据authorization: Bearer ${getToken()},},});// 等待二进制数据到达客户端const blob await resp.blob();// 用二进制数据创建一个本地URL地址blob 地址本地临时地址。const url URL.createObjectURL(blob);const a document.createElement(a);a.href url;a.download es6.pdf;a.click();
};
但是这段代码是有问题的如果是 a 元素点击下载它的下载逻辑是用户点击 a 元素对服务器产生了一个请求服务器就把这个文件数据响应给浏览器如果文件比较大就会像流水线一样分块传输给浏览器浏览器不会在本地保存这个数据而是在用户选择文件夹时让这个数据直接流向这个文件夹浏览器就不会管这个数据了这个就从网络 IO 变成了文件 IO中间浏览器不做本地保存这就意味着哪怕这个文件有 100 个 g 也不会占用浏览器内存。
但是如果是 Ajax 请求这种模式就会出问题因为 await resp.blob()这个是在等待等待服务器把数据全部传给浏览器生成一个 blob 对象然后要等传输完成后再在浏览器储存。要等数据都到本地了才会触发下载。
所以不能直接用 Ajax 传输文件数据了之所以我们要用 ajax就是因为我们需要带上 token那么我们可以这样处理要下载文件之前我们先将 token 带给服务器告诉它我们有没有登录有登录的话服务器给我一个 cookiecookie 是临时的过期时间很短。客户端拿到 cookie 后再去生成 a 元素直接去链接这个文件并且触发这个 a 元素点击。a 元素的点击会自动带这个 cookie 过去服务器再去验证这个 cookie成功后就去传输这个数据。
