JS实现html页面点击下载文件

  <a href="http://localhost:5001/b.html" download="123.html">点击下载</a>

这样当用户打开浏览器点击链接的时候就会直接下载文件。

直接点击可以下载，需要注意的是download属性，当不加download属性时，如果文件格式为txt、pdf、jpg等浏览器支持直接打开的文件格式，那么不会下载，而是浏览器直接打开；添加download属性之后，就会下载，并且下载文件默认命名为你download属性的值。

其中download后面的属性是下载后文件的文件名字

如果url指向同源资源，是正常的。

如果url指向第三方资源，download会失效，表现和不使用download时一致——浏览器能打开的文件，浏览器会直接打开，不能打开的文件，会直接下载。浏览器打开的文件，可以手动下载。

解决方案一：将文件打包为.zip/.rar等浏览器不能打开的文件下载。

解决方案二：通过后端转发，后端请求第三方资源，返回给前端，前端使用file-saver等工具保存文件。

服务器代码

const express = require('express');
const app = express();
// const http = require("http");
//设置跨域访问
// app.all('*', function(req, res, next) {
//     res.header("Access-Control-Allow-Origin", "*");
//     res.header("Access-Control-Allow-Headers", "X-Requested-With");
//     res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");

//     res.header("X-Powered-By",' 3.2.1')
//     res.header("Content-Type", "application/json;charset=utf-8");
//     next();
// });

app.use('/',express.static('./static/'));

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

注意：　

1，对于rar.doc.等浏览器不能打开的文件，使用window.location.href是完全可以实现下载的。

示例： window.location.href="http://下载.rar" ，等同于<a href="http://下载.rar">下载</a>

2，对于浏览器能打开得文件，例如html,xml等，这样去写就不是下载，而是打开。我们想下载得话就得使用download属性，

示例：<a href="http://下载.rar" download="下载文件自定义文件名">下载</a>,注意download只被火狐和谷歌兼容。

因此，大部分情况下我们还是老老实实得依靠服务器返回文件来完成下载功能。