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只被火狐和谷歌兼容。

因此,大部分情況下我們還是老老實實得依靠服務器返回文件來完成下載功能。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM