文件下载的消息格式

  1. 服务器只要在响应头中加入 Content-Disposition: attachment; filename="xxx" 即可触发浏览器的下载功能,其中:

    • attachment 表示附件,浏览器看到此字段,触发下载行为(不同的浏览器下载行为有所区别);
    • filename="xxx" 这是告诉浏览器,保存文件时使用的默认文件名;
  2. 这部分操作是由服务器完成的,和前端开发无关;

启用迅雷下载

  1. 用户可能安装了某些下载工具,这些下载工具在安装时,都会自动安装相应的浏览器插件,只要对下载地址稍作修改,就会触发浏览器使用插件进行下载,当然,不同插件的地址规则不同;

  2. 比如,迅雷的下载地址规则为:

    let url = 'thunder: //base64(AA下载地址ZZ)';
    

服务端

const express = require('express');
const path = require('path');
const app = express();

const port = 8000;

app.get('/download/:filename', (req, res) => {
  const filename = path.join(__dirname, './res', req.params.filename);

  res.download(filename, req.params.filename);
});

app.listen(port, () => {
  console.log(`server listen on ${port}`);
});

客户端

HTML
JavaScript
<body>
  <a data-res="thunder" href="http://localhost:8000/download/Wallpaper1.jpg">
    下载桌面壁纸1
  </a>
  <a data-res="thunder" href="http://localhost:8000/download/Wallpaper2.jpg">
    下载桌面壁纸2
  </a>
</body>
const links = document.querySelectorAll('[data-res=thunder]');
for (const link of links) {
  const base64 = btoa(`AA${link.href}ZZ`);
  const href = `thunder://${base64}`;
  link.href = href;
}
打赏作者
您的打赏是我前进的动力
微信
支付宝
评论

中午好👏🏻,我是 ✍🏻   疯狂 codding 中...

粽子

这有关于前端开发的技术文档和你分享。

相信你可以在这里找到对你有用的知识和教程。

了解更多

目录

  1. 1. 文件下载的消息格式
  2. 2. 启用迅雷下载
    1. 2.1. 服务端
    2. 2.2. 客户端