JS實現html頁面點選下載檔案
阿新 • • 發佈:2021-11-22
<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`); });