整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
載腳本長期以來一直是互聯網可用性的重要組成部分。一般都是在服務端來實現的居多，隨著技術的發展，前后端分離技術的興起，以前很多后端的事也更多讓前端來實現，我開始尋找一種無需服務器就可以強制下載的方法，經過一番努力，終于我找到了它，就在Firefox Devols Debugger中，有興趣的朋友可以自己去試一下！
后端的活我也能干了
廢話不多說，直接上腳本。
1、javascript腳本
function downloadFile(data, fileName, type="text/plain") {
// 創建不可見的元素
const a = document.createElement("a");
a.style.display = "none";
document.body.appendChild(a);
// 將href設置為要下載數據的blob表示形式
a.href = window.URL.createObjectURL(
new Blob([data], { type })
);
// 使用下載屬性設置所需的文件名
a.setAttribute("download", fileName);
// 通過模擬點擊觸發下載
a.click();
// 清理
window.URL.revokeObjectURL(a.href);
document.body.removeChild(a);
}
2、html元素
<form onsubmit="onFormSubmit(); return false;"> <p> <label for="demo_filename">文件名稱：</label><br> <input type="text" id="demo_filename"> </p> <p> <label for="demo_content">內容：</label><br> <textarea id="demo_content"></textarea> </p> <button type="submit">下載</button> </form>
3、運行效果
是不是很簡單，這樣做的函數非常小，并且依賴于URL.createObjectUrl，函數注入<a>元素，將其設置為Blob值設置為目標文件的文本內容，并單擊下載按鈕以觸發下載。元素在過程中保持隱藏狀態，并在click()調用，一旦函數被調用，瀏覽器的下載提示就會顯示出來，createObjectURL和Blob這兩種技術才是真正的魔力！
后端工程師表示可以早點下班了
演示視頻在文章底部
1.頁面內容居中顯示方法
將這段代碼<div style="width:50%;margin:auto;">放置在<body>標簽之下。
將</div>放置在</body>之上。
將全部內容包裹在這個div中，就可以實現整個頁面居中。
內容顯示寬度為瀏覽器視窗寬度的50%。
margin（外邊距）是在CSS布局中經常用到的屬性，它指定了該div元素距離四周的距離。使用“auto”值，可以實現居中。
2.導航欄懸停頂端方法
把四個a標簽裝到一個div中。
將<div style="position:fixed; top:0px;">添加到<a style="margin: 0px 30px 0px 10px;" href="#chapter1">試飛進程</a>之上。
將</div>添加到<a style="margin: 0px 30px 0px 0px;"href="#chapter4">總體評價</a>之下。
position是css布局中指定位置的屬性，“fixed”值是讓該div懸停于固定位置。
默認下，該div距離視窗頂端有10px左右的距離，因此為了讓它與視窗頂部對齊，添加top：0px。
3.鼠標滑過導航標題或鏈接時改變背景色提示
這就要介紹關于css的寫法了。
簡單來說，就是在<head></head>標簽中添加
<style>
a:hover
{
background-color:#ffff00;
}
</style>
學過HTML頁面中head標簽有啥用？——零基礎自學網頁制作的小伙伴應該知道，CSS腳本是可以添加在head元素中的。
其中，a:hover中的a指的是所有<a></a>標簽。
hover指的是：當鼠標懸停在a上面時的狀態。
使用：連接。
這個狀態下要執行的內容在{}中。
background-color:#ffff00;即背景色為黃色。
3.隱藏滾動條方法
首先，我們要明確一點，就是，滾動條是在內容長度超過視窗高度時產生的。
如果要取消視窗最右側滾動條，就要控制內容高度。
把<p></p>和<img/><map></map>全部裝進<div></div>中，控制該div的高度可以實現。
在<p>標簽色上面添加<div>。
在</map>標簽下面添加</div>。
下面，為div規定尺寸，添加style="width:610px; height:530px;"。
這樣，就不會超出視窗。但是代碼寫完后發現并不是，如圖：
多出的文字內容超出div范圍，右側滾動條依然存在。
這就要在div的style中再增加一條語句"overflow-y:scroll;"
這句話的意思是“overflow-y”（超出最大高度）就顯示滾動條（scroll）。而不是讓內容超出div的邊框。
<div style="width:610px; height:530px; overflow-y:scroll;" >
如圖：
因為圖片寬度的問題，下方的x軸的scroll也出現了，我們不想看到它，影響美觀。
添加“overflow-x：hidden”即可，hidden（隱藏）。
<div style="width:610px; height:530px; overflow-y:scroll; overflow-x:hidden;" >
如圖：hidden之后，將無法滾動或拖動畫面。
最后，我們要把右側的scroll也隱藏掉，因為點擊鼠標，滾動滾輪就夠了，滾動條實在礙眼。
從前面的例子可知，hidden是不行的，有沒有別的辦法？
那就是在蓋div的外部再添加一個div，讓這個div的寬度略小于里面div的寬度，小到剛剛擋住滾動條既可以。如圖：
這個div這樣寫即可
<div style="margin:30px 0px 0px 0px;width:600px;overflow:hidden;">
</div>
同時還要給里面的div添加margin來讓它們對齊
<div style="margin:30px 0px 0px 0px;width:600px;overflow:hidden;">
<div style="margin:0px 0px 0px 8px;width:610px; height:530px; overflow-y:scroll;overflow-x:hidden;" >
<!--省略了p img map 請自行腦補或參考源碼-->
</div>
</div>
完整代碼：用HTML制作一個簡單頁面（代碼閱讀練習）——零基礎自學網頁制作
作流設計器javascript 源碼，就問你香不香，拿走不謝～，先看看demo效果，pc端瀏覽器版http://kgo-js.com/htmls/xbpmdesignsample.html
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
