Html 經常會用到的幾個儲存按鈕、下載按鈕、還原按鈕、復原按鈕、恢復按鈕，不論是 input 還是 textarea 輸入框，有了這幾個按鈕，程序就變得超方便，使用者用起來更加得心應手。
程序猿如果要加上這些按鈕，往往都要東拼西湊，這次本人一次過分享出來，給大家參考一下。
這些按鈕有些是 HTML 自帶的，有些是用 JS 編寫的，不過!無論是那一種方式，都是能用的。
好! Action...
下載按鈕(儲存按鈕):
這個連結前面不能加上"https://" 或 "http://" 或 "https://www.moonlol.com/" 或 "http://www.moonlol.com/"
只可以填上文件相對路徑，如"mlogo.png" 或 "/mlogo.jpg" 或 "image/mlogo.mp3" 或 "/file/mlogo.mp4"
01. 在連結(鏈接)加上 download 下載檔案文件
程式碼:
<a href="image/mlogo.jpg" download>下載圖片或檔案 01</a>02. 下載連結(連接)改為 download="Mpng" 自定義檔案名稱
程式碼:
<a href="image/mlogo.png" download="Mpng">下載圖片或檔案 02</a>03. 將 A 下載連結標籤，模仿 Input 或 Button 樣式
程式碼:
<style type="text/css">
#download-btn {
background: #04AA6D;
margin-top: 5px;
padding: 10px 20px;
color: white;
text-decoration: none;
border-radius: 5px;
display: inline-block;
}
#download-btn:hover {
background: #059862;
}
</style>
<a href="image/mlogo.png" id="download-btn" download>下載圖片或檔案 03</a>04. HTML5 的 Canvas 引用圖片、檔案，並下載 Canvas 程式產生出來的圖片、文件。
一、程式碼：
<script type="text/javascript">
function download() {
const canvas = document.querySelector('canvas');
const url = canvas.toDataURL('image/png');
const a = document.createElement('a');
a.href = url;
a.download = 'drawing.png';
document.body.appendChild(a);
a.click();
a.remove();
};
</script>
<button onClick="download()">下載</button>二、程式碼：
<script type="text/javascript">
function download() {
const canvas = document.querySelector('canvas');
const url = canvas.toDataURL('image/png');
const a = document.createElement('a');
a.href = url;
a.download = 'qr-code.png';
document.body.appendChild(a);
a.click();
a.remove();
}
generate();
</script>
<button onClick="download()">下載</button>三、程式碼：
<script type="text/javascript">
function generate() {
var canvas = document.getElementById("qrcode").querySelector("canvas");
var dataURL = canvas.toDataURL("image/png");
var downloadBtn = document.getElementById("downloadBtn");
downloadBtn.href = dataURL;
}
</script>
<a href="#" id="downloadBtn" download="qrcode.png">下載QRCode</a>URL連結使用絕對路徑(絕對位址)下載問題:
使用 download 屬性需要注意，只有同域（來源相同）時才會得到完整支援。 這一點 w3school 並沒有明確指出。 Mozilla 的開發文檔裡有一行小字：This attribute is only honored for links to resources with the same-origin. 在 Chrome 下，當 href 不同域，會以原始的名稱下載檔。在 Firefox 下，當 href 不同域時，會當做普通 A 鏈接標籤處理，直接在瀏覽器中打開該連接。
而且 download 是一個非標準 MIME 類型：某些情況下，即使資源是圖片，但如果伺服器返回的 MIME 類型不是標準的圖片類型，如: image/jpeg、image/png 等，瀏覽器也可能不會觸發下載行為。
解決方法：
一、針對其它源的圖片或文件位址做代理，將對它們的訪問代理到本地處理。
二、將其它源的圖片或文件轉成 Base64 編碼後，再放入 href 位置內。
圖片轉換Base64工具：上傳圖片網站
演示：
技術文檔：
01. How To Create a Download Link
還原按鈕(Undo 復原按鈕 / 恢復按鈕):
程式碼：
<script type="text/javascript">
var save = ''
function undo() {
undobtn = document.biggbks.text.value
document.biggbks.text.value = save
save = undobtn
}
</script>
<form name="biggbks">
<textarea name="text" id="text" rows="" cols="" style="width:350px;height:150px;"></textarea>
<br />
<br />
<input type="button" value="復原" onClick="undo()" />
</form>技術文檔：
01. Undo/Redo In Text Field - UndoRedo.js
02. GitHub jzaefferer/undo: Undo.js
測試代碼(網頁)：ifreesite.com/runcode.htm
圖片預覧：
