1. 程式人生 > 其它 >JS實現html頁面點選下載檔案

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`);
});